Khi một nút bấm không phản ứng hay một trang hiện trắng, bằng chứng nằm sẵn trong công cụ nhà phát triển của trình duyệt: lỗi ở console, yêu cầu hỏng ở thẻ mạng, giá trị biến tại điểm dừng. Thu đủ bằng chứng đó rồi mới hỏi AI, câu trả lời sẽ trúng hơn nhiều so với mô tả “bấm nút không được”.
Bài này đi qua bốn khu vực của công cụ nhà phát triển mà người làm giao diện dùng nhiều nhất, cách đọc từng khu vực, loại lỗi đặc trưng như CORS và lỗi chỉ có trên điện thoại, và cách đưa đúng thông tin cho trợ lý AI. Tên menu có thể khác nhau giữa các trình duyệt và phiên bản, nhưng chức năng tương tự nhau.
Console: đọc lỗi đỏ đầu tiên, không phải lỗi cuối
Mở công cụ nhà phát triển bằng phím F12 hoặc chuột phải chọn kiểm tra phần tử, chuyển sang thẻ console. Tải lại trang để bắt lỗi từ đầu. Khi có nhiều lỗi đỏ, lỗi đầu tiên thường là nguyên nhân, các lỗi sau là hệ quả. Ví dụ giả định: một tệp thư viện tải thất bại, sau đó mọi đoạn mã dùng thư viện đó đều báo không xác định. Sửa lỗi sau trước là sửa nhầm chỗ.
Mỗi dòng lỗi có đường dẫn tệp và số dòng ở bên phải. Bấm vào đó để nhảy tới mã nguồn. Nếu tệp là mã đã nén thành một dòng dài, nút định dạng lại trong thẻ nguồn giúp đọc được phần nào, nhưng tốt hơn là có source map để trình duyệt chỉ về tệp gốc.
Đừng bỏ qua các cảnh báo màu vàng. Chúng thường báo những chuyện như dùng tính năng sắp bỏ, nội dung không an toàn trên trang mã hoá, hay chính sách bảo mật chặn một đoạn mã. Một đoạn mã bị chính sách bảo mật nội dung chặn sẽ không chạy mà không có lỗi đỏ nào trong mã của bạn.
Khi dán lỗi cho AI, chép nguyên văn dòng lỗi và các dòng ngăn xếp phía dưới. Nút chuột phải trên dòng lỗi thường có tuỳ chọn sao chép, tốt hơn chụp màn hình.
Thẻ mạng: phần lớn lỗi nằm ở cuộc trò chuyện với máy chủ
Lọc theo loại Fetch/XHR. Để chỉ thấy các yêu cầu do mã JavaScript gửi đi, bỏ qua ảnh và tệp tĩnh. Yêu cầu hỏng thường hiện màu đỏ.
Đọc mã trạng thái. Mã 4xx là phía trình duyệt gửi sai hoặc không có quyền: 400 dữ liệu sai, 401 chưa đăng nhập, 403 không được phép, 404 không tìm thấy, 422 dữ liệu không hợp lệ ở nhiều khung làm việc. Mã 5xx là máy chủ hỏng, lúc đó cần xem nhật ký máy chủ chứ không phải mã giao diện.
Xem cả yêu cầu lẫn phản hồi. Thẻ tiêu đề cho biết địa chỉ, phương thức, tiêu đề gửi đi. Thẻ dữ liệu gửi cho biết thân yêu cầu. Thẻ phản hồi cho biết máy chủ trả về gì. Nhiều lỗi hoá ra là gửi số dưới dạng chuỗi, gửi thiếu trường, hoặc máy chủ trả về trang lỗi HTML trong khi mã đang chờ JSON.
Chép yêu cầu thành lệnh. Trình duyệt cho chép một yêu cầu thành lệnh curl hoặc mã fetch. Rất tiện để tái hiện ngoài trình duyệt hoặc dán cho AI, nhưng lệnh chép ra chứa cả cookie và mã đăng nhập, phải xoá trước khi dán vào bất kỳ đâu.
Giữ nhật ký khi chuyển trang. Bật tuỳ chọn giữ nhật ký để không mất các yêu cầu khi trang tự chuyển sau khi gửi biểu mẫu.
Lỗi CORS: hiểu cơ chế trước khi nhờ sửa
Lỗi CORS là một trong những câu hỏi được dán cho AI nhiều nhất, và cũng là nơi hay nhận về cách sửa sai nhất. Cơ chế cơ bản như sau: khi trang ở một tên miền gọi tới máy chủ ở tên miền khác, trình duyệt chỉ cho mã JavaScript đọc phản hồi nếu máy chủ đó trả về tiêu đề Access-Control-Allow-Origin cho phép nguồn gọi. Với một số loại yêu cầu, trình duyệt còn gửi trước một yêu cầu thăm dò bằng phương thức OPTIONS.
Điều quan trọng nhất cần hiểu: CORS được sửa ở phía máy chủ nhận yêu cầu, không phải ở mã giao diện. Mọi cách sửa ở phía trình duyệt như thêm tiêu đề vào yêu cầu, đổi chế độ no-cors, đều không giải quyết đúng: chế độ no-cors chỉ làm mất lỗi đỏ nhưng mã của bạn cũng không đọc được phản hồi. Nếu AI gợi ý những cách đó, hỏi lại.
Cách sửa đúng là cấu hình máy chủ trả về tiêu đề cho phép đúng tên miền cần thiết. Tránh cho phép mọi nguồn bằng dấu sao, nhất là khi yêu cầu có gửi kèm cookie hay thông tin đăng nhập; trường hợp đó trình duyệt cũng không chấp nhận dấu sao. Nếu máy chủ không phải của bạn, có thể cần gọi qua máy chủ của chính mình thay vì gọi thẳng từ trình duyệt.
Khi hỏi AI, đưa cho nó dòng lỗi CORS nguyên văn, tiêu đề phản hồi của cả yêu cầu thăm dò lẫn yêu cầu chính từ thẻ mạng, và cho biết máy chủ dùng ngôn ngữ, khung làm việc gì. Câu hỏi đúng là “cấu hình máy chủ này thế nào để cho phép đúng nguồn kia”.
Dùng điểm dừng thay vì rải console.log
Thêm console.log rồi tải lại là cách quen, nhưng với lỗi logic phức tạp, điểm dừng nhanh hơn nhiều vì bạn xem được mọi biến tại đúng thời điểm mà không cần đoán trước biến nào cần in.
- Mở thẻ nguồn, tìm tệp và bấm vào số dòng muốn dừng. Một chấm đánh dấu hiện ra.
- Thực hiện thao tác gây lỗi. Mã dừng tại dòng đó, bảng bên phải hiện giá trị các biến trong phạm vi và ngăn xếp lời gọi.
- Dùng các nút bước qua, bước vào, bước ra để đi từng dòng, xem giá trị biến thay đổi thế nào.
- Với lỗi chỉ xảy ra ở một điều kiện, đặt điểm dừng có điều kiện bằng chuột phải lên số dòng, nhập biểu thức như ma_don bằng giá trị cụ thể.
- Bật tuỳ chọn dừng khi có ngoại lệ để mã tự dừng ngay chỗ ném lỗi, kể cả lỗi bị bắt lại.
- Ghi lại giá trị bất thường, chép vào câu hỏi cho AI kèm đoạn mã.
Có thể đặt lệnh debugger ngay trong mã để dừng tại đó khi công cụ nhà phát triển đang mở. Nhớ gỡ trước khi commit, cũng như các console.log tạm.
Lỗi chỉ xảy ra trên điện thoại
Nhiều lỗi giao diện chỉ hiện trên điện thoại thật, nhất là Safari trên iPhone. Chế độ giả lập trong trình duyệt máy tính chỉ đổi kích cỡ và chuỗi nhận dạng, không đổi bộ máy chạy mã.
- Gỡ lỗi từ xa: Safari trên máy Mac nối được với iPhone qua cáp để mở công cụ nhà phát triển cho trang đang chạy trên điện thoại, Chrome trên máy tính làm được tương tự với điện thoại Android. Cần bật tuỳ chọn tương ứng trong cài đặt của điện thoại, các bước cụ thể nên kiểm trong tài liệu hiện hành.
- Không có máy Mac thì thêm một khung nhỏ trên trang thử để hiện lỗi JavaScript bắt được qua sự kiện error của cửa sổ, chỉ bật ở bản thử nghiệm.
- Lỗi hay gặp trên điện thoại: tính năng chưa được hỗ trợ ở bản trình duyệt cũ, biểu mẫu hành xử khác, bộ nhớ đệm giữ tệp JavaScript cũ rất lâu, ảnh định dạng lạ không đọc được.
- Khi hỏi AI, ghi rõ loại máy, hệ điều hành và trình duyệt, kèm lỗi lấy được từ gỡ lỗi từ xa.
Chuyện bộ nhớ đệm đáng chú ý riêng: sửa xong mà điện thoại vẫn chạy bản cũ là tình huống quen. Thêm tham số phiên bản vào đường dẫn tệp tĩnh mỗi khi sửa giúp trình duyệt tải bản mới thay vì dùng bản đã lưu.
Lỗi hay gặp trong mã giao diện do AI viết
Mã JavaScript AI viết cho giao diện thường chạy đúng trong ví dụ riêng lẻ, rồi hỏng khi ghép vào trang thật. Những kiểu dưới đây đáng kiểm trước tiên khi đoạn mã mới thêm không chạy.
- Mã chạy trước khi trang dựng xong phần tử cần dùng, nên tìm phần tử trả về rỗng. Kiểm vị trí đặt thẻ script, thuộc tính defer, hoặc việc chờ sự kiện trang tải xong.
- Bộ chọn phần tử không khớp trang thật: AI đoán tên lớp, tên mã định danh theo ví dụ của nó chứ không theo trang của bạn.
- Gắn trình xử lý sự kiện nhiều lần, ví dụ mỗi lần tải lại một phần trang lại gắn thêm, khiến một cú bấm gửi hai ba yêu cầu.
- Dùng cú pháp hay hàm mà trình duyệt cũ của một phần khách hàng chưa hỗ trợ.
- Trộn hai kiểu viết khác nhau trong cùng dự án, chẳng hạn mô-đun và tệp thường, khiến biến không nhìn thấy nhau.
Khi dán cho AI, kèm đoạn HTML thật của phần trang liên quan, không chỉ đoạn JavaScript. Phần lớn các lỗi trên chỉ lộ ra khi đặt mã cạnh cấu trúc trang thật, và AI sẽ chỉ ra chỗ lệch nhanh hơn nhiều khi thấy cả hai.
Gói bằng chứng cho AI theo từng triệu chứng
Bảng dưới gợi ý nên thu gì trước khi hỏi, tuỳ theo triệu chứng bạn thấy.
| Triệu chứng | Thu gì từ công cụ nhà phát triển | Câu hỏi gợi ý |
|---|---|---|
| Trang trắng, không hiện gì | Lỗi đỏ đầu tiên trong console, danh sách tệp tải hỏng ở thẻ mạng | Lỗi này làm dừng việc dựng trang ở đâu |
| Nút bấm không phản ứng | Console khi bấm, điểm dừng ở hàm xử lý sự kiện | Vì sao hàm xử lý không được gọi hoặc dừng giữa chừng |
| Dữ liệu không lưu | Yêu cầu gửi đi và phản hồi ở thẻ mạng, đã xoá mã đăng nhập | Yêu cầu và phản hồi này cho thấy lỗi ở phía nào |
| Lỗi CORS | Dòng lỗi, tiêu đề của yêu cầu thăm dò và yêu cầu chính | Cấu hình máy chủ thế nào cho đúng nguồn |
| Chỉ hỏng trên iPhone | Lỗi từ gỡ lỗi từ xa, phiên bản hệ điều hành | Tính năng nào trong mã có thể chưa được hỗ trợ ở bản này |
Với mọi dòng trong bảng, nhớ xoá cookie, mã đăng nhập, khoá và dữ liệu cá nhân trong yêu cầu hay phản hồi trước khi dán. Thẻ mạng hiển thị mọi thứ trình duyệt gửi đi, kể cả những thứ bạn không để ý.
Câu hỏi thường gặp
Console không có lỗi gì mà trang vẫn sai thì làm sao?
Lỗi logic thường không sinh lỗi đỏ. Dùng thẻ mạng xem dữ liệu máy chủ trả về có đúng không, rồi đặt điểm dừng ở chỗ dữ liệu được hiển thị để xem giá trị thực tế. Cũng kiểm cảnh báo vàng và chính sách bảo mật nội dung có chặn đoạn mã nào không.
Có nên dùng chế độ no-cors để hết lỗi CORS không?
Không. Chế độ đó làm mất thông báo lỗi nhưng mã cũng không đọc được nội dung phản hồi, nên tính năng vẫn hỏng. CORS phải được cấu hình ở máy chủ nhận yêu cầu, cho phép đúng tên miền cần gọi.
Chép yêu cầu thành lệnh curl rồi dán cho AI có an toàn không?
Chỉ an toàn sau khi xoá cookie, tiêu đề xác thực, mã đăng nhập và dữ liệu cá nhân trong lệnh. Lệnh chép ra từ trình duyệt chứa đủ thông tin để người khác đăng nhập dưới danh nghĩa bạn.
Vì sao sửa xong mà điện thoại vẫn chạy mã cũ?
Thường do bộ nhớ đệm của trình duyệt hoặc của ứng dụng web cài trên màn hình chính giữ tệp cũ. Thêm tham số phiên bản vào đường dẫn tệp tĩnh mỗi lần sửa, và với ứng dụng web có service worker thì kiểm chiến lược lưu đệm của nó.
Điểm dừng và console.log, nên dùng cái nào?
Console.log nhanh cho câu hỏi đơn giản như hàm có được gọi không. Điểm dừng tốt hơn cho lỗi logic, vì bạn xem được mọi biến và đi từng dòng mà không phải đoán trước cần in gì. Cả hai đều phải gỡ trước khi commit nếu là thêm tạm.
AI có đọc được ảnh chụp công cụ nhà phát triển không?
Nhiều trợ lý đọc được ảnh, nhưng chép chữ vẫn tốt hơn: chính xác hơn, không bị cắt mất phần ngoài khung, và bạn kiểm soát được mình đang gửi gì. Ảnh chụp thẻ mạng rất dễ lộ cookie hay địa chỉ nội bộ.