IE調(diào)試網(wǎng)頁(yè)之二：F12 開(kāi)發(fā)人員工具入門 (Windows)

　　F12 開(kāi)發(fā)人員工具的菜單和按鈕提供了可幫助你在該工具套件中導(dǎo)航的頁(yè)面和可視化工具。在這些工具中，你可以創(chuàng)建包含文檔中所有鏈接的報(bào)告列表、更改文檔模式或以可視方式繪制頁(yè)面上的特定元素的輪廓。

　　網(wǎng)頁(yè)工具

　　主菜單下有許多工具和選項(xiàng)。F12 工具套件中的許多工具對(duì)網(wǎng)頁(yè)或?yàn)g覽器自身進(jìn)行操作，或提供方法來(lái)獲取各種代碼視圖的選項(xiàng)和功能。下表概述了這些工具提供的菜單和選項(xiàng)。

　　“文件”菜單

菜單項(xiàng)	描述
全部撤消	重置對(duì) Windows Internet Explorer 的當(dāng)前實(shí)例的所有更改（如屬性值）并刷新網(wǎng)頁(yè)。
自定義 Internet Explorer 查看源文件	為你提供一個(gè)菜單，該菜單具有用于設(shè)置“查看源文件”查看器的以下選項(xiàng)：默認(rèn)查看器：使用具有代碼格式設(shè)置功能的內(nèi)置查看器。記事本：使用 Windows 記事本顯示源。其他：讓你可以瀏覽并指定計(jì)算機(jī)上安裝的其他編輯器或查看器應(yīng)用程序。
聯(lián)機(jī)幫助 (F1)	提供到該文檔的鏈接。
退出 (F12)	關(guān)閉 F12 工具。

　　“查找”菜單

　　“查找”菜單只有“單擊選擇元素”這一個(gè)菜單項(xiàng)。你可以從菜單項(xiàng)啟用該功能，方法是單擊“單擊選擇元素”按鈕 “單擊選擇元素”按鈕的圖片或按Ctrl+B。通過(guò)啟用此功能，你可以通過(guò)在網(wǎng)頁(yè)上單擊元素來(lái)選擇頁(yè)面上的元素。在網(wǎng)頁(yè)上單擊元素后，會(huì)在該元素周圍繪制一個(gè)邊框。如果“HTML”選項(xiàng)卡打開(kāi)，左窗格將滾動(dòng)到選定的元素，并突出顯示該元素。屬性窗格（右側(cè)窗格）會(huì)根據(jù)你選擇的當(dāng)前屬性類型（樣式、跟蹤樣式、布局或特性）顯示選定元素的屬性。如果“HTML”選項(xiàng)卡當(dāng)前沒(méi)有打開(kāi)，使用“單擊選擇元素”會(huì)選擇該元素，并自動(dòng)將焦點(diǎn)切換回“HTML”選項(xiàng)卡。在你單擊某個(gè)元素后，“單擊選擇元素”才會(huì)啟用。

通過(guò)單擊選擇的某個(gè)元素的圖片

　　“禁用”菜單

　　此菜單可幫助你測(cè)試當(dāng)用戶禁用其瀏覽器中的特定功能時(shí)，會(huì)在你的網(wǎng)站上獲得怎樣的用戶體驗(yàn)。通過(guò)使用此菜單，你可以打開(kāi)或關(guān)閉這些功能。

菜單項(xiàng)	描述
腳本	禁用網(wǎng)頁(yè)上的所有腳本。選定后，會(huì)設(shè)置該命令并且頁(yè)面會(huì)刷新。如果“Internet 安全性”的“保護(hù)模式”設(shè)置為“啟用”，則此命令不可用。若要使用此命令，請(qǐng)?jiān)凇癐nternet 選項(xiàng)”中的“安全”選項(xiàng)卡上，清除“啟用保護(hù)模式”。
彈出窗口阻止程序	禁用所有彈出窗口阻止程序以便在該網(wǎng)站上允許彈出窗口。
CSS	在網(wǎng)頁(yè)上禁用所有級(jí)聯(lián)樣式表 (CSS)。選定后，會(huì)設(shè)置該命令并且頁(yè)面會(huì)刷新為關(guān)閉 CSS。如果刷新網(wǎng)頁(yè)，或者開(kāi)始調(diào)試刷新網(wǎng)頁(yè)的腳本，將重新啟用 CSS。

