IE開發利器-IE10中的F12開發者工具

           在IE中開發網站一直是一個難題，因爲IE中一直缺少一個如firebug那樣的開發者測試工具，儘管有着IEtester這種可以查看IE各版本下網頁顯示情況的工具，但是卻不能像firebug那樣進行有效地查看代碼是如何在firefox中呈現的，但是現在我們有了IEF12開發者工具。分析 HTML 代碼時，通過 F12 工具看到的視圖就是 Internet Explorer 10 文檔對象模型 (DOM) 解釋頁面的實際方式，並不是原始的源代碼。我們利用腳本開發網站時，就可以看到IE解釋之後實際的代碼了。

F12開發者工具的功能

當在IE下開發時必不可少的工具，能夠快速調試 JavaScript、HTML 和CSS，還可以跟蹤並查明網頁或網絡的性能問題。

如何打開F12開發者工具

        想要用F12開發者工具，就得先知道咋打開它。在 Internet Explorer 10 中任何頁面上都可以使用 F12 工具，步驟如下：按 下F12 或單擊右上角的工具按鈕

 

然後選擇“F12開發者工具”選項。F12 工具默認是在一個單獨的窗口中打開

  ，但可以通過單擊固定按鈕

或按 Ctrl+P 將其固定到使用的頁面。請注意，在“腳本”選項卡（已單擊“開始調試”）上進行調試時，不能固定該窗口。

固定之後的樣子。。。感覺樣式還是太難看了。。。

如果不需要完整的工具界面，則可在固定工具後單擊最小化按鈕或按 Ctrl+M。這些工具將在窗口底部顯示爲一行，從而提供對“命令菜單”欄的訪問，請注意是在固定工具之後，如果F12工具此時在單獨的窗口，則Ctrl+M無效，再按一次Ctrl+M則工具還原爲完整的工具頁面。

如何使用F12工具

要想知道F12開發者工具如何使用，我們就得一步步來介紹面板上的各條菜單欄

"文件"菜單

（1）全部撤銷：當你對某個網頁做了大量的更改時，，卻發現讓頁面越來越糟糕，這個時候，你可以試試全部撤銷，他會重置對 Windows Internet Explorer 的當前實例的所有更改（如屬性值）並刷新網頁。好吧，我其實想說我總覺得這個和F5沒啥區別。。。

（2）自定義 Internet Explorer 查看源文件 ：說白了。。。就是定義網頁的源文件的打開方式。。。有三種第一種是使用IE內置的默認查看器，第二種使用記事本打開，第三種就是你可以瀏覽並指定計算機上安裝的其他編輯器或查看器應用程序來查看源文件。

（3）聯機幫助：會跳轉到F12開發者工具文檔頁面

（4）退出：按下F12就可以退出了。。。

"查找"菜單

       這個菜單裏只有一項就是單擊選擇元素，快捷鍵是Ctrl+B，在視圖工具欄裏一直存在，就是 ，當鼠標懸停在頁面上方時在網頁上突出顯示元素。在單擊某個突出顯示的元素時，HTML 選項卡將打開，並在代碼窗格中滾動到所選元素，並且會突出顯示該元素。細節窗格（右側窗格，本來想叫屬性窗格來着，但是IE已經把其中一個叫做屬性了。。。）會根據你選擇的當前細節類型（樣式、跟蹤樣式、佈局或屬性）顯示選定元素的細節。

"禁用"菜單

此菜單可幫助測試當用戶禁用其瀏覽器中的特定功能時，會在你的網站上獲得怎樣的用戶體驗。通過使用此菜單，你可以打開或關閉這些功能。

 （1）腳本：禁用網頁上的所有腳本。選定這個菜單之後後，頁面會刷新並禁用網頁上的所有腳本。如果“Internet  安全性”的“啓用保護模式”設置爲選中狀態，如下圖，

那麼命令不可用。若要使用此命令，就要打開上圖中這個“安全“選項卡，使“啓用保護模式”爲未選中狀態

（2）CSS：在網頁上禁用所有級聯樣式表 (CSS)。選定這個菜單後，頁面會刷新爲關閉 CSS。如果此時我們刷新網頁，或者開始調試刷新網頁的腳本，將重新啓用 CSS。

“查看”菜單

通過這個菜單就可以查看頁面上元素的相關信息。不過我覺得這個功能做的不是太好，因爲對於有些頁面來說元素實在是太密了。。。。

