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

• Kéo thả các Element
• Reference đến element đang chọn trong console
• 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
• screenshot một element
• Tìm element sử dụng CSS selectors
• Shift-Enter trong console
• Clear console
• Go to như trong sumblime text hay VSCode
• Watch Expression
• XHR/Fetch debugging
• Debug khi DOM bị thay đổi

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

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)

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

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

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

Tìm element sử dụng CSS selectors

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

Shift-Enter trong console

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

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

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