Gỡ lỗi HTML

Gỡ lỗi không đáng sợ

Khi viết mã, mọi thứ đều ổn, cho đến khoảnh khắc đáng sợ khi xảy ra lỗi — bạn đã làm gì đó sai, vì vậy mã của bạn không hoạt động — hoặc là không hoạt động chút nào, hoặc không hoạt động đúng như bạn muốn. Ví dụ, phần sau đây hiển thị lỗi được báo cáo khi cố gắng compile một chương trình đơn giản được viết bằng ngôn ngữ Rust.

Ở đây, thông báo lỗi tương đối dễ hiểu — "unterminated double quote string" (chuỗi ngoặc kép chưa đóng). Nếu bạn nhìn vào danh sách, bạn có thể thấy rõ tại sao println!(Hello, world!"); có thể bị thiếu một dấu ngoặc kép. Tuy nhiên, các thông báo lỗi có thể nhanh chóng trở nên phức tạp hơn và khó hiểu hơn khi các chương trình trở nên lớn hơn, và ngay cả các trường hợp đơn giản cũng có thể trông hơi đáng sợ với người không biết gì về Rust.

Tuy nhiên, gỡ lỗi không nhất thiết phải đáng sợ — chìa khóa để thoải mái với việc viết và gỡ lỗi bất kỳ mã nào là sự quen thuộc với cả ngôn ngữ lẫn các công cụ liên quan.

HTML và gỡ lỗi

HTML không phức tạp để hiểu như Rust. HTML không được biên dịch sang dạng khác trước khi phân tích cú pháp (nó được diễn giải, không phải biên dịch). Và cú pháp element của HTML được cho là dễ hiểu hơn nhiều so với "ngôn ngữ lập trình thực sự" như Rust, JavaScript, hoặc Python.

Cách các trình duyệt phân tích cú pháp HTML linh hoạt hơn nhiều so với cách hầu hết các ngôn ngữ lập trình được phân tích cú pháp, điều này vừa là điều tốt vừa là điều xấu.

Nhưng trước hết, chúng ta có nghĩa là gì khi nói linh hoạt? Nhìn chung, khi bạn làm gì đó sai trong mã, có hai loại lỗi chính mà bạn sẽ gặp phải:

• Lỗi cú pháp: Đây là lỗi đánh máy trong mã khiến chương trình không chạy, giống như lỗi Rust được hiển thị trước đó. Những lỗi này thường dễ sửa miễn là bạn quen thuộc với cú pháp của ngôn ngữ và biết thông báo lỗi có nghĩa là gì.
• Lỗi logic: Đây là những lỗi mà cú pháp thực sự đúng, nhưng mã không thực hiện những gì bạn muốn, có nghĩa là chương trình chạy không chính xác. Những lỗi này thường khó sửa hơn lỗi cú pháp, vì không có thông báo lỗi nào hướng dẫn bạn đến nguồn gốc của lỗi.

Bản thân HTML không bị lỗi cú pháp vì các trình duyệt phân tích cú pháp nó một cách linh hoạt, có nghĩa là trang vẫn hiển thị ngay cả khi có lỗi cú pháp trong mã nguồn. Các trình duyệt có các quy tắc được tích hợp sẵn để mô tả cách diễn giải đánh dấu HTML được viết không chính xác (thường được gọi là đánh dấu không hợp lệ hoặc không có cấu trúc tốt), tự động chuyển đổi nó thành một số đánh dấu hợp lệ.

Ví dụ, đoạn HTML sau chứa các phần tử được lồng không chính xác:

<p>I didn't expect to find the <em>next-door neighbor's <strong>cat</em></strong> here!</p>

Thẻ đóng </strong> phải đứng trước thẻ đóng </em>, nhưng không phải như vậy — nó đứng sau thẻ đóng </em>.

Nếu bạn tải HTML này vào trình duyệt rồi nhìn vào DOM được hiển thị, bạn sẽ thấy rằng việc lồng đã được trình duyệt sửa:

<p>
  I didn't expect to find the
  <em>next-door neighbor's <strong>cat</strong></em> here!
</p>

Vậy tại sao điều này vừa tốt vừa xấu? Trong trường hợp này, trình duyệt đã tạo ra kết quả mong muốn, nhưng như bạn sẽ thấy ở phần sau, điều này không phải lúc nào cũng xảy ra như vậy. Bạn luôn nhận được thứ gì đó đang chạy, nhưng trình duyệt không phải lúc nào cũng làm đúng, điều này có thể gây ra vấn đề. Tốt hơn là viết đánh dấu chính xác ngay từ đầu.

Vậy làm thế nào để bạn tìm lỗi đánh dấu? Sau này, chúng tôi sẽ chỉ cho bạn cách tìm lỗi trong HTML bằng công cụ gọi là trình xác thực HTML, nhưng trước tiên chúng tôi sẽ chỉ cho bạn cách kiểm tra HTML của mình thủ công bằng trình kiểm tra DOM, và sau đó khám phá những loại lỗi đánh dấu bạn có thể đang tìm kiếm, và cách trình duyệt có thể diễn giải những lỗi đó.

Sử dụng trình kiểm tra DOM

Tất cả các trình duyệt hiện đại đều có một bộ công cụ dành cho nhà phát triển (devtools) được tích hợp vào chúng, cung cấp một bộ chức năng để kiểm tra trang web được tải trong tab hiện tại. Những công cụ này có thể hiển thị cho bạn HTML nào được hiển thị trong trang, CSS nào được áp dụng cho mỗi nút DOM, JavaScript nào đang chạy trong trang, và nhiều hơn nữa. Chúng cũng cho phép bạn chỉnh sửa mã đang chạy và xem hiệu ứng trực tiếp trên trang.

Bạn có thể mở devtools theo cách tương tự trong mỗi trình duyệt — xem Cách mở devtools trong trình duyệt của bạn để tìm hiểu cách thực hiện.

Đối với bài viết này, chức năng devtools duy nhất liên quan là trình kiểm tra DOM, hiển thị DOM HTML hiện đang được hiển thị và cho phép bạn chỉnh sửa nó. Hãy xem xét điều này ngay bây giờ:

1. Mở devtools trong trình duyệt của bạn.
2. Mở trình kiểm tra DOM. Nó ở cùng một nơi trong mỗi trình duyệt — tab đầu tiên trong devtools ở đầu hàng. Trong Firefox nó được gán nhãn Inspector, trong khi trong Safari, Edge và Chrome nó được gán nhãn Elements. Tab này sẽ được chọn theo mặc định khi bạn lần đầu mở devtools, nhưng hãy chọn nó nếu không phải như vậy.
3. Kiểm tra cấu trúc cây DOM được hiển thị trong tab, và lưu ý cách bạn có thể nhấp vào các mũi tên mở rộng nhỏ ở đầu mỗi nút DOM để mở rộng và thu gọn chúng và tiết lộ các nút con của chúng. Bạn cũng có thể sử dụng phím mũi tên lên và xuống để di chuyển lên và xuống các nút, và phím mũi tên phải và trái để mở rộng và thu gọn các nút.
4. Cũng hãy thử di chuột qua các nút (hoặc chọn chúng bằng phím mũi tên) và lưu ý cách phần tử hiện đang di chuột qua (hoặc được chọn) được làm nổi bật trong khung nhìn.
5. Bạn cũng có thể chỉnh sửa DOM được hiển thị. Chúng tôi sẽ không sử dụng chức năng chỉnh sửa trong bài viết này, nhưng hãy dành thời gian tra cứu cách thực hiện nếu bạn tò mò.

Thực hành: Nghiên cứu HTML bằng trình kiểm tra DOM

Trong phần này, bạn sẽ nghiên cứu một số mã bằng trình kiểm tra DOM và xem cách trình duyệt xử lý các lỗi đánh dấu phổ biến.

1. Đầu tiên, hãy lưu danh sách tệp HTML sau dưới dạng debug-example.html, ở đâu đó trên máy tính cục bộ của bạn. Bản demo này được viết cố ý với một số lỗi tích hợp để chúng ta khám phá.

   html

   <!doctype html>
   <html lang="vi">
     <head>
       <meta charset="utf-8">
       <title>HTML debugging examples</title>
     </head>
   
     <body>
       <h1>HTML debugging examples</h1>
       <p>What causes errors in HTML?
       <ul>
         <li>Unclosed elements: If an element is <strong>not closed properly,then its effect can spread to areas you didn't intend
         <li>Badly nested elements: Nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasized?</strong> what is this?</em>
         <li>Unclosed attributes: Another common source of HTML problems. Let's look at an example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a>
       </ul>
     </body>
   </html>
   

2. Tiếp theo, mở nó trong trình duyệt. Bạn sẽ thấy điều gì đó như thế này:

3. Điều này ngay lập tức không trông hay lắm; hãy xem xét mã nguồn để xem chúng ta có thể tìm ra nguyên nhân không (chỉ hiển thị nội dung body):

   html

   <h1>HTML debugging examples</h1>
   
   <p>What causes errors in HTML?
   
   <ul>
     <li>Unclosed elements: If an element is <strong>not closed properly,
         then its effect can spread to areas you didn't intend
   
     <li>Badly nested elements: Nesting elements properly is also very important
         for code behaving correctly. <strong>strong <em>strong emphasized?</strong>
         what is this?</em>
   
     <li>Unclosed attributes: Another common source of HTML problems. Let's
         look at an example: <a href="https://www.mozilla.org/>link to Mozilla
         homepage</a>
   </ul>
   

4. Hãy xem xét các vấn đề:

   • Các phần tử đoạn văn và mục danh sách không có thẻ đóng. Nhìn vào hình ảnh trên, điều này dường như không ảnh hưởng quá xấu đến việc hiển thị đánh dấu, vì dễ dàng suy ra nơi một phần tử nên kết thúc và phần tử khác nên bắt đầu.
   • Phần tử <strong> đầu tiên không có thẻ đóng. Đây là vấn đề hơn một chút, vì không dễ biết phần tử này nên kết thúc ở đâu. Trên thực tế, toàn bộ phần còn lại của văn bản đã được hiển thị in đậm.
   • Phần này được lồng không đúng cách: <strong>strong <em>strong emphasized?</strong> what is this?</em>. Không dễ biết điều này đã được diễn giải như thế nào do vấn đề trước đó.
   • Giá trị thuộc tính href thiếu dấu ngoặc kép đóng. Điều này dường như đã gây ra vấn đề lớn nhất — liên kết hoàn toàn không được hiển thị.

5. Bây giờ hãy kiểm tra DOM được hiển thị, trái ngược với mã nguồn. Để thực hiện điều này, hãy mở trình kiểm tra DOM của trình duyệt. Bạn sẽ thấy một biểu diễn của đánh dấu được hiển thị:

6. Hãy xem cách trình duyệt đã cố gắng sửa các lỗi HTML của chúng ta (chúng tôi đã xem xét trong Firefox; các trình duyệt hiện đại khác nên cho kết quả tương tự):

   • Các đoạn văn và mục danh sách đã được thêm thẻ đóng.

   • Không rõ phần tử <strong> đầu tiên nên được đóng ở đâu, vì vậy trình duyệt đã bọc mỗi khối văn bản riêng biệt trong phần tử <strong> của riêng nó, tất cả xuống đến cuối tài liệu!

   • Việc lồng không chính xác đã được trình duyệt sửa như được hiển thị ở đây:

     html

     <strong>
       strong
       <em>strong emphasized?</em>
     </strong>
     <em> what is this?</em>
     

   • Liên kết thiếu dấu ngoặc kép đã bị xóa hoàn toàn. Mục danh sách cuối cùng trông như thế này:

     html

     <li>
       <strong>
         Unclosed attributes: Another common source of HTML problems. Let's look
         at an example:
       </strong>
     </li>
     

Xác thực HTML

Bạn có thể thấy từ ví dụ trên rằng bạn thực sự muốn đảm bảo HTML của mình có cấu trúc tốt! Nhưng làm thế nào? Trong một ví dụ nhỏ như ví dụ trên, dễ dàng tìm kiếm qua các dòng và tìm lỗi, nhưng còn một tài liệu HTML lớn, phức tạp thì sao?

Công cụ dành cho công việc này là Dịch vụ Xác thực Đánh dấu (hay trình xác thực HTML), được W3C tạo ra và duy trì (bạn đã tìm hiểu về điều này trong Mô hình chuẩn web). Trình xác thực nhận một tài liệu HTML làm đầu vào, duyệt qua nó và cung cấp cho bạn một báo cáo cho biết những gì sai với HTML của bạn.

Để chỉ định HTML cần xác thực, bạn có thể cung cấp địa chỉ web, tải lên tệp HTML, hoặc nhập trực tiếp một số mã HTML.

Xác thực một tài liệu HTML

Trong tác vụ này, chúng tôi sẽ yêu cầu bạn thử trình xác thực HTML. Bạn sẽ xác thực tài liệu mẫu và xem kết quả được trả về. Ví dụ này chứa cùng HTML mà bạn đã nghiên cứu với trình kiểm tra DOM trước đó.

1. Đầu tiên, hãy tải Dịch vụ Xác thực Đánh dấu vào tab trình duyệt mới, nếu nó chưa mở.
2. Chuyển sang tab Validate by Direct Input.
3. Sao chép tất cả mã của tài liệu mẫu (không chỉ phần body) và dán vào vùng văn bản lớn được hiển thị trong Dịch vụ Xác thực Đánh dấu.
4. Nhấn nút Check.

Thao tác này sẽ cung cấp cho bạn danh sách lỗi và thông tin khác.

Giải thích các thông báo lỗi

Các thông báo lỗi thường hữu ích, nhưng đôi khi chúng không dễ hiểu. Với một chút thực hành, bạn có thể tìm ra cách giải thích những thông báo này để sửa mã. Hãy xem qua các thông báo lỗi và xem chúng có nghĩa là gì. Bạn sẽ thấy rằng mỗi thông báo đều đi kèm với số dòng và cột để giúp bạn dễ dàng xác định vị trí lỗi.

• "End tag li implied, but there were open elements" (2 trường hợp): Những thông báo này chỉ ra rằng có một phần tử đang mở cần được đóng. Thẻ kết thúc được ngụ ý, nhưng thực tế không có ở đó. Thông tin dòng/cột trỏ đến dòng đầu tiên sau dòng nơi thẻ đóng thực sự nên ở đó, nhưng đây là manh mối đủ tốt để thấy những gì sai.

• "Unclosed element strong": Điều này dễ hiểu hơn — một phần tử <strong> chưa được đóng, và thông tin dòng/cột trỏ ngay đến nơi nó ở.

• "End tag strong violates nesting rules": Điều này chỉ ra các phần tử được lồng không chính xác, và thông tin dòng/cột chỉ ra nơi chúng ở.

• "End of file reached when inside an attribute value. Ignoring tag": Cái này khá khó hiểu; nó đề cập đến thực tế là có một giá trị thuộc tính không được định dạng đúng cách ở đâu đó, có thể gần cuối tệp vì phần cuối của tệp xuất hiện bên trong giá trị thuộc tính. Thực tế là trình duyệt không hiển thị liên kết sẽ cho chúng ta biết manh mối tốt về phần tử nào bị lỗi.

• "End of file seen and there were open elements": Điều này hơi mơ hồ, nhưng về cơ bản đề cập đến thực tế là có các phần tử mở cần được đóng đúng cách. Số dòng trỏ đến vài dòng cuối của tệp, và thông báo lỗi này đi kèm với một dòng mã chỉ ra một ví dụ về phần tử mở:

  example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
  

  Note: Một thuộc tính thiếu dấu ngoặc kép đóng có thể dẫn đến một phần tử mở vì phần còn lại của tài liệu được diễn giải là nội dung của thuộc tính.

• "Unclosed element ul": Điều này không hữu ích lắm, vì phần tử <ul> được đóng đúng cách. Lỗi này xảy ra vì phần tử <a> không được đóng, do thiếu dấu ngoặc kép đóng.

Nếu bạn không thể tìm ra ý nghĩa của mỗi thông báo lỗi, đừng lo lắng về điều đó. Một chiến lược tốt là sửa một vài lỗi mỗi lần, sau đó xác thực lại HTML của bạn sau mỗi tập hợp sửa chữa để hiển thị những lỗi còn lại. Đôi khi, việc sửa một lỗi trước đó cũng sẽ loại bỏ các thông báo lỗi khác — nhiều lỗi thường có thể được gây ra bởi một vấn đề duy nhất, theo hiệu ứng domino.

Bạn sẽ biết khi tất cả các lỗi của bạn được sửa khi bạn thấy một biểu ngữ màu xanh lá nhỏ xinh báo rằng không có lỗi nào để báo cáo. Tại thời điểm viết bài, nó nói "Document checking completed. No errors or warnings to show."

Tóm tắt

Vậy là đây, phần giới thiệu về gỡ lỗi HTML, sẽ cung cấp cho bạn một số kỹ năng hữu ích để dựa vào khi gỡ lỗi HTML, mà còn cả mã CSS và JavaScript sau này trong khóa học. Đây cũng đánh dấu kết thúc của mô-đun Cấu trúc nội dung với HTML.

• Previous
• Overview: Cấu trúc nội dung với HTML
• Next