　　“查看”菜單

　　此菜單使你不用首先在 HTML 樹(shù)或源文件中找到元素，就可以查看頁(yè)面上元素的相關(guān)信息。

菜單項(xiàng)	描述
類和 ID 信息 (Ctrl+I)	顯示網(wǎng)頁(yè)上所有 HTML 元素的 ID 值。在相應(yīng)的元素中，信息會(huì)作為覆蓋顯示在網(wǎng)頁(yè)上。雙擊覆蓋可突出顯示信息。按 Ctrl+C 即可復(fù)制。
鏈接路徑	顯示網(wǎng)頁(yè)上所有鏈接的鏈接路徑。此信息會(huì)作為文本覆蓋顯示在網(wǎng)頁(yè)元素上。雙擊覆蓋可突出顯示信息。按 Ctrl+C 即可復(fù)制。
鏈接報(bào)告	生成位于該網(wǎng)頁(yè)上的所有鏈接的列表并在新的 Internet Explorer 實(shí)例中報(bào)告此列表。這樣，無(wú)需瀏覽整個(gè) HTML 源文件，就可以輕松方便地檢查所有鏈接。
選項(xiàng)卡索引	對(duì)于定義其 tabindex 屬性的元素，將選項(xiàng)卡索引顯示為網(wǎng)頁(yè)上覆蓋的數(shù)量。
訪問(wèn)鍵	對(duì)于網(wǎng)頁(yè)上定義其 accesskey 屬性的元素，將訪問(wèn)鍵顯示為覆蓋。
源	查看菜單的子菜單，描述顯示在下表中。

源子菜單項(xiàng)	描述
帶有樣式的元素源	僅在新窗口中顯示選定元素的 HTML 源及其內(nèi)容，以及適用于它的 CSS。這有助于只關(guān)注選定元素的源文件。必須首先使用“HTML”選項(xiàng)卡視圖選擇 HTML 樹(shù)的主體內(nèi)的某個(gè) HTML 元素，然后才可以執(zhí)行此命令。若要選擇某個(gè)元素，可使用“單擊選擇元素”命令，或在 HTML 樹(shù)中單擊某個(gè)元素。
DOM（元素）	在新窗口中只顯示所選元素的 HTML 元素及其內(nèi)容。必須首先使用“HTML”選項(xiàng)卡視圖選擇 HTML 元素，然后才可以執(zhí)行此命令。若要選擇某個(gè)元素，請(qǐng)使用“單擊選擇元素”命令。
DOM（頁(yè)面）	在新窗口中顯示全部 HTML 源，從而顯示嵌套的元素。此源文件顯示頁(yè)面的文檔對(duì)象模型 (DOM) 結(jié)構(gòu)，包括使用由 Internet Explorer 表示的腳本動(dòng)態(tài)寫入 DOM 中的源文件。
原始	在新窗口中顯示原始 HTML 源。

　　“圖像”菜單

　　此菜單提供的命令通過(guò)幫助你識(shí)別元素的大小和位置，可幫助你了解和調(diào)試頁(yè)面布局。它還能幫助你通過(guò)基于元素類型的彩色編碼直觀地標(biāo)識(shí)特定類型的所有元素。

菜單項(xiàng)	描述
禁用圖像	關(guān)閉網(wǎng)頁(yè)上所有圖像的呈現(xiàn)。此命令會(huì)使網(wǎng)頁(yè)刷新但不顯示任何圖像，并且還會(huì)禁用“顯示圖像文件大小”命令。
顯示圖像尺寸	對(duì)于網(wǎng)頁(yè)上的所有圖像，將圖像尺寸顯示為文本覆蓋。
顯示圖像文件大小	對(duì)于網(wǎng)頁(yè)上的所有圖像，將圖像文件大小顯示為文本覆蓋。文件大小以字節(jié)為報(bào)告單位。如果使用“禁用圖像”命令，則禁用該命令。
顯示圖像路徑	對(duì)于網(wǎng)頁(yè)上的所有圖像，將圖像絕對(duì)路徑顯示為覆蓋。
查看 Alt 文本	顯示定義其 alt 特性的所有圖像的替代文本。對(duì)于未定義 alt 特性的圖像，則不會(huì)顯示覆蓋。
查看圖像報(bào)告	在當(dāng)前網(wǎng)頁(yè)上生成正文代碼中定義的所有圖像列表，并在新的 Internet Explorer 選項(xiàng)卡中顯示此列表。此列表不包括使用 CSS 加載的圖像（如 "background-image:url()"）。

