Web 調(diào)試HTML

寫HTML是容易的，但如果某部分出了問題而你找不到錯(cuò)誤代碼在哪里的時(shí)候該如何？這篇文章會(huì)介紹一些幫助你查找和修復(fù)HTML中錯(cuò)誤的工具。

調(diào)試并不可怕

---

在編寫某種代碼時(shí)，通常一切都是正常的，直到發(fā)生錯(cuò)誤的那個(gè)可怕時(shí)刻——你出錯(cuò)了，因此你的代碼無(wú)效——無(wú)論這是不是你想要的。例如下面，當(dāng)我們嘗試用Rust語(yǔ)言去編寫一個(gè)簡(jiǎn)單的程序時(shí)，出現(xiàn)了一個(gè)錯(cuò)誤報(bào)告。

這里的錯(cuò)誤信息比較容易理解 — “unterminated double quote string”（雙引號(hào)字符串未閉合）。如果你查看列表，你大概會(huì)看到：println!(Hello, world!")，這里邏輯上缺少了一個(gè)雙引號(hào)。然而，當(dāng)程序變龐大的時(shí)候，錯(cuò)誤信息也會(huì)變得更復(fù)雜和更難解釋，即使是簡(jiǎn)單的例子，對(duì)于不了解Rust語(yǔ)言的人來說也會(huì)有點(diǎn)嚇人。

調(diào)試沒有那么可怕 - 編寫和調(diào)試任何編程語(yǔ)言或代碼的關(guān)鍵是熟悉這門語(yǔ)言和工具。

HTML和調(diào)試

---

HTML不像Rust語(yǔ)言那么難以理解。在瀏覽器解析和顯示結(jié)果之前，HTML不會(huì)被編譯成其他形式（這是解釋而不是編譯）。而HTML的元素語(yǔ)法可以說比像“Rust”，“JavaScript”或“Python”這樣“真正的編程語(yǔ)言”更容易理解。瀏覽器解析HTML比編程語(yǔ)言的運(yùn)行更寬松，這可以說是好事也是壞事。

寬容模式代碼

寬容的意思是什么呢? 通常當(dāng)你寫錯(cuò)代碼的時(shí)候，你會(huì)遇到以下兩種主要類型的錯(cuò)誤：

• 語(yǔ)法錯(cuò)誤：由于拼寫錯(cuò)誤導(dǎo)致程序無(wú)法運(yùn)行，就像上面Rust的例子。只要你熟悉語(yǔ)言的語(yǔ)法并知道錯(cuò)誤信息的意思，修正這些錯(cuò)誤是很容易的。
• 邏輯錯(cuò)誤：這種錯(cuò)誤的語(yǔ)法實(shí)際上是正確的，但代碼不是你想要表達(dá)的意圖，這意味著程序運(yùn)行不正確。邏輯錯(cuò)誤通常比語(yǔ)法錯(cuò)誤更難修復(fù)，因?yàn)闆]有一個(gè)錯(cuò)誤信息指示你錯(cuò)誤的來源。

HTML本身不會(huì)受到語(yǔ)法錯(cuò)誤的影響，因?yàn)闉g覽器是以寬松模式來解析，這意味著即使出現(xiàn)語(yǔ)法錯(cuò)誤，頁(yè)面仍然顯示。瀏覽器通常都有自己的規(guī)則來解析錯(cuò)誤編寫的標(biāo)記，所以程序仍然會(huì)運(yùn)行，盡管可能不是你預(yù)期的樣子。當(dāng)然這樣仍然會(huì)是個(gè)問題。

主動(dòng)學(xué)習(xí)：學(xué)習(xí)寬松模式代碼

現(xiàn)在是研究HTML代碼的寬松性的時(shí)候了。

1. 首先，下載我們的調(diào)試示例演示并將其保存在本地。這個(gè)演示是刻意寫了一些錯(cuò)誤讓我們?nèi)ヌ剿鳎℉TML標(biāo)記提示是badly-formed，而不是well-formed）。
2. 接下來，在瀏覽器中打開它。你會(huì)看到以下的內(nèi)容：
3. 這看起來并不好看；我們來看看源代碼，看看是否可以找出原因（僅顯示正文內(nèi)容）：

   <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 emphasised?</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. Let's review the problems we can see here:
   • The paragraph and list item elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end, and another should begin.
   • The first <strong> element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text looks to have been strongly emphasised.
   • This section is badly nested: <strong>strong <em>strong emphasised?</strong> what is this?</em>. It is not easy to tell how this has been interpreted, because of the previous problem.
   • The href attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.
5. Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes out to review Discover browser developer tools, then come back.
6. In the DOM inspector, you can see what the rendered markup looks like:
7. Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers should give the same result):
   • The paragraphs and list items have been given closing tags.
   • It isn't clear where the first <strong> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!
   • The  incorrect nesting has been fixed by the browser like this:

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

   • The link with the missing attribute double quote has been deleted altogether. The last list item just looks like this:

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

HTML驗(yàn)證

所以你可以從上面的例子看到，你真的想確保你的HTML格式正確！ 但是如何？ 在像上面看到的一個(gè)小例子中，很容易通過行搜索并找到錯(cuò)誤，但是一個(gè)巨大的，復(fù)雜的HTML文檔呢？

最好的策略是從通過由W3C創(chuàng)建和維護(hù)的標(biāo)記驗(yàn)證服務(wù)運(yùn)行HTML頁(yè)面開始， 該組織負(fù)責(zé)定義HTML，CSS和其他Web技術(shù)的規(guī)范。 此網(wǎng)頁(yè)將HTML文檔作為輸入，通過它，并向您提供一個(gè)報(bào)告，告訴您HTML的錯(cuò)誤。

要指定要驗(yàn)證的HTML，您可以為其指定一個(gè)要指向的網(wǎng)址，上傳HTML文件或直接輸入一些HTML代碼。

主動(dòng)學(xué)習(xí):驗(yàn)證HTML文檔

讓我們?cè)囋嚳?，并?yàn)證我們的 example.html"class ="external">示例文檔。

1. First, load up the Markup Validation Service in one of your browser tabs, if it isn't already.
2. Click on/activate the Validate by Direct Input tab.
3. Copy the whole of the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.
4. Press the Check button.

這應(yīng)該給你一個(gè)錯(cuò)誤和其他信息的列表。

Interpreting the error messages

驗(yàn)證器提供的錯(cuò)誤消息列表通常很有用，有時(shí)不太有用; 有一點(diǎn)練習(xí)你可以解決這些如何解決你的代碼。 讓我們通過錯(cuò)誤消息和它們的意思。 您會(huì)看到每條消息都帶有行和列號(hào)，以幫助您更輕松地找到錯(cuò)誤。

• End tag li implied, but there were open elements (2 instances): These messages indicate that an element is open that should be closed. The ending tag is implied, but not actually there. The line/column information points to the first line after the line where the closing tag should really be, but this is a good enough clue to see what is up.
• Unclosed element strong: This is really easy to understand — a <strong> element is unclosed, and the line/column information points right to where it is.
• End tag strong violates nesting rules: This points out the incorrectly nested elements, and the line/column information points out where it is.
• End of file reached when inside an attribute value. Ignoring tag: This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.
• End of file seen and there were open elements: This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element:

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

  注意:缺少結(jié)束引號(hào)的屬性可能會(huì)導(dǎo)致打開的元素，因?yàn)槲臋n的其余部分被解釋為屬性的內(nèi)容。

• Unclosed element ul: This is not very helpful, as the <ul> element is closed correctly. This error comes up because the <a> element is not closed, due to the missing closing quote mark.

如果你無(wú)法弄清楚每個(gè)錯(cuò)誤信息的含義，不要擔(dān)心它 - 一個(gè)好主意是一次嘗試修復(fù)一些錯(cuò)誤，然后嘗試重新驗(yàn)證你的HTML以顯示剩下的錯(cuò)誤。 有時(shí)固定較早的錯(cuò)誤也會(huì)除去多個(gè)其他錯(cuò)誤消息 - 在多米諾效應(yīng)中，多個(gè)錯(cuò)誤通?？赡苡蓡蝹€(gè)問題引起。

當(dāng)您在輸出中看到以下橫幅時(shí)，您會(huì)知道所有錯(cuò)誤何時(shí)修復(fù):

總結(jié)

---

所以我們有它，一個(gè)介紹調(diào)試你的HTML，應(yīng)該給你一些有用的技能，當(dāng)你開始調(diào)試CSS，JavaScript和其他類型的代碼在你的職業(yè)生涯中。 這也標(biāo)志著HTML模塊學(xué)習(xí)文章介紹的結(jié)束 - 現(xiàn)在你可以繼續(xù)測(cè)試自己與我們的評(píng)估:第一個(gè)鏈接如下。