比如我相信沒有人願意在下面這個頁面裏來找東西， 

菜單項有以下這幾個：

（1）類和 ID 信息：快捷鍵是(Ctrl+I)，作用是顯示網頁上所有 HTML 元素的 ID 值。信息會覆蓋在頁面上對應的元素處。雙擊可以突出該信息。

（2）鏈接路徑：顯示網頁上所有鏈接的鏈接路徑。此信息會作爲文本覆蓋顯示在網頁元素上。雙擊可以突出該信息。按Ctrl+C即可複製。

（3）鏈接報告：生成位於該網頁上的所有鏈接的列表並在新窗口中顯示此列表。這樣，無需瀏覽整個 HTML 源文件，就可以輕鬆方便地檢查所有鏈接。

（4）選項卡索引：顯示頁面上選項卡索引已定義的元素的選項卡索引。

（5）訪問鍵：對於網頁上已定義其 accesskey 屬性的元素，將其accesskey顯示出來。

（6）源：子菜單如下。

源子菜單項	描述
帶有樣式的元素源	僅在新窗口中顯示選定元素的 HTML 源及其內容，以及適用於它的 CSS。這有助於只關注選定元素的源文件。必須首先選中某個 HTML 元素，然後纔可以執行此命令。
DOM（元素）	在新窗口中只顯示所選元素的 HTML 元素及其內容。請首先使用“HTML”選項卡視圖選擇 HTML 元素，然後纔可以執行此命令。
DOM（頁面）	在新窗口中顯示全部 HTML 源，從而顯示嵌套的元素。此源文件顯示頁面的文檔對象模型 (DOM) 結構，包括使用腳本動態寫入 DOM 中的源文件。
原始	在新窗口中顯示原始 HTML 源，腳本寫的不會顯示出來，和右鍵查看源文件是一樣的。

 

“圖像”菜單

此菜單提供的命令通過幫助你識別元素的大小和位置，可幫助你瞭解和調試頁面佈局。它還能幫助你通過基於元素類型的彩色編碼直觀地標識特定類型的所有元素。

（1）禁用圖像：刷新頁面但是不顯示任何圖像，並且同時還會禁用“顯示圖像文件大小”命令，當再次刷新之後圖像就會顯示出來了。

（2）顯示圖像分辨率：對於網頁上的所有圖像，將圖像分辨率顯示在圖片上。

（3）顯示圖像文件大小：對於網頁上的所有圖像，將圖像文件大小顯示爲文本覆蓋。文件大小以字節爲報告單位。如果使用“禁用圖像”命令，則禁用該命令。

（4）顯示圖像路徑：將所有的圖像其絕對路徑顯示在圖像上。

（5）查看 Alt 文本：有Alt文本的圖像會顯示其Alt文本（沒有的自然不會顯示）

（6）查看圖像報告：

這個菜單我沒有搞明白。。。因爲在我這裏會報錯

如下圖。。。我也不知道爲啥會出這個錯誤。。。如果知道的話，希望你告訴我。。。

“緩存”菜單

（1）始終從服務器中刷新：強制 IE始終從服務器獲取網頁內容而不是使用緩存的內容，也就是說當你使用該命令時，響應碼將會都是200而不是200和304共存，在你修改CSS文件時我覺得比較有效，不會出現文件中CSS代碼修改後因爲瀏覽器的緩存問題而讓人以爲修改的代碼沒有作用。另外需要注意的是此命令會持續有效，直到你將其清除或 Internet Explorer 實例關閉。

（2）清除瀏覽器緩存... (Ctrl+R)：刪除瀏覽器緩存以及所有臨時文件。

（3）清除此域的瀏覽器緩存... (Ctrl+B)：只刪除屬於當前域的瀏覽器緩存和所有臨時文件

（4）禁用 Cookie：禁止從此 Internet Explorer 實例使用所有 Cookie。此命令會持續有效，直到你將其清除或 Internet Explorer 實例關閉。

（5）清除會話 Cookie：刪除此瀏覽器會話期間獲取的所有 Cookie。

（6）清除域的 Cookie：刪除當前域中的所有 Cookie。

（7）查看 Cookie 信息：生成 IE中存儲的所有 Cookie 列表並在新窗口中顯示出來。

“工具”菜單

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

