Khi nó hỏng — đọc lỗi và chữa

Bảy lỗi chiếm 90% sự cố của người mới, cách đọc Console, và quy tắc vàng khi đưa lỗi cho AI.

Năng lực phân biệt người làm được với người bỏ cuộc không phải là viết đúng ngay, mà là sửa được khi sai. Bài này cho bạn đúng cái đó ở mức Cấp 1.

Chỗ duy nhất cần nhìn: Console

Trang trắng, nút không bấm được, dữ liệu không hiện — 9 trên 10 lần, câu trả lời đã nằm sẵn ở đó, bằng chữ.

Mở: bấm F12 (hoặc Ctrl+Shift+I) → tab Console. Trên điện thoại thì khó hơn, nên luôn thử trên máy tính trước.

Bạn chỉ cần quan tâm chữ đỏ. Chữ vàng (cảnh báo) bỏ qua ở cấp này. Mỗi dòng đỏ có 3 phần:

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at luuDon (index.html:214)

Chỉ cần đọc được số dòng, bạn đã hơn phần lớn người mới: họ báo "web hỏng rồi" và không mở Console.

Bảy lỗi chiếm 90% sự cố

1. Cannot read properties of null

Nghĩa: JS tìm một phần tử trên trang mà không thấy. Thường vì: gõ sai id, hoặc <script> chạy trước khi HTML kịp dựng. Chữa: đưa <script> xuống cuối, ngay trước </body>. Hoặc kiểm lại tên id (donHang ≠ donhang — JS phân biệt chữ hoa).

2. is not a function / is not defined

Nghĩa: gọi một hàm/biến chưa có. Thường vì: gõ sai tên, hoặc hàm được định nghĩa trong một file chưa được nạp. Chữa: Ctrl+F tìm đúng tên đó trong file — nếu chỉ thấy 1 lần (chỗ gọi) mà không thấy chỗ khai báo, là lỗi gõ sai tên.

3. Chữ tiếng Việt thành á, “, hoặc ô vuông

Nghĩa: sai bảng mã. Chữa: <meta charset="utf-8"> phải là dòng đầu trong <head>. Và khi lưu file trong VS Code, góc dưới phải phải ghi UTF-8 (bấm vào đó đổi được).

4. Trên điện thoại chữ bé xíu, phải phóng to

Nghĩa: thiếu khai báo khung nhìn. Chữa: thêm <meta name="viewport" content="width=device-width,initial-scale=1">.

5. Trang cuộn ngang trên điện thoại

Nghĩa: có phần tử rộng hơn màn hình. Thường vì: một bảng, một ảnh, hoặc một chiều rộng cố định kiểu width:600px. Chữa nhanh: dán vào Console để tìm thủ phạm:

[...document.querySelectorAll('*')]
  .filter(e => e.getBoundingClientRect().right > innerWidth + 1)
  .map(e => e.tagName + '.' + e.className)

Nó in ra đúng tên phần tử đang chọc ra ngoài. Mẹo này tiết kiệm rất nhiều thời gian mò.

6. Sửa rồi deploy rồi mà vẫn thấy bản cũ

Nghĩa: bộ nhớ đệm — của trình duyệt bạn, không phải lỗi deploy. Chữa: Ctrl+Shift+R (tải lại bỏ qua đệm), hoặc mở cửa sổ ẩn danh. Vẫn cũ thì kiểm bạn có đang mở link preview cũ không (xem bài trước).

7. Trang trắng hoàn toàn, Console cũng trống

Nghĩa: HTML vỡ cấu trúc — thường thiếu một thẻ đóng, hoặc một dấu > bị mất. Chữa: bấm Ctrl+U xem mã nguồn; VS Code sẽ gạch đỏ chỗ thẻ chưa đóng. Hoặc dán file cho AI với đề: "File này không hiện gì. Tìm thẻ HTML chưa đóng hoặc cú pháp vỡ. Chỉ nói chỗ sai, đừng viết lại file."

Quy tắc vàng khi đưa lỗi cho AI

Đưa chứng cứ, không đưa cảm nhận.

Sai: "Web tôi bị lỗi, bạn sửa giúp." AI sẽ đoán, sửa lung tung, thường làm vỡ thêm.

Đúng: bốn mục, theo mẫu này:

1. TÔI LÀM GÌ: mở trang, nhập "Nguyễn Văn A" vào ô Tên, bấm Lưu.
2. TÔI MONG: dòng mới hiện trong bảng bên dưới.
3. THỰC TẾ: không có gì xảy ra, bảng không đổi.
4. CONSOLE báo nguyên văn:
   Uncaught TypeError: Cannot read properties of null (reading 'value')
       at luuDon (index.html:214)

Trước khi sửa, nói nguyên nhân gốc trong 2 dòng.
Rồi sửa ở chỗ nhỏ nhất có thể, đừng tái cấu trúc.
Xong rồi nói tôi phải bấm thử gì để biết đã hết.

Mục 4 là mục quyết định. Sao nguyên văn, đừng diễn giải lại — "nó báo lỗi gì gì về null" làm mất đúng cái thông tin cần (số dòng).

Khi AI sửa mà càng sửa càng hỏng

Có lúc bạn vào vòng xoáy: nó sửa, hỏng chỗ khác, nó sửa tiếp, hỏng thêm. Sau 3 lượt thì dừng lại, đây là quy trình thoát:

1. Dừng (Esc), đừng hỏi lượt thứ tư.
2. Về trạng thái lành. Ctrl+Z nhiều lần trong VS Code, hoặc git checkout -- . nếu đã có Git. (Đây là lúc bạn thấy vì sao Cấp 2 gấp.)
3. /clear, bắt đầu phiên mới sạch.
4. Ra đề lại, lần này nhỏ hơn một bậc: thay vì "sửa chức năng lưu", hỏi "vì sao document.getElementById('ten') trả về null ở dòng 214?"

Nguyên tắc: ba lượt không xong thì vấn đề không nằm ở chỗ bạn nghĩ. Đổi câu hỏi, đừng đổi cách nói.

Trang /lien-he hiện trắng. Hãy tự điều tra:
1. curl trang đó xem trả về mã gì và HTML có đủ không
2. đọc file nguồn tương ứng
3. nói nguyên nhân gốc trước, chưa sửa

Chỉ đọc và chạy lệnh đọc, chưa được sửa file nào.