# 邊做邊學 Internet Explorer 8：深入 IE8 開發人員工具 (錄影)

Internet Explorer 8 對開發人員來說最棒的禮物就是內建的 IE 開發人員工具，因為以往在 IE 瀏覽器下要對整份網頁進行分析與偵錯極為不方便，從 IE8 開始無論是分析 HTML、CSS、JavaScript 都變的非常容易，在這個短小精幹的 IE8 開發人員工具裡隱藏了許多不為人知的好用功能，讓我們來看看葫蘆裡到底在賣些什麼藥吧。

在文章/影片開始之前，首先必須聲明的就是 IE8 開發人員工具是一套專業的網頁分析工具，熟悉這套工具必須具備一些網頁開發的相關知識，例如瞭解 [HTML](http://en.wikipedia.org/wiki/HTML)、[CSS](http://en.wikipedia.org/wiki/Cascading_Style_Sheets)、[JavaScript](http://en.wikipedia.org/wiki/JavaScript)、[DOM](http://en.wikipedia.org/wiki/Document_Object_Model)、[快取](http://zh.wikipedia.org/zh-tw/%E9%AB%98%E9%80%9F%E7%BC%93%E5%AD%98) 等等。針對 JavaScript 的分析與除錯來說，如果學會使用 IE 開發人員工具那將更是如虎添翼，也絕對可以省去你許多開發偵錯的時間。

由於工具的操作大多需要實際展示，因此以下僅列出影片中會主講的主題，大部分的講解都會在影片中進行詳細解說，本次的影片長度約 56 分鐘，算是一份非常完整且仔細的工具解說，是我目前為止錄製過最長篇的教學影片了，讀者要有耐心看完所有內容。 **:-)**

-   HTML/DOM 分析、修改、測試 ( HTML 頁籤 )

-   基本功能

-   選取 ( Ctrl + B )
-   清除快取 ( Ctrl + R )
-   儲存 HTML 結果 ( Ctrl + S )
-   重新整理 ( F5 )
-   具樣式的元素原始碼 ( Ctrl + T )
-   編輯 ( Alt + E )
-   自動換行 ( Alt + W )

-   DOM 分析與修改

-   樣式
-   追蹤樣式
-   格式設定 (Box Model)
-   屬性 (HTML Attributes & DOM Properties)

-   CSS 分析、修改、測試 ( CSS 頁籤 )

-   新增、刪除、修改、停用、啟用
-   儲存 CSS 結果

-   JavaScript 分析與除錯

-   主控台

-   執行指令碼
-   單行模式 ( 可按 ↑ 方向鍵選取歷史執行指令 )
-   多行模式

-   開始偵錯

-   繼續 (Continue)
-   全部中斷 (Break All)
-   錯誤中斷 (Break On Error)
-   單步執行 ( 註: 可按 ↑ 方向鍵選取執行過的歷史指令行 )

-   逐步執行 (Step Into)
-   逐程序 (Step Over)
-   跳出 (Step Out)

-   中斷點 (Breakpoints)
-   區域變數 (Locals)
-   監看式 (Watch)
-   呼叫堆疊 (Call Stack)

-   JavaScript 效能分析

-   開始設定資料

-   功能(Function)
-   計數 (Count)
-   內含時間 (Inclusive Time)
-   專有時間 (Exclusive Time)
-   URL
-   行號 (Line Number)

-   匯出 CSV 資料
-   清除報告資料

-   網頁整體分析、測試

-   檔案

-   全部復原 (Undo All)
-   自訂 Internet Explorer 檢視原始檔
-   結束

-   尋找

-   按一下以選取元素

-   停用

-   指令碼
-   快顯封鎖程式 (Pop-Up Blocker)
-   CSS

-   檢視

-   類別(Class)和識別碼(ID)資訊
-   連結路徑
-   連結報告
-   標籤索引 (TabIndex)
-   便捷鍵 (AccessKey)
-   原始檔

-   具樣式的元素原始檔  \[ 需先選取元素才能執行 \]
-   DOM (元素)              \[ 需先選取元素才能執行 \]
-   DOM (頁面)
-   原始

-   外框

-   表格儲存格 ( <TD> )
-   表格 ( <Table> )
-   DIV 元素 ( <DIV> )
-   影像 ( <IMG> )
-   任何元素
-   定位的物件

-   相對 (position: relative)
-   絕對 (position: absolute))
-   固定 (position: fixed)
-   浮動 (float)

-   清除外框

-   影像

-   停用影像
-   顯示影像尺寸
-   顯示影像檔案大小
-   顯示影像路徑
-   檢視替代文字
-   檢視影像報告

-   快取

-   永遠從伺服器重新整理   \[ 註: 此功能在 IE8 無效，經測試在 IE7 與 IE9 都沒問題 \]

-   此功能可改以鍵盤的 **Ctrl + F5** 快速鍵強迫將網頁重新整理

-   清除瀏覽器快取
-   清除這個網域的瀏覽器快取
-   停用 Cookie ( 註: 僅暫時停用 Cookie 而已 )
-   清除工作階段 Cookie  ( Clear Session Cookies )
-   清除網域的 Cookie  ( Clear Cookies for Domain )
-   檢視 Cookies 資訊

-   工具

-   重新調整大小
-   顯示尺規
-   顯示色彩選取器

-   驗證

-   HTML
-   CSS
-   摘要 ( Feed / RSS )
-   連結 ( LInks )
-   本機 HTML ( 註: 僅開啟 W3C 提供的 [Markup Validation Service](http://validator.w3.org/) 網頁 )
-   本機 CSS   ( 註: 僅開啟 W3C 提供的 [CSS Validation Service](http://jigsaw.w3.org/css-validator/) 網頁 )
-   協助工具 (Accessibility)

-   WCAG 檢查清單 ( WCAG Checklist )
-   區段 508 檢查清單 ( Section 508 Checklist )

-   多重驗證 ( Multiple Validations )

-   切換瀏覽器模式與文件模式

-   Internet Explorer 7

-   Quirks模式
-   Internet Explorer 7 標準

-   Internet Explorer 8 (含相容性檢視)

-   Quirks模式
-   Internet Explorer 7 標準
-   Internet Explorer 8 標準

-   常用快速鍵

-   **F12**

-   開啟、關閉開發人員工具

-   **Ctrl + Tab**

-   切換頁籤

-   **Ctrl + E**

-   搜尋字串

**※ 可以線上觀看與下載完整影片的網址**：[http://www.youtube.com/playlist?list=PL38C761A404920162](http://www.youtube.com/playlist?list=PL38C761A404920162)

**【**結語**】**

在對 Internet Explorer 8 開發人員工具進行深入瞭解之後，應該多少對網頁分析工作有了初步的認識，俗語說：「工欲善其事、必先利其器」，像我們每天都在從事網頁開發等工作，如果缺乏這些好用工具的支援，所付出的時間將會非常可觀，因此儘早熟悉這些開發工具對開發人員來說算是個必備的要件之一。

**相關連結**

-   [Discovering Internet Explorer Developer Tools](http://msdn.microsoft.com/en-us/library/dd565628\(v=vs.85\).aspx)
-   [Internet Explorer Developer Toolbar - Wikipedia, the free encyclopedia](http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Toolbar)