　　“緩存”菜單

菜單項(xiàng)	描述
始終從服務(wù)器中刷新	強(qiáng)制 Internet Explorer 始終從服務(wù)器獲取網(wǎng)頁(yè)內(nèi)容而不是使用緩存的內(nèi)容。此命令會(huì)持續(xù)有效，直到你將其清除或 Internet Explorer 實(shí)例關(guān)閉。
清除瀏覽器緩存... (Ctrl+R)	刪除瀏覽器緩存以及所有臨時(shí)文件。
清除此域的瀏覽器緩存... (Ctrl+B)	只刪除屬于當(dāng)前域的瀏覽器緩存和所有臨時(shí)文件
禁用 Cookie	禁止從此 Internet Explorer 實(shí)例使用所有 Cookie。此命令會(huì)持續(xù)有效，直到你將其清除或 Internet Explorer 實(shí)例關(guān)閉。
清除會(huì)話 Cookie	刪除此瀏覽器會(huì)話期間獲取的所有 Cookie。
清除域的 Cookie	刪除當(dāng)前域中的所有 Cookie。
查看 Cookie 信息	生成 Internet Explorer 中存儲(chǔ)的所有 Cookie 列表并在新的 Internet Explorer 實(shí)例中報(bào)告此列表。請(qǐng)參閱有關(guān)如何使用 Cookie 的 cookie property 參考。

　　“工具”菜單

　　此菜單提供了各種能幫助你完成常見(jiàn)任務(wù)的工具，如使用不同的分辨率測(cè)試網(wǎng)站、更改用戶代理 (User-Agent) 頭信息、測(cè)量頁(yè)面面積和捕獲頁(yè)面上某一點(diǎn)的具體顏色。

