Một vài tip sử dụng Chrome Dev Tools

Kéo thả các Element

Bên trong tab Elements có thể kéo các element HTML và thả nó vào vị trí mới

Kéo thả các Element

Reference đến element đang chọn trong console

Để reference đến 1 element đang được chọn, gõ $0, nếu đang load jquery thì có thể dùng $($0)

Reference đến element đang chọn trong console

Gọi lại giá trị tính toán lần trước trong console

$_ để gọi lại giá trị tính toán lần trước

3 + 4
// = 7
$_ * 2
// = 14

Gọi lại giá trị tính toán lần trước trong console

Xác định đoạn CSS được định nghĩa ở đâu

cmd-click (ctrl-click trong windows) vào property CSS trong tab Elements để nhảy ngay tới chổ định nghĩa

Xác định đoạn CSS được định nghĩa ở đâu

screenshot một element

Chọn element + nhấn cmd+shift+p (ctrl+shift+p trong windows) để mở menu Command và chọn Capture node screenshot

screenshot một element

Tìm element sử dụng CSS selectors

ctrl+f (cmd+f trong Mac) mở ô search, gõ đoạn css selector ở đây

Tìm element sử dụng CSS selectors

Shift-Enter trong console

Để gõ đoạn code trên nhiều dòng trong console, ấn phím shift-enter

Shift-Enter trong console

Clear console

Để clear console thường ta sẽ nhấn nút Clear ở trên cùng, hoặc bằng gõ ctrl+l (cmd+k)

Go to như trong sumblime text hay VSCode

Trong tab Source

  • ctrl+o (cmd+o) để hiển thị tất cả file đang load
  • ctrl+shift+o (cmd+shift+o) để hiển thị biểu tượng property, function hay là class trong file hiện tại
  • ctrl+g để nhảy đến dòng

Watch Expression

Thay vì phải viết đi viết lại biến hoặc expression trong lúc debug, thêm nó vào trong Watch Expression

Watch Expression

XHR/Fetch debugging

Chỉ định khi nào dừng nếu send đi một XHR/Fetch request trong XHR/Fetch breakpoint panel

Debug khi DOM bị thay đổi

Right click vào element -> chọn enable Break on Subtree Modifications, khi có đoạn script nào thay đổi element, debugger sẽ stop ngay lập tức

Debug khi DOM bị thay đổi