Skip to main content

Cách sử dụng dev tools để debug

Browser Devtool là gì?​

Chrome Devtools là một công cụ hỗ trợ đắc lực nếu không muốn nói là thần thánh dành cho các developers. Trong quá trình, phát triển phần mềm các developer phải hoàn toàn làm chủ được Browser Devtools

Tương tự với vị trí của Technical Support, Browser Devtools là một bộ công cụ không thể thiếu nếu các bạn muốn giải quyết và tìm ra vấn đề cho khách 1 cách nhanh chóng và chuyên nghiệp. Một khi master được Browser Devtools, bạn sẽ cảm thấy rằng không có vấn đề nào mà mình không thể giải đáp được.

Browser Devtools có những tính năng gì?​

Đến đây, mình mặc định là bạn đã biết cách mở Browser Devtool bằng Inspect trên website hoặc sử dụng phím F12 để truy cập nhanh. Mở trang Devtools lên, bạn có thể thây 5 tabs dưới đây cũng là 5 tab quan trọng nhất của Browser Devtools:

  • Elements: Bạn có thể inspect Element, debug element attributes, xem CSS, JS events, etc
  • Console: Bạn có thể xem danh sách Error, danh sách log của trình duyệt ở trên tab này. Bên cạnh đó bạn có thể viết code JS ở ngay đây.
  • Sources: Tab này bạn có thể dùng để browse source code các file JS chạy ở trên trang web lúc đó với tổ hợp phím Ctrl + P. Sau đó bạn có thể đặt điểm debug cho code.
  • Network: Nơi bạn có thể tìm kiểu mọi request, file assets, ảnh, được load trên website. Bạn có thể trace nguồn gốc của các request HTTP. Tìm hiểu tốc độ load trang của website, và rất nhiều nữa.
  • Application: Ở đây chưa thông tin về cookie, local storage và các bộ nhớ khác của website.

Vì Devtools có rất nhiều tính năng, nên mình sẽ chia nhỏ ra thành từng section nhỏ focus vào từng tab trên để các bạn có thể hiểu rõ nhất về Browser Devtools.

Element tab​

Element tab là nơi có lẽ các bạn Technical Support sẽ dùng nhiều nhất nhưng các bạn lại chưa hiểu hết tính năng của nó nhiều nhất. Nên trong phần này, mình sẽ tập trung giải thích tất cả tính năng hữu ích nhất của Tab element để các bạn có thể vận dụng tối đa kiến thức từ phần này để ứng dụng vào giải quyết công việc.

HTML, CSS inspect với Element Tab​

Trước tiên, bàn sẽ cần biết làm sao để inspect Element tabs và thử sửa, thay đổi CSS, style của các thẻ tạm thời:


Sử dụng Event Listener, Break on, biến $0 để debug​

Phần trước các bạn mới tìm hiểu phần Element > Styles tức 1 subtab nhỏ trong tab Elements. Ở phần này mình sẽ tìm hiểu xem ngoài subtab Styles chúng ta còn có những subtab nào

Trong video dưới đây, mình sẽ giới thiệu cho các bạn về các subtab khác của tab Elements. Từ đó, tập trung chính vào 2 tính năng Event Listener và Break on


Console tab​

Sau khi tìm hiểu cơ bản về tab Elements, cùng đến với tab Console, nơi mà những error xuất hiện nhiều nhất. Ở tab console, bạn có thể

  • Xem các Error, log message xuất hiện trên trang
  • Chạy thử các đoạn code JS
  • Log biến trong debugger

Mọi người xem video này để được giới thiệu về Console tab nhé:


Sources tab​

Với source tab, sẽ gắn liền với việc Debug với Resource Override, các bạn nên xem qua video ở phần Sử dụng Resource Override để debug code Ở phần này sẽ có video hướng dẫn các bạn sử dụng tab sources khá thực tế.

Còn ở phần này, mình sẽ nói những điều mà phần video Resource Override không nói:


Network tab​

Tiếp đến, 1 tab quan trọng không kém đó là tab Network. Vì tab này khá nhiều kiến thức, mình sẽ chia nhỏ các phần ra để các bạn dễ dàng theo dõi

Các thông tin hiển thị trên tab Network​

Phần này mình sẽ cùng đi xem tab Network hiện ra những thông tin gì. Những ít trên tab Network có thể làm gì?


Có thể làm gì với từng request?​

Mỗi request, khi click vào, sẽ mở ra 1 loạt sub tabs, phần này mình sẽ cùng phân tích xem các subtab này có gì và giúp ích được gì cho Technical Support


Block request với tab network và Resource Override​


Application tab​

Đối với Application Tab, sẽ chủ yếu chứa Cookie, local storage. Tab này khá đơn giản, các bạn có thể tự tìm hiểu nhé.