菜單項(xiàng)	描述
調(diào)整大小	提供一個(gè)子菜單（其中提供了某些預(yù)先定義的屏幕大小）和一個(gè)用于自定義屏幕大小的選項(xiàng)。選定某個(gè)預(yù)定義屏幕大小后，Internet Explorer 窗口將會(huì)立即重新調(diào)整為選定的尺寸。該子菜單提供四個(gè)預(yù)設(shè)大小（具有快捷鍵）和一個(gè)自定義設(shè)置。　　800x600Ctrl+Shift+1 　　1024x768Ctrl+Shift+2 　　1280x768Ctrl+Shift+3 　　1280x1024Ctrl+Shift+4 　　自定義（無(wú)快捷鍵）　　自定義設(shè)置會(huì)打開(kāi)一個(gè)對(duì)話框，你可以在其中輸入自己要測(cè)試的屏幕大小。自定義條目在你關(guān)閉瀏覽器后仍然存在，以便你可以在以后的測(cè)試會(huì)話中再次使用它們。
更改用戶代理 (User-Agent) 頭信息	讓你可以更改在請(qǐng)求網(wǎng)頁(yè)時(shí)發(fā)送到網(wǎng)站的用戶代理 (User-Agent) 頭信息。有一組預(yù)設(shè)的用戶代理 (User-Agent) 頭信息和一個(gè)自定義選項(xiàng)。自定義選項(xiàng)會(huì)顯示一個(gè)對(duì)話框，可在其中輸入自己的字符串。保存自定義項(xiàng)后，它們會(huì)出現(xiàn)在“更改用戶代理 (User-Agent) 頭信息”子菜單中。刷新網(wǎng)頁(yè)可使更改顯示出來(lái)。請(qǐng)注意，更改文檔模式會(huì)覆蓋自定義的用戶代理設(shè)置。
導(dǎo)航時(shí)清除項(xiàng)	當(dāng)你在調(diào)試會(huì)話中導(dǎo)航到新網(wǎng)頁(yè)時(shí)，使你可以清除或保持“控制臺(tái)”消息和“網(wǎng)絡(luò)”選項(xiàng)卡日志。默認(rèn)情況下，當(dāng)你離開(kāi)某個(gè)頁(yè)面時(shí)，Internet Explorer 會(huì)清除所有控制臺(tái)消息和網(wǎng)絡(luò)選項(xiàng)卡捕獲日志。
顯示標(biāo)尺 (Ctrl+L)	允許你測(cè)量屏幕上的任意對(duì)象。“標(biāo)尺”對(duì)話框打開(kāi)時(shí)會(huì)顯示選項(xiàng)和工具的使用提示。支持多種顏色和多個(gè)標(biāo)尺。為了精確性，還提供了一個(gè)放大鏡。按 CTRL+M 可打開(kāi)或關(guān)閉放大鏡。標(biāo)尺相對(duì)于屏幕上點(diǎn)的位置顯示標(biāo)尺每一端的坐標(biāo) ("x，y")，而長(zhǎng)度以像素為單位顯示在標(biāo)尺的中間。當(dāng)你將光標(biāo)移到標(biāo)尺上時(shí)，測(cè)量值還會(huì)顯示在“標(biāo)尺”對(duì)話框的底部。可以對(duì)標(biāo)尺進(jìn)行移動(dòng)、調(diào)整大小和調(diào)整角度。若要?jiǎng)h除某個(gè)標(biāo)尺，請(qǐng)選擇它并按 Delete 鍵。完成后，單擊右上角的 X 按鈕可關(guān)閉該對(duì)話框。關(guān)閉該對(duì)話框?qū)㈦[藏所有標(biāo)尺。打開(kāi)“標(biāo)尺”對(duì)話框可以顯示它們。
顯示顏色選取器 (Ctrl+K)	顯示顏色選取器工具，以從頁(yè)面上的任何對(duì)象采集顏色樣本。“顏色選取器”對(duì)話框顯示選取器所在的顏色樣本。顏色選取器還會(huì)顯示顏色的 RGB 和 HEX 值。若要查看網(wǎng)頁(yè)上使用的顏色值，請(qǐng)使用取色器光標(biāo)單擊感興趣的顏色。單擊“復(fù)制并關(guān)閉”可將該值得到剪貼板，以在你的網(wǎng)頁(yè)中使用。單擊 X 按鈕或此菜單上的“隱藏顏色選取器”可關(guān)閉對(duì)話框。
輪廓元素	通過(guò)使標(biāo)識(shí)元素的大小和位置變得更加輕松，幫助你了解和調(diào)試頁(yè)面布局。你可以設(shè)置一種顏色來(lái)標(biāo)識(shí)特定元素類型的所有元素。可使用 CSS 選擇器語(yǔ)法在網(wǎng)頁(yè)上指定元素。例如，要突出顯示所有段落，請(qǐng)?jiān)谶x擇器字段中使用 p，然后設(shè)置一種顏色。有關(guān)使用選擇器的詳細(xì)信息，請(qǐng)參閱了解 CSS 選擇器。

　　“驗(yàn)證”菜單

　　此菜單使你可以使用 Web 上的驗(yàn)證服務(wù)驗(yàn)證當(dāng)前網(wǎng)頁(yè)或計(jì)算機(jī)上的文件。有一個(gè)對(duì)話框確認(rèn)你要采取此操作；否則，請(qǐng)求將取消。