（1）調整大小：提供一個子菜單（其中提供了某些預先定義的屏幕大小）和一個用於自定義屏幕大小的選項。選定某個預定義屏幕大小後，Internet Explorer 窗口將會立即重新調整爲選定的尺寸。選擇自定義設置會打開一個對話框，你可以在其中輸入自己要測試的屏幕大小。自定義的設置關閉瀏覽器後仍然存在，以後想用還可以接着用。這個應該算是前端人員的一個好幫手。可以不用再去滿世界找不同的電腦看頁面跑不跑了。。

 

（2）更改用戶代理 (User-Agent) 頭信息：通常網站爲了使用戶的體驗基本一致，會在用戶訪問網站的時候，通過用戶代理 (User-Agent) 頭信息來判斷用戶所使用的瀏覽器。而在此處可以更改在請求網頁時發送到網站的用戶代理 (User-Agent) 頭信息。這裏面有一組預設的用戶代理 (User-Agent) 頭信息和一個自定義選項。自定義選項會顯示一個對話框，可在其中輸入自己的字符串。保存自定義項後，它們會出現在“更改用戶代理 (User-Agent) 頭信息”子菜單中。刷新網頁可使更改顯示出來。

比如：

當我把用戶代理 (User-Agent) 頭信息設置爲Opera的時候

此時，可以看到用戶代理 (User-Agent) 頭信息變爲了opera，儘管我的是IE10.。。

那麼對這種瀏覽器支持修改用戶代理 (User-Agent) 頭信息情況應該怎麼保證其體驗與其他用戶是一致的呢？我們已經沒辦法再用瀏覽器檢測的方式了，msdn上提供了一種方法，通過功能檢測來驗證對基於標準的功能的支持。

地址在這裏:http://msdn.microsoft.com/zh-cn/library/vstudio/hh273397.aspx

 

（3）導航時清除項：當你在調試會話中導航到新網頁時，使你可以清除或保持“控制檯”消息和“網絡”選項卡日誌。默認情況下，當你離開某個頁面時，Internet Explorer 會清除所有控制檯消息和網絡選項卡捕獲日誌。

（4）顯示標尺 (Ctrl+L)：允許你測量屏幕上的任意對象。“標尺”對話框打開時會顯示選項和工具的使用提示。支持多種顏色和多個標尺。爲了精確性，還提供了一個放大鏡。按CTRL+M 可打開或關閉放大鏡。標尺相對於屏幕上點的位置顯示標尺每一端的座標 ("x,y")，而長度以像素爲單位顯示在標尺的中間。當你將光標移到標尺上時，測量值還會顯示在“標尺”對話框的底部。可以對標尺進行移動、調整大小和調整角度。若要刪除某個標尺，請選中它並按Delete 鍵。關閉標尺對話框的話 將隱藏所有標尺。打開“標尺”對話框可以顯示它們。值得注意的是。。。當你最小化IE時，標尺仍然存在。。。

（5）顯示顏色選取器 (Ctrl+K)：顯示顏色選取器工具，以從頁面上的任何對象採集顏色樣本。“顏色選取器”對話框顯示選取器所在的顏色樣本。我最欣賞的就是這個能夠同時把顏色的 RGB 和 HEX 值都給我。。如下圖

 

（6）輪廓元素：通過使標識元素的大小和位置，幫助你瞭解和調試頁面佈局。你可以設置一種顏色來標識特定元素類型的所有元素。 可使用 CSS 選擇器語法在網頁上指定元素。例如，要突出顯示所有鏈接，請在選擇器字段中使用a，然後設置一種顏色。

 

“驗證”菜單

        此菜單使你可以使用 Web 上的驗證服務驗證當前網頁或計算機上的文件。會彈出一個對話框確認你是否要採取此操作；如果選否，驗證將會取消。

（1）HTML：在新窗口中驗證當前網頁的 HTML。

（2）CSS：在新窗口中驗證當前網頁的 CSS。

（3）源：在新窗口中驗證網頁的整合 (RSS) 源。

（4）鏈接：在新窗口驗證當前網頁中的所有鏈接。

（5）本地 HTML...：打開w3c的一個新窗口（網址是http://validator.w3.org/），該窗口的validate by File upload可以用來驗證html文件（當然你也可以直接往validate by Direct Input中直接寫Html）。

（6）本地 CSS...：和驗證Html的差不多，不過網址變成了http://jigsaw.w3.org/css-validator/

