IE調試網頁之六：使用 F12 開發人員工具調試 HTML 和 CSS (Windows)

　　F12 開發人員工具可協助你尋找和修複 HTML 和階層式樣式表 (CSS) 代碼中的錯誤。如果不使用這些工具，則可能很難在原始碼中發現這些錯誤。 通過在 Windows Internet Explorer 解釋源時在文件物件模型 (DOM) 樹中顯示你的 HTML 和 CSS 代碼，可以更容易地調試動態產生的更改之類的代碼。

　　本主題包含下列部分：

　　使用“HTML”選項卡

　　“HTML”選項卡視圖在由記憶體中的 Windows Internet Explorer 9 呈現的樹視圖中顯示你的網頁的動態標記。它反映開啟 F12 時的 DOM，如果有任何更改，則需要重新整理。 你可以使用滑鼠或鍵盤直接在樹視圖中導航，以及查看特性和更改值。

　　若要跳轉到網頁上的特定元素，請按 Ctrl+B，或單擊“單擊選擇元素” 
按鈕。在網頁上，當你將滑鼠移至上方在元素上方時將反白相應的元素。單擊某個元素時，將在 HTML 視圖中反白 DOM 樹中對應的節點。

　　在“HTML”選項卡中選擇一個元素時，可使用“視圖”>“源”菜單在你的視圖中篩選出按照元素關聯的 CSS 樣式或僅按照元素本身選擇的元素。

　　“帶有樣式的元素源”按鈕僅在新視窗中顯示選定元素的 HTML 源及其內容，以及適用於它的 CSS。這有助於只關注選定元素的源檔案。必須首先使用“HTML”選項卡視圖選擇 DOM 樹的主體內的某個 HTML 元素，然後才可以運行此命令。若要選擇某個元素，可單擊“單擊選擇元素”按鈕，或在 DOM 樹中單擊某個元素。 當你使用“單擊選擇元素”時，首先重新整理視圖是個不錯的主意。

　　若要展開或摺疊某個元素的屬性，請單擊用加號 (+ ) 或減號 (-) 標記的框。HTML 和 CSS 視圖中的所有元素都是可編輯的，並且編輯操作會立即生效。通過單擊元素名稱旁邊的複選框，可以開啟或關閉樣式規則和特性。

　　查看動態超文字標記語言 代碼

　　大多數網站使用動態代碼。用戶端指令碼通常用於產生使用者可以看到的呈現的 HTML。靜態 HTML 程式碼的數量通常很少，僅用於在頁面上啟動操作。由於 F12 工具將顯示呈現在瀏覽器中的 HTML 和 CSS 代碼，而不是顯示嚴格的 HTML 源，因此尋找錯誤更容易一些。

　　“HTML”選項卡顯示 DOM 的目前狀態，而不會自動跟蹤更改。如果你更改了某個值或特性，但它沒有立即顯示，請在“HTML”選項卡中按 F5 重新整理視圖。

　　更改值和添加特性

　　F12 工具允許你更改幾乎任何特性或屬性的值。從“HTML”選項卡內，從 DOM 樹中選擇一個元素或使用“單擊選擇元素”按鈕選擇一個元素。在屬性視圖（右窗格）中，單擊一個值以反白並更改它。

　　例如，在 Internet Explorer 9 中開啟如何使用 CSS3 添加圓角中的 CSS 樣本頁面並且按 F12 可開啟該工具。單擊“單擊選擇元素”按鈕 ，然後單擊栗色的 Now in stock at Fourth Coffee 標題。 在屬性窗格中，單擊 "h2" 選取器下的顏色特性。 鍵入一個新的顏色名稱或值，如 blue，然後按 Enter。標題的顏色將立即更改。

　　要添加特性，請按右鍵“HTML”或“CSS”選項卡的左窗格中的元素，然後單擊操作功能表中的“添加屬性”。你需要知道該特性的格式（如 "background-color:"）和正確值。

　　若要刪除某個特性（你添加的特性或現有特性），請在右窗格視圖中單擊該特性，然後按 Delete 鍵。對於原始頁中的特性，可通過重新整理網頁恢複它們。添加的特性需要重新應用。

　　如果你只希望在某個會話期間臨時關閉某個特性，則在“HTML”或“CSS”選項卡的右窗格中清除該特性旁邊的複選框。

　　“HTML”選項卡視圖和工具

