The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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

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

在文章/影片開始之前,首先必須聲明的就是 IE8 開發人員工具是一套專業的網頁分析工具,熟悉這套工具必須具備一些網頁開發的相關知識,例如瞭解 HTMLCSSJavaScriptDOM快取 等等。針對 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 開發人員工具進行深入瞭解之後,應該多少對網頁分析工作有了初步的認識,俗語說:「工欲善其事、必先利其器」,像我們每天都在從事網頁開發等工作,如果缺乏這些好用工具的支援,所付出的時間將會非常可觀,因此儘早熟悉這些開發工具對開發人員來說算是個必備的要件之一。

 

相關連結