版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
想要用F12開發(fā)者工具，就得先知道咋打開它。在 Internet Explorer 10 中任何頁面上都可以使用 F12 工具，步驟如下：按 下F12 或單擊右上角的工具按鈕
然后選擇“F12開發(fā)者工具”選項。F12 工具默認(rèn)是在一個單獨的窗口中打開
，但可以通過單擊固定按鈕
或按 Ctrl+P 將其固定到使用的頁面。請注意，在“腳本”選項卡（已單擊“開始調(diào)試”）上進行調(diào)試時，不能固定該窗口。
固定之后的樣子。。。感覺樣式還是太難看了。。。
如果不需要完整的工具界面，則可在固定工具后單擊最小化按鈕或按 Ctrl+M。這些工具將在窗口底部顯示為一行，從而提供對“命令菜單”欄的訪問，請注意是在固定工具之后，如果F12工具此時在單獨的窗口，則Ctrl+M無效，再按一次Ctrl+M則工具還原為完整的工具頁面。
如何使用F12工具
要想知道F12開發(fā)者工具如何使用，我們就得一步步來介紹面板上的各條菜單欄
"文件"菜單
（1）全部撤銷：當(dāng)你對某個網(wǎng)頁做了大量的更改時，，卻發(fā)現(xiàn)讓頁面越來越糟糕，這個時候，你可以試試全部撤銷，他會重置對 Windows Internet Explorer 的當(dāng)前實例的所有更改（如屬性值）并刷新網(wǎng)頁。好吧，我其實想說我總覺得這個和F5沒啥區(qū)別。。。
（2）自定義 Internet Explorer 查看源文件 ：說白了。。。就是定義網(wǎng)頁的源文件的打開方式。。。有三種第一種是使用IE內(nèi)置的默認(rèn)查看器，第二種使用記事本打開，第三種就是你可以瀏覽并指定計算機上安裝的其他編輯器或查看器應(yīng)用程序來查看源文件。
（3）聯(lián)機幫助：會跳轉(zhuǎn)到F12開發(fā)者工具文檔頁面
（4）退出：按下F12就可以退出了。。。
此菜單可幫助測試當(dāng)用戶禁用其瀏覽器中的特定功能時，會在你的網(wǎng)站上獲得怎樣的用戶體驗。通過使用此菜單，你可以打開或關(guān)閉這些功能。
菜單項有以下這幾個：
（1）類和 ID 信息：快捷鍵是(Ctrl+I)，作用是顯示網(wǎng)頁上所有 HTML 元素的 ID 值。信息會覆蓋在頁面上對應(yīng)的元素處。雙擊可以突出該信息。
（2）鏈接路徑：顯示網(wǎng)頁上所有鏈接的鏈接路徑。此信息會作為文本覆蓋顯示在網(wǎng)頁元素上。雙擊可以突出該信息。按Ctrl+C即可復(fù)制。
（3）鏈接報告：生成位于該網(wǎng)頁上的所有鏈接的列表并在新窗口中顯示此列表。這樣，無需瀏覽整個 HTML 源文件，就可以輕松方便地檢查所有鏈接。
（4）選項卡索引：顯示頁面上選項卡索引已定義的元素的選項卡索引。
（5）訪問鍵：對于網(wǎng)頁上已定義其 accesskey 屬性的元素，將其accesskey顯示出來。
（6）源：子菜單如下。
| 源子菜單項 | 描述 |
|---|---|
| 帶有樣式的元素源 | 僅在新窗口中顯示選定元素的 HTML 源及其內(nèi)容，以及適用于它的 CSS。這有助于只關(guān)注選定元素的源文件。必須首先選中某個 HTML 元素，然后才可以執(zhí)行此命令。 |
| DOM（元素） | 在新窗口中只顯示所選元素的 HTML 元素及其內(nèi)容。請首先使用“HTML”選項卡視圖選擇 HTML 元素，然后才可以執(zhí)行此命令。 |
| DOM（頁面） | 在新窗口中顯示全部 HTML 源，從而顯示嵌套的元素。此源文件顯示頁面的文檔對象模型 (DOM) 結(jié)構(gòu)，包括使用腳本動態(tài)寫入 DOM 中的源文件。 |
| 原始 | 在新窗口中顯示原始 HTML 源，腳本寫的不會顯示出來，和右鍵查看源文件是一樣的。 |
此菜單提供的命令通過幫助你識別元素的大小和位置，可幫助你了解和調(diào)試頁面布局。它還能幫助你通過基于元素類型的彩色編碼直觀地標(biāo)識特定類型的所有元素。
（1）禁用圖像：刷新頁面但是不顯示任何圖像，并且同時還會禁用“顯示圖像文件大小”命令，當(dāng)再次刷新之后圖像就會顯示出來了。
（2）顯示圖像分辨率：對于網(wǎng)頁上的所有圖像，將圖像分辨率顯示在圖片上。
（3）顯示圖像文件大?。簩τ诰W(wǎng)頁上的所有圖像，將圖像文件大小顯示為文本覆蓋。文件大小以字節(jié)為報告單位。如果使用“禁用圖像”命令，則禁用該命令。
（4）顯示圖像路徑：將所有的圖像其絕對路徑顯示在圖像上。
（5）查看 Alt 文本：有Alt文本的圖像會顯示其Alt文本（沒有的自然不會顯示）
（6）查看圖像報告：
這個菜單我沒有搞明白。。。因為在我這里會報錯
如下圖。。。我也不知道為啥會出這個錯誤。。。如果知道的話，希望你告訴我。。。
此菜單提供了各種能幫助你完成常見任務(wù)的工具，如使用不同的分辨率測試網(wǎng)站、更改用戶代理 (User-Agent) 頭信息、測量頁面面積和捕獲頁面上某一點的具體顏色。
（1）調(diào)整大?。禾峁┮粋€子菜單（其中提供了某些預(yù)先定義的屏幕大?。┖鸵粋€用于自定義屏幕大小的選項。選定某個預(yù)定義屏幕大小后，Internet Explorer 窗口將會立即重新調(diào)整為選定的尺寸。選擇自定義設(shè)置會打開一個對話框，你可以在其中輸入自己要測試的屏幕大小。自定義的設(shè)置關(guān)閉瀏覽器后仍然存在，以后想用還可以接著用。這個應(yīng)該算是前端人員的一個好幫手?？梢圆挥迷偃M世界找不同的電腦看頁面跑不跑了。。
（2）更改用戶代理 (User-Agent) 頭信息：通常網(wǎng)站為了使用戶的體驗基本一致，會在用戶訪問網(wǎng)站的時候，通過用戶代理 (User-Agent) 頭信息來判斷用戶所使用的瀏覽器。而在此處可以更改在請求網(wǎng)頁時發(fā)送到網(wǎng)站的用戶代理 (User-Agent) 頭信息。這里面有一組預(yù)設(shè)的用戶代理 (User-Agent) 頭信息和一個自定義選項。自定義選項會顯示一個對話框，可在其中輸入自己的字符串。保存自定義項后，它們會出現(xiàn)在“更改用戶代理 (User-Agent) 頭信息”子菜單中。刷新網(wǎng)頁可使更改顯示出來。
比如：
當(dāng)我把用戶代理 (User-Agent) 頭信息設(shè)置為Opera的時候
此時，可以看到用戶代理 (User-Agent) 頭信息變?yōu)榱薿pera，盡管我的是IE10.。。
那么對這種瀏覽器支持修改用戶代理 (User-Agent) 頭信息情況應(yīng)該怎么保證其體驗與其他用戶是一致的呢？我們已經(jīng)沒辦法再用瀏覽器檢測的方式了，msdn上提供了一種方法，通過功能檢測來驗證對基于標(biāo)準(zhǔn)的功能的支持。
地址在這里:http://msdn.microsoft.com/zh-cn/library/vstudio/hh273397.aspx
（3）導(dǎo)航時清除項：當(dāng)你在調(diào)試會話中導(dǎo)航到新網(wǎng)頁時，使你可以清除或保持“控制臺”消息和“網(wǎng)絡(luò)”選項卡日志。默認(rèn)情況下，當(dāng)你離開某個頁面時，Internet Explorer 會清除所有控制臺消息和網(wǎng)絡(luò)選項卡捕獲日志。
（4）顯示標(biāo)尺 (Ctrl+L)：允許你測量屏幕上的任意對象?！皹?biāo)尺”對話框打開時會顯示選項和工具的使用提示。支持多種顏色和多個標(biāo)尺。為了精確性，還提供了一個放大鏡。按CTRL+M 可打開或關(guān)閉放大鏡。標(biāo)尺相對于屏幕上點的位置顯示標(biāo)尺每一端的坐標(biāo) ("x,y")，而長度以像素為單位顯示在標(biāo)尺的中間。當(dāng)你將光標(biāo)移到標(biāo)尺上時，測量值還會顯示在“標(biāo)尺”對話框的底部?？梢詫?biāo)尺進行移動、調(diào)整大小和調(diào)整角度。若要刪除某個標(biāo)尺，請選中它并按Delete 鍵。關(guān)閉標(biāo)尺對話框的話 將隱藏所有標(biāo)尺。打開“標(biāo)尺”對話框可以顯示它們。值得注意的是。。。當(dāng)你最小化IE時，標(biāo)尺仍然存在。。。
（5）顯示顏色選取器 (Ctrl+K)：顯示顏色選取器工具，以從頁面上的任何對象采集顏色樣本?！邦伾x取器”對話框顯示選取器所在的顏色樣本。我最欣賞的就是這個能夠同時把顏色的 RGB 和 HEX 值都給我。。如下圖
（6）輪廓元素：通過使標(biāo)識元素的大小和位置，幫助你了解和調(diào)試頁面布局。你可以設(shè)置一種顏色來標(biāo)識特定元素類型的所有元素。 可使用 CSS 選擇器語法在網(wǎng)頁上指定元素。例如，要突出顯示所有鏈接，請在選擇器字段中使用a，然后設(shè)置一種顏色。
此菜單使你可以使用 Web 上的驗證服務(wù)驗證當(dāng)前網(wǎng)頁或計算機上的文件。會彈出一個對話框確認(rèn)你是否要采取此操作；如果選否，驗證將會取消。
（1）HTML：在新窗口中驗證當(dāng)前網(wǎng)頁的 HTML。
（2）CSS：在新窗口中驗證當(dāng)前網(wǎng)頁的 CSS。
（3）源：在新窗口中驗證網(wǎng)頁的整合 (RSS) 源。
（4）鏈接：在新窗口驗證當(dāng)前網(wǎng)頁中的所有鏈接。
（5）本地 HTML...：打開w3c的一個新窗口（網(wǎng)址是http://validator.w3.org/），該窗口的validate by File upload可以用來驗證html文件（當(dāng)然你也可以直接往validate by Direct Input中直接寫Html）。
（6）本地 CSS...：和驗證Html的差不多，不過網(wǎng)址變成了http://jigsaw.w3.org/css-validator/
（7）輔助功能：里面有兩項：
此命令使你能測試網(wǎng)頁在面向運行其他版本 Internet Explorer 的用戶時會如何操作。也就是說你可以查看IE 7,8,9,10和IE10兼容視圖這幾種瀏覽器模式，多厲害。。請記住當(dāng)你選擇 某一瀏覽器模式時，則你的網(wǎng)頁將基于該瀏覽器呈現(xiàn)，并且將無法訪問只在新版本的 Internet Explorer 中提供的文檔模式。
你可以測試其他版本的 Internet Explorer 會如何解析你的頁面。對網(wǎng)頁所做的更改會影響該頁中的所有文檔，包括 iframe。
瀏覽器模式和文檔模式有啥區(qū)別？簡單來說就是“瀏覽器模式”影響的是瀏覽器的版本及IE的條件注釋，“文檔模式”的切換會直接影響到頁面的渲染，具體的可以看一下這篇文章http://www.cnblogs.com/sniper007/archive/2012/11/05/2755170.html
選項卡
介紹完菜單欄，現(xiàn)在讓我們了解一下視圖工具欄
可以看到這里是有6個選項卡，現(xiàn)在讓我來介紹一下他們的功能吧
Html選項卡
修改Html代碼和CSS代碼在F12開發(fā)者工具中是十分容易的，單擊一段代碼（不論是Html面板還是右面的細(xì)節(jié)面板中的CSS都可以點擊），之后你就可以更改它了，不過要注意，當(dāng)你刷新之后，你所做的修改不會繼續(xù)生效的。
讓我來從左到右介紹一下：
（1）單擊選擇元素：快捷鍵是Ctrl+B這是每個選項卡上都有的，作用就是選擇頁面上的元素，之后元素的代碼會在下方的Html面板高亮顯示出來。右面的細(xì)節(jié)面板那里會顯示樣式，跟蹤樣式，布局以及屬性。
（2）清除緩存：快捷鍵是Ctrl+R，作用是清除現(xiàn)有頁面的緩存下次刷新時將會從服務(wù)器處取得最新的網(wǎng)頁信息。同樣也是每個頁面上都有。
（3）保存：對元素進行了修改之后，使其保存下來
（4）刷新：就是F5罷了，不過當(dāng)處于編輯狀態(tài)時，該按鈕不可用。
（5）“帶有樣式的元素源”按鈕：僅在新窗口中顯示選定元素的 HTML 源及其內(nèi)容，以及適用于它的 CSS。這有助于只關(guān)注選定元素的源文件。必須首先使用“HTML”選項卡視圖選擇 DOM 樹的主體內(nèi)的某個 HTML 元素，然后才可以運行此命令。若要選擇某個元素，可單擊“單擊選擇元素”按鈕，或在 DOM 樹中單擊某個元素。
（6）編輯：對Html面板中的代碼進行編輯，當(dāng)結(jié)束編輯時，再次按下該按鈕，則頁面按修改后的代碼進行顯示，不過刷新后修改就會消失，因此記得保存。
（7）自動換行：當(dāng)點擊編輯按鈕之后，點擊這個按鈕就會對太長的Html代碼進行自動換行，其他時候該按鈕是不可用的。。。
CSS選項卡
這個選項卡和Html選項卡類似，
這里唯一要注意的就是最右面的下拉列表，下拉列表中選項是由當(dāng)前頁面所有用到的CSS組成的，在這里選擇一個文件，然后就可以對CSS文件進行編輯了。
當(dāng)你右鍵單擊“CSS”選項卡時，就可以打開快捷菜單。不過要注意，啟用的選項是上下文相關(guān)的，當(dāng)你在不同區(qū)域點擊時，能使用的菜單項也不一樣
| 菜單項 | 作用 | 右鍵單擊的位置 |
|---|---|---|
| 添加屬性 | 向標(biāo)記或元素中添加新的屬性。 | 在規(guī)則或?qū)傩裕ㄈ魏卧兀┥稀?/td> |
| 添加規(guī)則 | 添加選擇器、聲明或樣式。 | 在白色區(qū)域中，而不是在現(xiàn)有元素上。 |
| 之后添加規(guī)則 | 在當(dāng)前規(guī)則之后添加選擇器或規(guī)則。 | 在任何元素上。 |
| 之前添加規(guī)則 | 在當(dāng)前規(guī)則之前添加選擇器或規(guī)則。 | 在任何元素上。 |
| 刪除屬性。 | 刪除選定的屬性。 | 在任何特性上。 |
| 刪除規(guī)則 | 刪除選定的規(guī)則和所有相關(guān)的屬性。 | 在任何規(guī)則或選擇器上。 |
這里的按鈕只有兩個，就是單擊選擇元素和清除瀏覽器緩存
探查器選項卡
F12 開發(fā)人員工具提供了內(nèi)置腳本探查器，你可以利用它分析在 IE10中運行的 JavaScript 代碼的性能。
探查器讓你能夠開始和停止分析，并提供了一些有關(guān)函數(shù)、函數(shù)的運行次數(shù)以及每個函數(shù)運行的時間的視圖或報告。
分析函數(shù)
當(dāng)我們第一次使用“探查器”選項卡時，網(wǎng)格是空的。單擊“開始采樣”按鈕，然后運行你要在瀏覽器中分析的代碼。如果你要從網(wǎng)頁的初次加載開始，請單擊“刷新”以運行頁面上的代碼。在需要停止收集數(shù)據(jù)并查看結(jié)果時，單擊“停止采樣”。 要只分析某個代碼部分，要單擊“開始采樣”，僅在瀏覽器中運行相應(yīng)的代碼部分（如從某個按鈕單擊調(diào)用的某個函數(shù)），然后再單擊“停止分析”。
單擊“停止分析”之后，F(xiàn)12工具會自動生成報告。每個探查器會話都是一個獨立的報告，因此，你可以運行任意次數(shù)的分析（例如，針對腳本的多個部分）或修改值，以及再次分析相同部分。默認(rèn)情況下僅顯示最新的探查器報告，但你可以單擊“當(dāng)前報告”下拉列表來查看其他報告。
可以通過函數(shù)視圖或調(diào)用樹視圖這兩種方法查看報告?！昂瘮?shù)”視圖按照函數(shù)運行順序顯示所有函數(shù)?！罢{(diào)用樹”視圖顯示函數(shù)的層次結(jié)構(gòu)，以便你可以更輕松地查看父項和子項的關(guān)系。
網(wǎng)絡(luò)選項卡
通過顯示某個網(wǎng)頁的鏈接情況，網(wǎng)絡(luò)選項卡可以幫助我們分析網(wǎng)絡(luò)相關(guān)的各項情況，并且顯示不同連接的具體信息?！庇嫊r“這一項顯示了各項所用的時間，可以更快的找出錯誤位置。
摘要試圖
通過單擊開始捕獲按鈕來捕獲網(wǎng)頁連接網(wǎng)絡(luò)情況，點擊停止捕獲則不再捕獲。單擊轉(zhuǎn)到詳細(xì)視圖則跳轉(zhuǎn)到詳細(xì)視圖，通過對某一條目的雙擊，可以轉(zhuǎn)到該條目的詳細(xì)視圖。
詳細(xì)視圖
點擊上一步，下一步可以在不同條目中切換。
IE的F12開發(fā)者工具并不只是這一點功能，還有許多功能可以讓人眼前一亮。所以，讓我們一起來發(fā)掘IEF12的用法吧。