　　在左窗格樹視圖中選擇一個元素時，你可以在右側查看和更改所選元素及其子項目的樣式、框模型布局和特性。 你所做的更改不是永久的，當你重新整理或開啟另一個頁面時這些更改會丟失。但是，你可以通過單擊“儲存”按鈕來儲存你的 HTML 程式碼。

　　當你查看應用於“樣式”和“跟蹤樣式”選項卡中所選元素的多個 CSS 規則時，將根據 CSS 規範，基於這些規則的專一性來顯示它們。列表頂部的規則將第一個應用到所選元素，而底部的規則是當前定義所選元素的樣式屬性的規則。這些規則的值是可編輯的，方法為：單擊某個值，鍵入新值，然後按 "Enter"。更改會立即在網頁上顯示。這兩個屬性類型中的資訊是相同的。但在“跟蹤樣式”屬性類型中，相同的資訊按照屬性（在其下面顯示規則）分組。這些屬性按字母順序列出，並基於專一性再次對規則排序。

• 樣式 顯示你在樹視圖中選擇的元素的規則和樣式。它按規則進行組織，並包含繼承的特性和重寫的特性。

• 跟蹤樣式 顯示與樣式相同的資訊，但是按屬性而不是規則分組。

• 布局 顯示所選元素的框模型。通過單擊圖表中的相應值，可更改“布局”視圖中的任意值。“布局”選項卡對可縮放向量圖形 (SVG) 元素禁用。

• 特性 顯示選定元素的特性，如 ID。可以添加或刪除特性

　　按右鍵“HTML”選項卡上的菜單

　　如前面所述，可在“HTML”選項卡的左窗格中按右鍵一個元素。下面是你可以在“HTML”選項卡中使用的選項。

功能表項目	作用
添加特性	向標記或元素中添加新的特性。
複製	將標記和特性複製到剪貼簿中。
複製 InnerHTML	將元素的 InnerHTML 內容（子文本、元素和特性）複製到剪貼簿。
複製 OuterHTML	將元素的 OuterHTML 內容（子文本、元素和特性）複製到剪貼簿。

　　如果在“HTML”選項卡中單擊某個元素的子節點，如 "h2" 標記的文本元素，則可能無法獲得所有選項。如果你未看到所需的選項，則轉到父元素並重試。

　　檢查 CSS 規則

　　“CSS”選項卡顯示你的樣式表之間的相互影響。此選項卡對於使用多個樣式表的網站很有用。若要在樣式表之間切換，可使用樣式表選取器。當你選擇某個樣式表時，左窗格中將顯示規則及其相關樣式屬性。預設情況下，此按鈕顯示在網頁中引用的第一個樣式表。如果有多個樣式表正在網頁上使用，則單擊下拉式清單以選擇其他樣式表。

　　“CSS”選項卡上的捷徑功能表選項

　　當你按右鍵“CSS”選項卡時，捷徑功能表將會提供比“HTML”選項卡更多的選項。啟用的選項是上下文相關的，並取決於你在“CSS”選項卡中單擊的位置。

功能表項目	作用	按右鍵的位置
添加特性	向標記或元素中添加新的特性。	在規則或特性（任何元素）上。
添加規則	添加選取器、聲明或樣式。	在白色地區中，而不是在現有元素上。
後加規則	在當前規則之後添加選取器或規則。	在任何元素上。
前加規則	在當前規則之前添加選取器或規則。	在任何元素上。
刪除特性。	刪除選定的特性。	在任何特性上。
刪除規則	刪除選定的規則和所有相關的特性。	在任何規則或選取器上。

　　在“CSS”選項卡中更改數字 CSS 值

　　CSS 屬性的值可以像 F12 工具中的幾乎任何其他屬性一樣變更。通過單擊屬性值並鍵入新值，可以更改 CSS 屬性。在“CSS”選項卡中，還可使用向上鍵和向下鍵增加或減小數值。

　　搜尋和儲存更改

　　像 F12 工具中的其餘選項卡一樣，你可以使用“搜尋”框在“HTML”和“CSS”選項卡中搜尋特定標記、屬性、特性或值。單擊“搜尋”按鈕時，將反白搜尋索引鍵的所有執行個體，並且窗格會滾動到顯示第一個匹配項。

　　如果存在多個匹配項，則可使用“下一個”和“上一個”按鈕向前和向後滾動。

　　你所做的更改（例如，調整框模型或添加特性）不是永久的。當你在瀏覽器中重新載入頁面或導航到其他網頁時，你所做的任何更改都會丟失。若要儲存對 HTML/CSS 檔案的本機複本的更改，請單擊左窗格上的“儲存”按鈕。