<aside> 💡 Debug code JS

</aside>

1. Kiến thức cơ bản

Debug Chrome DevTool.pptx

Debugging trong JavaScript

2. Các tab và chức năng cần nhớ

• Console: Log, Thay đổi giá trị biến, hàm,…
• Element: Dùng để inspect đọc và sửa html, css dễ dàng. Vẽ giao diện UI rất nhanh
• Source: Theo dõi source code, debug JS.
  • Phím tắt tìm 1 file trong source: Ctrl + P
  • Phím tắt nhảy đến 1 dòng code: Ctrl + G, Tìm theo từ khóa: Ctrl + F
  • Breakpoints: danh sách các breakpoints, click vào để nhảy đến dòng debug đó
  • Call Stack: theo dõi lịch sử gọi hàm. Xem hàm nào gọi đến dòng code hiện tại
  • Scope: Xem giá trị các biến liên quan đến dòng hiện tại
  • Watch: Thêm 1 biến vào watch để theo dõi giá trị của biến đó khi chương trình đang debug
  • Edit Breakpoint(right-mouse > edit breakpoint): cho phép thêm điều kiện để: chỉ khi nào điều kiện đó được thỏa mãn, breakpoint mới được kích hoạt
  • EventListener: theo dõi các event có thể có của element hiện tại.
• Network: Theo dõi các request đến và đi
• Application: xem, gán giá trị các đối tượng session, local storage, cookies,…