（7）輔助功能：裏面有兩項：

第一條是WCAG 清單即W3C 的 Web 內容輔助功能指南 (WCAG)。Web內容無障礙指南（WCAG）涵蓋範圍廣泛，涉及了一些建議，這些建議可使網站內容更容易訪問。遵循這些原則，web內容更易爲廣大殘疾人士所接受，。

第二條是第 508 條清單 這是美國政府關於創建可訪問網頁的輔助功能指南。

（8）多個驗證：你可以在一個請求中運行一個或多個驗證。選擇所需的驗證，然後單擊“確定”啓動請求。每個選擇都會打開一個新選項卡中幷包含產生的驗證結果。

 

 

“瀏覽器模式”菜單

       此命令使你能測試網頁在面向運行其他版本 Internet Explorer 的用戶時會如何操作。也就是說你可以查看IE 7,8,9,10和IE10兼容視圖這幾種瀏覽器模式，多厲害。。請記住當你選擇 某一瀏覽器模式時，則你的網頁將基於該瀏覽器呈現，並且將無法訪問只在新版本的 Internet Explorer 中提供的文檔模式。

“文檔模式”菜單

       你可以測試其他版本的 Internet Explorer 會如何解析你的頁面。對網頁所做的更改會影響該頁中的所有文檔，包括 iframe。

       瀏覽器模式和文檔模式有啥區別？簡單來說就是“瀏覽器模式”影響的是瀏覽器的版本及IE的條件註釋，“文檔模式”的切換會直接影響到頁面的渲染，具體的可以看一下這篇文章http://www.cnblogs.com/sniper007/archive/2012/11/05/2755170.html

選項卡

介紹完菜單欄，現在讓我們瞭解一下視圖工具欄

 

可以看到這裏是有6個選項卡，現在讓我來介紹一下他們的功能吧

Html選項卡

修改Html代碼和CSS代碼在F12開發者工具中是十分容易的，單擊一段代碼（不論是Html面板還是右面的細節面板中的CSS都可以點擊），之後你就可以更改它了，不過要注意，當你刷新之後，你所做的修改不會繼續生效的。

 

讓我來從左到右介紹一下：

（1）單擊選擇元素：快捷鍵是Ctrl+B這是每個選項卡上都有的，作用就是選擇頁面上的元素，之後元素的代碼會在下方的Html面板高亮顯示出來。右面的細節面板那裏會顯示樣式，跟蹤樣式，佈局以及屬性。

• 樣式 顯示你在樹視圖中選擇的元素的規則和樣式。它按規則進行組織，幷包含繼承的CSS和重寫的CSS。
• 跟蹤樣式 顯示與樣式相同的信息，但是按屬性而不是規則分組。
• 佈局 顯示所選元素的框模型。通過單擊圖表中的相應值，可更改“佈局”視圖中的任意值。
• 屬性 顯示選定元素的屬性，如 ID。可以添加或刪除屬性

（2）清除緩存：快捷鍵是Ctrl+R，作用是清除現有頁面的緩存下次刷新時將會從服務器處取得最新的網頁信息。同樣也是每個頁面上都有。

（3）保存：對元素進行了修改之後，使其保存下來

（4）刷新：就是F5罷了，不過當處於編輯狀態時，該按鈕不可用。

（5）“帶有樣式的元素源”按鈕：僅在新窗口中顯示選定元素的 HTML 源及其內容，以及適用於它的 CSS。這有助於只關注選定元素的源文件。必須首先使用“HTML”選項卡視圖選擇 DOM 樹的主體內的某個 HTML 元素，然後纔可以運行此命令。若要選擇某個元素，可單擊“單擊選擇元素”按鈕，或在 DOM 樹中單擊某個元素。

（6）編輯：對Html面板中的代碼進行編輯，當結束編輯時，再次按下該按鈕，則頁面按修改後的代碼進行顯示，不過刷新後修改就會消失，因此記得保存。

（7）自動換行：當點擊編輯按鈕之後，點擊這個按鈕就會對太長的Html代碼進行自動換行，其他時候該按鈕是不可用的。。。

CSS選項卡

這個選項卡和Html選項卡類似，

這裏唯一要注意的就是最右面的下拉列表，下拉列表中選項是由當前頁面所有用到的CSS組成的，在這裏選擇一個文件，然後就可以對CSS文件進行編輯了。

“CSS”選項卡上的快捷菜單選項

