視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
我們通常把計算機程式碼中出現的問題稱為bug。如果你能夠很快的修復bug，或者提前避免bug的出現，這是一種能力的體現。
那麼，在我們遇到一些常見的問題之前，我們來看看一些可以幫助識別和診斷這些問題的方法。我們將在Google Chrome瀏覽器中檢視開發者工具。如果您使用其他瀏覽器，您可能會發現類似的功能，但是，更多的設計師和開發人員都喜歡使用Chrome的強大的開發工具以及它對Web標準的支援。
所以，如果您要下載Chrome，請前往google.com/chrome，如果你打不開這個網址，可以關注我們提供的科學上網技術，虛幻賬號。需要注意的是，Chrome開發工具在平板電腦和智慧手機上是不可用的，因此您需要一臺電腦才能使用。
現在，讓我們開啟我們的網站，然後我們來開啟Chrome開發工具。有三種不同的方式來做到這一點。你可以使用快捷鍵， Ctrl + Shift + I。這樣做就會彈出Chrome開發者工具。您可以點選X關閉它們。
開啟Chrome開發工具的第二種方法是右鍵單擊頁面上的任何元素，然後選擇檢查。
最後，您可以在Chrome中的右上角進入選單。轉到工具，然後選擇開發工具，同樣也可以開啟它：
這將在螢幕上開啟一個皮膚，你會注意到，在上方的標籤欄有幾個不同的皮膚。第一個是“元素”皮膚，你可以看到你的HTML文件。
這個巢狀的元素樹通常被稱為文件物件模型樹或DOM樹。 DOM樹並不是Chrome開發人員工具所獨有的。這只是HTML文件結構的一種表示方式。要瀏覽DOM樹，我們只需將滑鼠懸停在這些箭頭之間，然後開啟頁面上對應的元素。當我將滑鼠懸停在每個元素上時，您會看到頁面的相應部分會被突出顯示。
當您通過點選元素選擇元素時，巢狀元素的路徑將被顯示為螢幕底部的導航中：
所以我們可以看到，這個特定的列表項被巢狀在無序列表中，該列表包含在section中，它位於我們的包裝器div，body html等。
您也可以單擊開發工具中的檢查按鈕，然後直接檢查頁面上的元素。
當你通過種方式檢查元素時，它會立即幫你找到元素對應的程式碼。這實際上是開發工具最常見的用途之一。你可能會發現頁面上有些東西看起來很奇怪，你只需要按這個按鈕檢查一下，就知道發生了什麼。或者，您也可以直接右鍵單擊頁面上的你想檢視的內容，然後選擇“檢查”，它也會直接跳到對應的程式碼。
現在，當我們點選不同的元素時，您會注意到下側的皮膚會顯示CSS。
實際上，在“Style”區域中，可以看到正在應用於選定元素的所有CSS。它還會告訴你相關CSS所在的檔案。
這個CSS可能看起來和你寫的內容有些不一樣。實際上，有時瀏覽器會新增一些預設的樣式，或者補償HTML和CSS中的某些錯誤，或者拼寫錯誤。
這個皮膚的有趣的地方在於：您可以改變程式碼，開啟和關閉樣式等等。這些都不會真正地修改您網站的程式碼。這只是一個快速實驗和除錯問題的地方。當你重新整理頁面後，你所做的任何更改將自動被刪除。
以我們的列表項為例。當瀏覽器處於完整寬度的時候，您可以看到其中的某些屬性正在被刪除，也就是這些被劃了橫線的程式碼：
這是因為這些程式碼被我們編寫的其他程式碼所覆蓋。
所以，舉一個例子，我們在這裡有margin和padding：
但是，如果我們在此處取消選中核取方塊，你會發現index.html對應的導航項的位置會發生變化。這是因為現在，這裡的padding和這邊的margin正在被應用：
如果我們再次重新框選這兩個屬性，您將看到我們現在我們編寫的main.css會再次覆蓋normalize.css。
在我們的開發工具中，還有一個重要的地方是右下角的度量區域，你可以在這裡看到一個框。這將顯示一個元素的內容的確切寬度和高度：
比如說，在這種情況下填充為0，Border也是0，最後，如您所見，我們在左側和右側有10畫素的邊距。
而且，當我滑鼠放在這個區域上時，您可以在頁面中看到這兩個小的橙色區域，這就是我們應用的margin樣式。
如果您遇到一些奇怪的間隔問題，那麼這個工具真的很方便，因為元素太靠近或者太遠，或者不符合你期望的樣式。都可以通過這種方式來測算。
Chrome開發人員工具還有更多功能，但大多數功能都是針對更高階的JavaScript開發，這超出了HTML和CSS網站的範圍。
這裡簡單介紹其他的功能，比如說我們點選Network標籤。當我重新整理頁面時，該個區域將告訴你頁面的不同部分載入需要多長的時間。
如果您的一個頁面需要很長時間才能載入，這可能是一個你需要檢視的區域，以便您可以找到過載的資源，如影像，樣式表，JavaScript等等。
這節課，我們只是對除錯程式碼的工具的快速講解。接下來，我們針對一些常見的問題，然後使用這些工具來修復它們。
更多精彩內容盡在視訊中！
本文固定連結：http://www.oxox.work/web/html-css/dev-tool/ | 虛幻大學
檢視原文：http://www.oxox.work/web/html-css/dev-tool/