IE調試網頁之一：F12 開發人員工具簡介

　　F12 開發人員工具是可幫助生成和調試網頁的一套工具。

　　編寫出色的網頁需要編碼知識以及適當的工具來發現和調試難免會出現的問題。Windows Internet Explorer 9 提供所呈現代碼的視圖，F12 工具提供 Internet Explorer 9 如何在代碼級別上解釋這些頁面的視圖。F12 工具還幫助確定和報告有關頁面上元素的信息，如鏈接和圖像報告。

　　F12 工具的功能

　　分析 HTML 代碼時，通過 F12 工具看到的視圖就是 Internet Explorer 9 文檔對象模型 (DOM) 解釋頁面的實際方式，并不是原始的源代碼。這是要注意的一個重要區別。由于表示形式，最好是刷新 HTML 選項卡來獲取當前的 DOM，尤其是在使用動態元素時。

　　HTML 選項卡將在樹視圖中顯示網頁的動態標記。這與初始源代碼不同，在初始源代碼中，它反映 Internet Explorer 9 解釋初始標記代碼的方式以及加載頁面后對 DOM 所做的任何更改。需定期更新此視圖以反映對 DOM 所做的任何最新更改。

　　例如，如果使用腳本生成網頁，則查看源無法顯示實際顯示給用戶的內容。如果使用原始的源代碼，則可能需要花一些時間才能發現 HTML 或層疊樣式表 (CSS) CSS 呈現 Bug，但如果使用 F12 工具，則將會看到 Windows Internet Explorer 在 DOM 中解釋的實際代碼。

　　下面的示例演示了此行為。下面的代碼示例展示了源代碼和在網頁中動態創建元素時 Internet Explorer 解釋的生成代碼。

　　HTML

<!DOCTYPE html PUBLIC>
<html>
<head>
    <script type="text/javascript">
        function makePage() {
            for (var i = 1; i < 10; i++) {
                var myChild = document.createElement("div");
                var myDiv = document.getElementById("myCount");                
                myChild.appendChild(document.createTextNode("Number: " + i));                               
                myDiv.appendChild(myChild);
            }        
        }    
</script>
    <title>Dynamic page sample</title>
</head>
<body onload="makePage();">
<h1>Dynamic page sample</h1>
<div id="myCount"></div>
</body>
</html>

　　在通過 Internet Explorer 9 呈現上一示例時，其外觀類似于下面的屏幕截圖。該網頁顯示了一組帶文本的 "<div>" 元素（共 9 個）。

網頁的內置腳本的圖片

　　在查看源代碼時（在瀏覽器窗口中右鍵單擊，然后單擊“查看源文件” ），只能看到用作父元素的第一個 "<div>" 標記，而看不到任何其他內容。

動態頁的 HTML 源的圖片

　　但在 HTML 選項卡中進行查看時，則會看到父標記 ("<div >") 以及腳本添加的其他 "div" 元素和文本。在使用和更改腳本代碼時，按 F5 可刷新并獲取當前的 DOM 視圖。

動態生成的 HTML 代碼的 Dom 視圖的圖片

　　打開 F12 工具

　　在 Internet Explorer 9 中查看的任何頁面上都可以使用 F12 工具，方法是：按 F12 或單擊工具按鈕 Internet Explorer 工具按鈕的圖片，然后選擇“F12 工具”。F12 工具在一個單獨的窗口中打開，但可以通過單擊固定按鈕或按 Ctrl+P 將其固定到使用的頁面。請注意，在“腳本”選項卡（已單擊“開始調試”）上進行調試時，不能固定該窗口。

　　如果不需要完整的工具界面，則可在固定工具后單擊最小化按鈕或按 Ctrl+M。這些工具將在窗口底部顯示為一行，從而提供對“命令菜單”欄的訪問。

最小化的 F12 開發人員工具的圖片

　　在 F12 工具中導航網頁和代碼

　　F12 工具大致分為兩個區域，頁面和可視化工具以及代碼級別或調試工具。

　　大多數情況下，將使用主菜單或快捷鍵訪問頁面和可視化工具。這些工具可完成一些任務，例如，創建文檔中的所有鏈接的報告或以可視方式概述頁上某個特定元素。有關使用頁面和可視化工具、菜單以及按鈕的更多信息，請參閱 F12 開發人員工具入門。

　　可通過六個專用選項卡訪問代碼級別工具，這些選項卡提供了 HTML、CSS 和腳本調試以及代碼分析和網絡流量捕獲功能。“控制臺”選項卡提供用于接收和查看消息的方法，可使用控制臺命令從代碼內發送這些消息。

　　有關詳細信息，請參閱以下主題：

使用 F12 開發人員工具控制臺查看錯誤和狀態
使用 Internet Explorer 開發人員工具網絡捕獲

　　F12 工具中的許多工具和選項都與上下文相關，即在更改選項卡時，選項也將隨之更改。有些功能可用于所有工具。以下提示和技巧將有助于開始使用這些工具。

　　更改特性和變量

　　從 F12 工具的大部分視圖中，可以單擊特性和變量來更改值，然后鍵入新值。在 CSS 選項卡中，可以通過選中或清除復選框來切換樣式和規則。

　　搜索項

　　可以在“搜索”框中鍵入特定標記、ID、元素、變量或字符串，然后按 Enter 在網頁代碼或詳細信息中（如“腳本”選項卡上的屬性的擴展列表下）中查找對應的項。當前視圖中將突出顯示所有找到的項，可搜索除“控制臺”選項卡或“腳本”選項卡上的控制臺視圖之外的所有項。對于網絡選項卡，如果在“摘要”視圖中，則搜索將打開“詳細信息”視圖并顯示所有類別的搜索結果。在“腳本”選項卡中，還可以搜索要用于頁的所有腳本文件，而不只是搜索要顯示的腳本文件。

F12 工具搜索框的圖片

　　如果有多個命中結果，則可通過按 Enter 或 Shift+Enter，或者單擊“下一個”或“上一個”結果按鈕，在這些結果間進行導航。

F12 工具搜索的“下一個”按鈕和“上一個”按鈕的圖片

　　單擊選擇元素

　　若要在大型的 DOM 樹中查找特定的元素，則可以在瀏覽器中選擇各個元素，然后在 F12 工具的 HTML 選項卡中將它們突出顯示。從 F12 工具調試窗口中，單擊“單擊選擇元素”按鈕 “單擊選擇元素”按鈕的圖片或按 Ctrl+B 以便在懸停在頁面上方時在網頁上突出顯示元素。在單擊某個突出顯示的元素時，HTML 選項卡將打開，并在代碼窗格中滾動到所選元素。在某些情況下，可能需要刷新 HTML 選項卡才能看到此元素。

使用中的 F12 工具“單擊選擇元素”的圖片

posted @ 2013-02-05 15:42 artwl 閱讀(58077) 評論(0) 收藏舉報

刷新頁面返回頂部

個人簡介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"設計模式"
	],
	"hobby": [
		"閱讀", "旅游",
		"音樂", "電影"
	]
}

TOP

IE調試網頁之一：F12 開發人員工具簡介

公告

個人簡介