當你右鍵單擊“CSS”選項卡時，就可以打開快捷菜單。不過要注意，啓用的選項是上下文相關的，當你在不同區域點擊時，能使用的菜單項也不一樣

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

控制檯選項卡

這裏的按鈕只有兩個，就是單擊選擇元素和清除瀏覽器緩存

 

按下enter就可以運行自己的代碼

如何使用控制檯來輸入代碼，我們可以看看

http://msdn.microsoft.com/en-us/ie/gg589530(v=vs.85)

至於控制檯錯誤消息，可以看看這個網址。。。

http://msdn.microsoft.com/en-us/ie/hh180764(v=vs.85)

腳本選項卡

腳本選項卡幫助我們對網頁上的腳本進行檢查。通過文件源可以找到其他文件，並對他們進行操作。這個選項卡十分的像一個編譯器，在左面的頁邊單擊或行號上右鍵單擊點擊就可以設置斷點,在斷點上點擊就可以設置斷點條件。按F11就可以逐語句調試，按F10就可以逐過程調試。怎麼樣？？和VS的感覺是不是有點像？？

（1）單擊選擇元素：和上面的命令一致。

（2）清除瀏覽器緩存：和上面的命令是一致的。

（3）繼續：快捷鍵是F5，和我經常用的VS是一樣的。。。繼續執行，直到到達斷點或者出現錯誤。

（4）全部中斷：在下一條語句執行之前就立即中斷

（5）逐語句：就是F11，咋用都知道吧？？執行腳本的下一行，即使是在一個新的函數裏

（6）逐過程：F10。。。把子函數當做一步來執行

（7）跳出：用跳出就可以執行完子函數餘下部分，並返回到上一層函數。

（8）配置：這是一個下拉列表，其中我最喜歡的是格式化js代碼。

格式化之後看的就是舒服啊!!!!

下拉列表中的選項：

• 在未處理的異常處中斷： 如果異常沒有被處理那麼就中斷
• 在所有異常處中斷： 只要拋出異常就處理
• 異常後繼續： 跳過異常繼續執行
• 自動換行：一行裏的代碼太長，就讓其自動換行
• 格式化js代碼：讓js代碼更易讀

探查器選項卡

F12 開發人員工具提供了內置腳本探查器，你可以利用它分析在 IE10中運行的 JavaScript 代碼的性能。

探查器讓你能夠開始和停止分析，並提供了一些有關函數、函數的運行次數以及每個函數運行的時間的視圖或報告。

分析函數

當我們第一次使用“探查器”選項卡時，網格是空的。單擊“開始採樣”按鈕，然後運行你要在瀏覽器中分析的代碼。如果你要從網頁的初次加載開始，請單擊“刷新”以運行頁面上的代碼。在需要停止收集數據並查看結果時，單擊“停止採樣”。 要只分析某個代碼部分，要單擊“開始採樣”，僅在瀏覽器中運行相應的代碼部分（如從某個按鈕單擊調用的某個函數），然後再單擊“停止分析”。

查看分析報告

單擊“停止分析”之後，F12工具會自動生成報告。每個探查器會話都是一個獨立的報告，因此，你可以運行任意次數的分析（例如，針對腳本的多個部分）或修改值，以及再次分析相同部分。默認情況下僅顯示最新的探查器報告，但你可以單擊“當前報告”下拉列表來查看其他報告。

可以通過函數視圖或調用樹視圖這兩種方法查看報告。“函數”視圖按照函數運行順序顯示所有函數。“調用樹”視圖顯示函數的層次結構，以便你可以更輕鬆地查看父項和子項的關係。

網絡選項卡

通過顯示某個網頁的鏈接情況，網絡選項卡可以幫助我們分析網絡相關的各項情況，並且顯示不同連接的具體信息。”計時“這一項顯示了各項所用的時間，可以更快的找出錯誤位置。

 

摘要試圖

通過單擊開始捕獲按鈕來捕獲網頁連接網絡情況，點擊停止捕獲則不再捕獲。單擊轉到詳細視圖則跳轉到詳細視圖，通過對某一條目的雙擊，可以轉到該條目的詳細視圖。

詳細視圖

點擊上一步，下一步可以在不同條目中切換。

       IE的F12開發者工具並不只是這一點功能，還有許多功能可以讓人眼前一亮。所以，讓我們一起來發掘IEF12的用法吧。