F12 開發(fā)人員工具可幫助你查找和修復(fù) HTML 和級聯(lián)樣式表 (CSS) 代碼中的錯誤。如果不使用這些工具，則可能很難在源代碼中發(fā)現(xiàn)這些錯誤。 通過在 Windows Internet Explorer 解釋源時在文檔對象模型 (DOM) 樹中顯示你的 HTML 和 CSS 代碼，可以更容易地調(diào)試動態(tài)生成的更改之類的代碼。
本主題包含下列部分：
使用“HTML”選項卡
“HTML”選項卡視圖在由內(nèi)存中的 Windows Internet Explorer 9 呈現(xiàn)的樹視圖中顯示你的網(wǎng)頁的動態(tài)標(biāo)記。它反映打開 F12 時的 DOM，如果有任何更改，則需要刷新。 你可以使用鼠標(biāo)或鍵盤直接在樹視圖中導(dǎo)航，以及查看特性和更改值。
若要跳轉(zhuǎn)到網(wǎng)頁上的特定元素，請按 Ctrl+B，或單擊“單擊選擇元素”
在“HTML”選項卡中選擇一個元素時，可使用“視圖”>“源”菜單在你的視圖中篩選出按照元素關(guān)聯(lián)的 CSS 樣式或僅按照元素本身選擇的元素。
“帶有樣式的元素源”按鈕
若要展開或折疊某個元素的屬性，請單擊用加號 (+ ) 或減號 (-) 標(biāo)記的框。HTML 和 CSS 視圖中的所有元素都是可編輯的，并且編輯操作會立即生效。通過單擊元素名稱旁邊的復(fù)選框，可以打開或關(guān)閉樣式規(guī)則和特性。
查看動態(tài) HTML 代碼
大多數(shù)網(wǎng)站使用動態(tài)代碼?？蛻舳四_本通常用于生成用戶可以看到的呈現(xiàn)的 HTML。靜態(tài) HTML 代碼的數(shù)量通常很少，僅用于在頁面上啟動操作。由于 F12 工具將顯示呈現(xiàn)在瀏覽器中的 HTML 和 CSS 代碼，而不是顯示嚴(yán)格的 HTML 源，因此查找錯誤更容易一些。
“HTML”選項卡顯示 DOM 的當(dāng)前狀態(tài)，而不會自動跟蹤更改。如果你更改了某個值或特性，但它沒有立即顯示，請在“HTML”選項卡中按 F5 刷新視圖。
更改值和添加特性
F12 工具允許你更改幾乎任何特性或?qū)傩缘闹怠摹癏TML”選項卡內(nèi)，從 DOM 樹中選擇一個元素或使用“單擊選擇元素”按鈕選擇一個元素。在屬性視圖（右窗格）中，單擊一個值以突出顯示并更改它。
例如，在 Internet Explorer 9 中打開如何使用 CSS3 添加圓角中的 CSS 示例頁面并且按 F12 可打開該工具。單擊“單擊選擇元素”按鈕
要添加特性，請右鍵單擊“HTML”或“CSS”選項卡的左窗格中的元素，然后單擊上下文菜單中的“添加屬性”。你需要知道該特性的格式（如 "background-color:"）和正確值。
若要刪除某個特性（你添加的特性或現(xiàn)有特性），請在右窗格視圖中單擊該特性，然后按 Delete 鍵。對于原始頁中的特性，可通過刷新網(wǎng)頁恢復(fù)它們。添加的特性需要重新應(yīng)用。
如果你只希望在某個會話期間臨時關(guān)閉某個特性，則在“HTML”或“CSS”選項卡的右窗格中清除該特性旁邊的復(fù)選框。
“HTML”選項卡視圖和工具
在左窗格樹視圖中選擇一個元素時，你可以在右側(cè)查看和更改所選元素及其子元素的樣式、框模型布局和特性。 你所做的更改不是永久的，當(dāng)你刷新或打開另一個頁面時這些更改會丟失。但是，你可以通過單擊“保存”按鈕來保存你的 HTML 代碼。
當(dāng)你查看應(yīng)用于“樣式”和“跟蹤樣式”選項卡中所選元素的多個 CSS 規(guī)則時，將根據(jù) CSS 規(guī)范，基于這些規(guī)則的專一性來顯示它們。列表頂部的規(guī)則將第一個應(yīng)用到所選元素，而底部的規(guī)則是當(dāng)前定義所選元素的樣式屬性的規(guī)則。這些規(guī)則的值是可編輯的，方法為：單擊某個值，鍵入新值，然后按 "Enter"。更改會立即在網(wǎng)頁上顯示。這兩個屬性類型中的信息是相同的。但在“跟蹤樣式”屬性類型中，相同的信息按照屬性（在其下面顯示規(guī)則）分組。這些屬性按字母順序列出，并基于專一性再次對規(guī)則排序。
右鍵單擊“HTML”選項卡上的菜單
如前面所述，可在“HTML”選項卡的左窗格中右鍵單擊一個元素。下面是你可以在“HTML”選項卡中使用的選項。
| 菜單項 | 作用 |
|---|---|
| 添加特性 | 向標(biāo)記或元素中添加新的特性。 |
| 復(fù)制 | 將標(biāo)記和特性復(fù)制到剪貼板中。 |
| 復(fù)制 InnerHTML | 將元素的 InnerHTML 內(nèi)容（子文本、元素和特性）復(fù)制到剪貼板。 |
| 復(fù)制 OuterHTML | 將元素的 OuterHTML 內(nèi)容（子文本、元素和特性）復(fù)制到剪貼板。 |
如果在“HTML”選項卡中單擊某個元素的子節(jié)點(diǎn)，如 "h2" 標(biāo)記的文本元素，則可能無法獲得所有選項。如果你未看到所需的選項，則轉(zhuǎn)到父元素并重試。
檢查 CSS 規(guī)則
“CSS”選項卡顯示你的樣式表之間的相互影響。此選項卡對于使用多個樣式表的網(wǎng)站很有用。若要在樣式表之間切換，可使用樣式表選擇器。當(dāng)你選擇某個樣式表時，左窗格中將顯示規(guī)則及其相關(guān)樣式屬性。默認(rèn)情況下，此按鈕顯示在網(wǎng)頁中引用的第一個樣式表。如果有多個樣式表正在網(wǎng)頁上使用，則單擊下拉列表以選擇其他樣式表。
“CSS”選項卡上的快捷菜單選項
當(dāng)你右鍵單擊“CSS”選項卡時，快捷菜單將會提供比“HTML”選項卡更多的選項。啟用的選項是上下文相關(guān)的，并取決于你在“CSS”選項卡中單擊的位置。
| 菜單項 | 作用 | 右鍵單擊的位置 |
|---|---|---|
| 添加特性 | 向標(biāo)記或元素中添加新的特性。 | 在規(guī)則或特性（任何元素）上。 |
| 添加規(guī)則 | 添加選擇器、聲明或樣式。 | 在白色區(qū)域中，而不是在現(xiàn)有元素上。 |
| 后加規(guī)則 | 在當(dāng)前規(guī)則之后添加選擇器或規(guī)則。 | 在任何元素上。 |
| 前加規(guī)則 | 在當(dāng)前規(guī)則之前添加選擇器或規(guī)則。 | 在任何元素上。 |
| 刪除特性。 | 刪除選定的特性。 | 在任何特性上。 |
| 刪除規(guī)則 | 刪除選定的規(guī)則和所有相關(guān)的特性。 | 在任何規(guī)則或選擇器上。 |
在“CSS”選項卡中更改數(shù)字 CSS 值
CSS 屬性的值可以像 F12 工具中的幾乎任何其他屬性一樣進(jìn)行更改。通過單擊屬性值并鍵入新值，可以更改 CSS 屬性。在“CSS”選項卡中，還可使用向上鍵和向下鍵增加或減小數(shù)值。
搜索和保存更改
像 F12 工具中的其余選項卡一樣，你可以使用“搜索”框在“HTML”和“CSS”選項卡中搜索特定標(biāo)記、屬性、特性或值。單擊“搜索”按鈕時，將突出顯示搜索關(guān)鍵字的所有實(shí)例，并且窗格會滾動到顯示第一個匹配項。
如果存在多個匹配項，則可使用“下一個”和“上一個”按鈕向前和向后滾動。
你所做的更改（例如，調(diào)整框模型或添加特性）不是永久的。當(dāng)你在瀏覽器中重新加載頁面或?qū)Ш降狡渌W(wǎng)頁時，你所做的任何更改都會丟失。若要保存對 HTML/CSS 文件的本地副本的更改，請單擊左窗格上的“保存”按鈕。
