邊做邊學 Internet Explorer 8：深入 IE8 開發人員工具 (錄影) 分享 📅 2011/02/24 21:37 📁 Web, 介紹好用工具 Internet Explorer 8 對開發人員來說最棒的禮物就是內建的 IE 開發人員工具，因為以往在 IE 瀏覽器下要對整份網頁進行分析與偵錯極為不方便，從 IE8 開始無論是分析 HTML、CSS、JavaScript 都變的非常容易，在這個短小精幹的 IE8 開發人員工具裡隱藏了許多不為人知的好用功能，讓我們來看看葫蘆裡到底在賣些什麼藥吧。 在文章/影片開始之前，首先必須聲明的就是 IE8 開發人員工具是一套專業的網頁分析工具，熟悉這套工具必須具備一些網頁開發的相關知識，例如瞭解 HTML、CSS、JavaScript、DOM、快取 等等。針對 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 網頁 ) 本機 CSS ( 註: 僅開啟 W3C 提供的 CSS Validation Service 網頁 ) 協助工具 (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 【結語】 在對 Internet Explorer 8 開發人員工具進行深入瞭解之後，應該多少對網頁分析工作有了初步的認識，俗語說：「工欲善其事、必先利其器」，像我們每天都在從事網頁開發等工作，如果缺乏這些好用工具的支援，所付出的時間將會非常可觀，因此儘早熟悉這些開發工具對開發人員來說算是個必備的要件之一。 相關連結 Discovering Internet Explorer Developer Tools Internet Explorer Developer Toolbar - Wikipedia, the free encyclopedia