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

時間 2020-05-24

原文原文鏈接

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

F12開發者工具的功能

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

如何打開F12開發者工具

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

而後選擇「F12開發者工具」選項。F12 工具默認是在一個單獨的窗口中打開前端

，但能夠經過單擊固定按鈕web

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

固定以後的樣子。。。感受樣式仍是太難看了。。。瀏覽器

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

如何使用F12工具安全

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

"文件"菜單cookie

在這個菜單下有以下的命令

（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）查看圖像報告：

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

以下圖。。。我也不知道爲啥會出這個錯誤。。。若是知道的話，但願你告訴我。。。

「緩存」菜單

在這個菜單中的菜單項主要和瀏覽器緩存和cookie有關

（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代碼進行自動換行，其餘時候該按鈕是不可用的。。。

在這裏的代碼會把<Iframe>中的代碼一併顯示出來，而在右鍵單擊菜單中的查看源後出來的源文件中則沒有<iframe>中的代碼...

注意這兩張圖片中iframe的不一樣處理方式。

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 代碼的性能。

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

分析函數

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