菜單項(xiàng)	描述
HTML	驗(yàn)證當(dāng)前網(wǎng)頁(yè)的 HTML。驗(yàn)證的報(bào)告將顯示在新窗口中。
CSS	驗(yàn)證當(dāng)前網(wǎng)頁(yè)的 CSS。驗(yàn)證的報(bào)告將顯示在新窗口中。
源	驗(yàn)證網(wǎng)頁(yè)的真正簡(jiǎn)單的整合 (RSS) 源。驗(yàn)證的報(bào)告將顯示在新窗口中。
鏈接	驗(yàn)證當(dāng)前網(wǎng)頁(yè)中的所有鏈接。驗(yàn)證的報(bào)告將顯示在新窗口中。
本地 HTML...	打開(kāi)一個(gè)新窗口，該窗口有一個(gè)在計(jì)算機(jī)上選擇要驗(yàn)證的 HTML 文件的選項(xiàng)。
本地 CSS...	打開(kāi)一個(gè)新窗口，該窗口有一個(gè)在本地計(jì)算機(jī)上選擇要驗(yàn)證的 CSS 文件的選項(xiàng)。
輔助功能	允許訪問(wèn)以下輔助功能驗(yàn)證程序：　　WCAG 清單W3C 的 Web 內(nèi)容輔助功能指南 (WCAG)。它為創(chuàng)建可訪問(wèn)網(wǎng)頁(yè)定義了指南。　　第 508 條清單美國(guó)政府關(guān)于創(chuàng)建可訪問(wèn)網(wǎng)頁(yè)的輔助功能指南。
多個(gè)驗(yàn)證	你可以在一個(gè)請(qǐng)求中運(yùn)行一個(gè)或多個(gè)驗(yàn)證。選擇所需的驗(yàn)證，然后單擊“確定”啟動(dòng)請(qǐng)求。你將只看到一個(gè)對(duì)話框，確認(rèn)你要將此頁(yè)面發(fā)送到另一個(gè)網(wǎng)站進(jìn)行驗(yàn)證。每個(gè)選擇都會(huì)在一個(gè)新選項(xiàng)卡中打開(kāi)并包含產(chǎn)生的驗(yàn)證結(jié)果。

　　“瀏覽器模式”菜單

　　此命令使你能測(cè)試網(wǎng)頁(yè)在面向運(yùn)行其他版本 Internet Explorer 的用戶時(shí)會(huì)如何操作。例如，如果你選擇 Windows Internet Explorer 7 瀏覽器模式，則你的網(wǎng)頁(yè)將基于該瀏覽器呈現(xiàn)，并且將無(wú)法訪問(wèn)只在新版本的 Internet Explorer 中提供的文檔模式。

菜單項(xiàng)	描述
Internet Explorer 7	Internet Explorer 7 瀏覽器模式。
Windows Internet Explorer 8	Internet Explorer 8 瀏覽器模式。
Windows Internet Explorer 9	Internet Explorer 9 瀏覽器模式。這會(huì)啟用 HTML5、CSS3 和 Internet Explorer 9 支持的其他標(biāo)準(zhǔn)。
Internet Explorer 9 兼容性視圖	測(cè)試當(dāng)用戶選擇“兼容性視圖”選項(xiàng)時(shí) Internet Explorer 9 用戶如何體驗(yàn)?zāi)愕木W(wǎng)頁(yè)。

　　“文檔模式”菜單

　　此命令使你可以測(cè)試其他版本的 Internet Explorer 會(huì)如何解析你的頁(yè)面。對(duì)網(wǎng)頁(yè)所做的更改會(huì)影響該頁(yè)中的所有文檔，包括 iframe。

菜單項(xiàng)	描述
Quirks 模式 (Alt+Q)	該行為與呈現(xiàn)無(wú)文檔類型或文檔類型為 Quirks 時(shí) Internet Explorer 的行為匹配。作用與 Internet Explorer 7 或 Internet Explorer 8 的 Quirks 模式相同。
Internet Explorer 7 標(biāo)準(zhǔn) (Alt+7)	該行為與呈現(xiàn)具有嚴(yán)格文檔類型或未知文檔類型時(shí) Internet Explorer 7 的行為匹配。
Internet Explorer 8 標(biāo)準(zhǔn) (Alt+8)	這是呈現(xiàn)具有嚴(yán)格文檔類型或未知文檔類型時(shí) Internet Explorer 8 中可用的符合大多數(shù)標(biāo)準(zhǔn)的行為。
Internet Explorer 9 標(biāo)準(zhǔn) (Alt+9)	這是 Internet Explorer 9 中可用的符合大多數(shù)標(biāo)準(zhǔn)的行為。

posted @ 2013-02-19 15:01 artwl 閱讀(16014) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

個(gè)人簡(jiǎn)介

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

TOP

IE調(diào)試網(wǎng)頁(yè)之二：F12 開(kāi)發(fā)人員工具入門 (Windows)

公告

個(gè)人簡(jiǎn)介