Sử dụng Command Line API của DevTool để phát triển và debug

Bạn đã từng có kinh nghiệm phát triển 1 ứng dụng web. Vậy bạn chắc không còn lạ gì với việc mở console của trình duyệt và thực hiện đặt breakpoint hay gõ lệnh console.log để debug. Đối với chrome, 1 trình duyệt khá phổ biến và quen thuộc với dân dev, DevTools của chrome với những câu lệnh của Command Line API hỗ trợ rất tốt cho công việc debug. Dưới đây là những câu lệnh hữu dụng mà bạn có thể chưa biết

$_

$_ trả về kết quả cuối cùng được tính toán lưu lại trước đó. Bạn có thể sử dụng để lấy giá trị kết quả của phép tính hay 1 DOM mà bạn đã tìm kiếm ngay trước đó

$_ có thể được sử dụng như 1 biến để phục vụ các tính toán tiếp theo

$0 ~ $4

Các câu lệnh $0, $1, $2, $3, $4 lưu lại lịch sử 5 DOM gần đây nhất được inspect trong Elements panel hoặc 5 heap object cuối cùng được chọn trong Profiles panel. $0 lưu giá trị gần đây nhất và tương tự lần lượt $1 ~ $4 lưu các giá trị trước đó.

$() và $$()

$() là alias của document.querySelector() còn $$() là alias của document.querySelectorAll() được dùng để tìm kiếm DOM. Tuy nhiên nếu trang web có sử dụng jQuery thì chú ý là cú pháp $() đã có trong jQuery nên sẽ ưu tiên cú pháp trong jQuery trước. Bình thường nếu là lệnh của jQuery thì kết quả khi tìm kiếm là 1 tập các DOM còn nếu là lệnh của command line API thì kết quả sẽ chỉ là 1 DOM.

$x()

Câu lệnh này cho phép lấy DOM theo xpath

Giả sử như bạn có 1 cấu trúc DOM như thế này

<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <img src="hoge.png">
</p>
<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <a href="#"><img src="hoge.png"></a>
</p>
<p>
  <img src="hoge.png">
</p>

Nếu muốn lấy các thẻ a nằm trong các thẻ p bạn có thể dùng $x("//p[a]") Thực ra thì bạn cũng hoàn toàn có thể dùng jQuery để làm điều tương tự.

getEventListeners()

getEventListeners trả về event listener được đăng kí cho một object nào đó. Kết quả sẽ là 1 mảng chứa các event. Lệnh này rất thuận tiện khi cần kiểm tra các event nào đang được bind vào 1 DOM nào đó, khi mà bạn chưa rõ phần code javascript đăng kí event nằm ở đâu (có thể là do người khác viết)

getEventListeners(document);

clear()

Cực đơn giản và rất hay dùng để xóa sạch màn hình console đang hiển thị đầy code debug của bạn. Thường thì bạn sẽ xái tổ hợp Ctrl + L cho nhanh và tiện hơn

copy()

copy() cho phép copy nội dung của 1 DOM dưới dạng text vào clipboard.

monitor()

monitor cho phép bạn log lại các tham số truyền vào khi function được gọi ra. Mới nghe qua thấy có vẻ hơi vô dụng vì khi gọi function thì đương nhiên bạn biết tham số đầu vào là gì rồi. Nhưng hãy tưởng tượng bên trong tính toán funcion của bạn lại gọi đến function khác và cứ như vậy các function gọi lẫn nhau, thì với việc cho monitor các function này, bất kể khi nào function đó được call (có thể không phải là trực tiếp mà gián tiếp được gọi khi thực thi 1 function khác) những thông tin về tham số đầu vào sẽ được log lại. Đây là 1 cách rất tốt để track 1 function call.

function sum(a, b) {return a+b;};
function mul(a, b) {return a*b;};
monitor(sum);
monitor(mul);

mul(4, sum(2,3));
  function sum called with arguments: 2, 3
  function mul called with arguments: 4, 5
-> 20

Tham khảo

Qiita DevTool