Quy trình lặp lại được để debug lỗi front-end

Phần lớn lỗi front-end không hề bí ẩn. Chúng có vẻ bí ẩn vì ta bắt đầu sửa mã trước khi biết trình duyệt thực sự đã làm gì. Một quy trình lặp lại được, từ kiểm tra kết quả đang chạy cho đến cô lập một trường hợp tối thiểu, tiết kiệm nhiều thời gian hơn bất kỳ mẹo thông minh đơn lẻ nào. Đây là trình tự chúng tôi gợi ý, cùng với một vài bổ sung gần đây của DevTools giúp một số bước dễ hơn.

1. Nhìn vào DOM, không phải mã nguồn

View Source cho thấy tệp đúng như server đã gửi. Bảng Elements cho thấy DOM mà trình duyệt đã dựng, và hai thứ này có thể khác nhau. Trình duyệt tự sửa markup bị lỗi, nên một thẻ heading không khớp sẽ được chỉnh lại âm thầm, và bất kỳ script nào chỉnh sửa trang cũng thay đổi DOM mà không động đến mã nguồn. Khi có thứ gì đó hiển thị lạ, hãy kiểm tra phần tử trước và xác nhận rằng cấu trúc bạn nghĩ mình đã viết đúng là cấu trúc đang tồn tại.

2. Đọc bảng Styles như một bản báo cáo

DevTools cho bạn biết rất nhiều về việc vì sao một quy tắc có hoặc không được áp dụng. Hướng dẫn về CSS issues của Chrome mô tả ba nhóm:

Invalid (không hợp lệ): thuộc tính hoặc giá trị không được nhận diện, nên bị gạch ngang kèm cảnh báo.
Overridden (bị ghi đè): một khai báo hợp lệ thua một khai báo khác trong cascade, và bị gạch ngang.
Inactive (không hoạt động): một khai báo hợp lệ nhưng không có tác dụng vì một thuộc tính khác, hiển thị mờ kèm biểu tượng thông tin. Ví dụ kinh điển là justify-content trên phần tử có display là block.

Rê chuột lên biểu tượng thông tin và DevTools sẽ giải thích cần đổi gì. Mở rộng các shorthand, như margin, cũng lộ ra một longhand được đặt sau đó ghi đè một phần của nó. Bản DevTools mới nhất đi thêm một bước: bảng Elements giờ giữ các style inactive hiển thị với một dấu hiệu riêng, có thiết lập để hiện hoặc thu gọn chúng, hữu ích khi một style ngừng được áp dụng và bạn muốn xem nó từng là gì.

3. Bật tắt trước khi chỉnh sửa

Bỏ chọn từng khai báo một để có ngay phép so sánh trước và sau. Nếu tắt overflow: hidden khiến một dropdown xuất hiện lại, bạn đã xác định được nguyên nhân chỉ trong vài giây. Hãy chỉnh giá trị trực tiếp trong bảng, và chỉ chép thay đổi cuối cùng về stylesheet của bạn.

4. Kiểm tra specificity và box model

Khi một quy tắc dường như bị bỏ qua, thường là một selector cụ thể hơn đang thắng. Cách sửa là cố ý đặt specificity ngang bằng hoặc thấp hơn, chứ không phải với tay đến !important.

/* Specificity: one element */
a { color: gray; }

/* Specificity: one class, so this wins */
.nav a { color: navy; }

/* Better than !important: make the intent explicit */
.nav .nav-link { color: navy; }

Với những bất ngờ về kích thước, hãy mở layout view. Mặc định width của một phần tử chỉ bao gồm nội dung của nó, nên padding và border được cộng thêm vào; đặt box-sizing: border-box khiến width bao gồm cả chúng.

5. Loại trừ các nguyên nhân tẻ nhạt

Danh sách kiểm tra debug của MDN đặt một vài bước không hào nhoáng theo thứ tự hợp lý: nghỉ ngắn một chút, validate HTML và CSS, xác nhận rằng thuộc tính hoặc giá trị được hỗ trợ trong trình duyệt bạn đang kiểm thử, và tìm các phần ghi đè. Giá trị không được hỗ trợ bị bỏ qua mà không có thông báo lỗi nào, nên liếc nhanh một bảng tương thích có thể tiết kiệm cả giờ. Kiểm thử trên trình duyệt thứ hai cũng giúp phân biệt lỗi thật với một đặc điểm riêng của trình duyệt.

6. Dựng một test case rút gọn

Nếu nguyên nhân vẫn chưa rõ, hãy bắt đầu loại bỏ dần. Dựng lại markup dưới dạng HTML tĩnh, xóa JavaScript và xem vấn đề còn không, rồi gọt HTML và CSS cho đến khi chỉ còn phần tối thiểu tái hiện được lỗi. Việc này thường để lộ câu trả lời ngay trong quá trình, và nếu không thì bạn đã có thứ đủ nhỏ để chia sẻ với đồng nghiệp hoặc đính kèm vào báo cáo lỗi.

<!-- reduced.html: nothing but what reproduces the bug -->
<style>
  .wrap { display: flex; }
  .item { flex: 1 1 200px; min-width: 0; }
</style>
<div class="wrap">
  <div class="item">Short</div>
  <div class="item">A very long unbroken string ...</div>
</div>

Những công cụ mới đáng biết

Bài đăng DevTools tháng 10 năm 2026 của Chrome, được xuất bản vào tháng 9, bổ sung một số thứ liên quan đến debug:

Network: bạn có thể chỉnh sửa và gửi lại một request dưới dạng lệnh gọi fetch(), được điền sẵn trong Console, tiện để phát lại một lệnh gọi API đang lỗi với tham số đã chỉnh. Local override giờ từ chối path traversal và các scheme không phải HTTP.
Memory: heap snapshot có thể được lọc theo retained size tối thiểu, ẩn các giá trị nguyên thủy, và có thể tìm đối tượng theo tên thuộc tính, giúp săn tìm memory leak nhanh hơn.
Performance: soft navigation được bao gồm trong chế độ xem thống kê, và CPU performance override cho phép các bài kiểm thử có throttle lặp lại ổn định hơn.
Device mode: các preset được nhóm thành mobile, foldable, tablet và desktop, và danh sách thiết bị đã được làm mới.

Bài đăng cũng đề cập đến công cụ agent và MCP cho DevTools, nằm ngoài phạm vi của bài viết này.

Ghi lại nguyên nhân

Khi đã sửa xong, hãy thêm một comment ngắn hoặc commit message giải thích vì sao cần thay đổi. Chính bạn trong tương lai sẽ gặp lại đúng đặc điểm lạ đó. Nếu đội của bạn muốn giao việc điều tra cho người khác, dịch vụ của chúng tôi bao gồm debug và cứu hộ cho các site và theme hiện có.