Login

Chrome DevTools cho frontend: gỡ lỗi HTML, CSS, JavaScript và mạng hiệu quả

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Mọi lập trình viên web đều dành nhiều thời gian trong DevTools, nhưng phần đông chỉ dùng khoảng một phần nhỏ khả năng của nó: mở console xem log, nhấp Inspect xem CSS. Biết dùng tốt vài tab chính giúp bạn tìm lỗi nhanh hơn rất nhiều so với việc đoán mò và thử lại.

Mở DevTools

Nhấn F12, hoặc Ctrl+Shift+I (trên macOS là Cmd+Option+I), hoặc nhấp phải vào trang và chọn Inspect. Các trình duyệt phổ biến như Chrome, Edge và Firefox có bộ công cụ tương tự nhau, tên tab có thể khác đôi chút.

Elements: xem và sửa HTML, CSS trực tiếp

  • Nhấp biểu tượng mũi tên ở góc (hoặc Ctrl+Shift+C) rồi chọn phần tử trên trang để xem nó trong cây DOM.
  • Ở bảng Styles, bạn thấy mọi quy tắc CSS áp dụng, kể cả những quy tắc bị ghi đè (gạch ngang). Có thể bật tắt từng thuộc tính bằng ô tích hoặc gõ giá trị mới để thử ngay.
  • Bảng Computed hiển thị giá trị cuối cùng cùng sơ đồ box model.
  • Nhấp phải phần tử, chọn Force state để thử trạng thái :hover, :focus mà không cần giữ chuột.
  • Với Flexbox và Grid, nhấp vào biểu tượng nhỏ cạnh display để bật lớp phủ trực quan hóa bố cục.

Nhớ rằng thay đổi ở đây không lưu vào file: chúng chỉ tồn tại đến khi bạn tải lại trang. Hãy sao chép giá trị đúng về mã nguồn.

Console: nhiều hơn console.log

console.log('thường');
console.warn('cảnh báo');
console.error('lỗi');
console.table([{ ten: 'A', tuoi: 20 }, { ten: 'B', tuoi: 22 }]);   // bảng dễ đọc
console.group('Nhóm'); console.log('bên trong'); console.groupEnd();
console.time('tai'); /* ... */ console.timeEnd('tai');             // đo thời gian
console.assert(1 + 1 === 3, 'phép tính sai');                    // chỉ in khi sai

Trong console còn có $0 là phần tử đang chọn ở tab Elements, và $$('.card') để chọn nhiều phần tử bằng selector. Khi in object, bạn có thể mở rộng để xem bên trong, nhưng nhớ rằng giá trị hiển thị là trạng thái tại thời điểm bạn mở ra, không phải lúc in. Dùng console.log(JSON.parse(JSON.stringify(obj))) hoặc structuredClone nếu muốn chụp lại giá trị tại thời điểm đó.

Sources: breakpoint thay cho console.log

Thay vì rải log khắp nơi, hãy dừng chương trình đúng chỗ:

  1. Mở tab Sources, tìm file (Ctrl+P để tìm theo tên).
  2. Nhấp vào số dòng để đặt breakpoint. Khi mã chạy tới đó, chương trình tạm dừng.
  3. Xem giá trị biến ở bảng Scope, hoặc rê chuột lên biến trong mã.
  4. Dùng các nút: Resume (chạy tiếp), Step over (qua dòng), Step into (vào hàm), Step out (ra khỏi hàm).
  5. Bảng Call Stack cho biết chuỗi hàm đã dẫn tới đây, rất hữu ích để tìm "ai gọi hàm này".

Một vài loại breakpoint hữu ích: breakpoint có điều kiện (nhấp phải số dòng, nhập biểu thức), breakpoint khi sự kiện xảy ra (Event Listener Breakpoints), và breakpoint khi DOM thay đổi (nhấp phải phần tử, chọn Break on). Câu lệnh debugger; trong mã cũng dừng chương trình khi DevTools đang mở.

Network: xem mọi yêu cầu mạng

  • Liệt kê toàn bộ yêu cầu với mã trạng thái, kích thước, thời gian. Lọc theo loại (Fetch/XHR, JS, CSS, Img).
  • Nhấp một yêu cầu để xem header gửi và nhận, payload, và nội dung phản hồi (tab Response hoặc Preview).
  • Giả lập mạng chậm bằng menu Throttling để thấy trang trải nghiệm ra sao với kết nối yếu.
  • Tích Disable cache (khi DevTools mở) để chắc bạn đang thấy bản mới nhất.
  • Khi có lỗi API, kiểm tra: URL có đúng không, mã trạng thái là gì, payload gửi lên có đúng không, header có thiếu token không, và có lỗi CORS ở preflight không.

Application: lưu trữ trong trình duyệt

Tab này cho bạn xem và sửa localStorage, sessionStorage, cookie, IndexedDB, cache và service worker. Rất tiện khi gỡ lỗi đăng nhập hoặc xóa dữ liệu đã lưu để thử lại từ trạng thái sạch.

Performance và Lighthouse

Tab Performance ghi lại hoạt động của trang để bạn tìm tác vụ JavaScript chạy lâu, hiện tượng vẽ lại nhiều. Tab Lighthouse chạy kiểm tra tổng quát về hiệu năng, khả năng tiếp cận, thực hành tốt và SEO, kèm gợi ý sửa. Chạy ở cửa sổ ẩn danh để tiện ích mở rộng không làm nhiễu kết quả.

Giả lập thiết bị

Nhấp biểu tượng thiết bị (Ctrl+Shift+M) để xem trang ở kích thước điện thoại, máy tính bảng hoặc kích thước tùy chỉnh, giả lập cảm ứng và giảm tốc CPU. Cách này tiện cho việc kiểm tra thiết kế đáp ứng, nhưng vẫn nên thử thêm trên thiết bị thật.

Quy trình gỡ lỗi gợi ý

  1. Tái hiện lỗi ổn định trước khi sửa.
  2. Đọc thông báo lỗi trong console, chú ý file và số dòng.
  3. Thu hẹp phạm vi: lỗi do dữ liệu, CSS, hay logic? Dùng Network để loại trừ dữ liệu, Elements để loại trừ CSS.
  4. Đặt breakpoint và kiểm tra giá trị thực tế thay vì giả định.
  5. Sửa và kiểm tra lại, rồi nghĩ xem có thể viết bài kiểm thử hay thêm kiểm tra để lỗi không tái diễn.

Kết luận

DevTools là công cụ quan trọng nhất của lập trình viên web. Mỗi tab giải quyết một nhóm câu hỏi: Elements cho giao diện, Console cho thông tin nhanh, Sources cho logic, Network cho dữ liệu, Application cho lưu trữ, Lighthouse cho chất lượng. Dành một buổi khám phá từng tab, bạn sẽ tiết kiệm rất nhiều giờ về sau.

Nếu bạn muốn học cách xây dựng và gỡ lỗi ứng dụng web có hướng dẫn từng bước, hãy xem các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment