公用程式焦點Internet Explorer Developer Toolbar

Lance Whitney

無論您本身是開發 Web 內容或單純為了支援您的區域網站管理員，有一個免費的 Microsoft 公用程式可以減輕您的工作負擔。Internet Explorer Developer Toolbar 讓您一窺箇中奧秘，協助您修正行為不當的網頁。Toolbar 會顯示您的文字、表格、影像和其他 HTML 內容的所有標記與樣式。您可以檢視樣式規則、反白顯示網頁上的特定項目，甚至能夠驗證您的 HTML 及 CSS。

您可以從下載的 IEDevToolBarSetup.msi 檔案安裝 Internet Explorer Developer Toolbar。安裝後，重新開啟 Internet Explorer，稱為 IE Developer Toolbar 的新按鈕會出現在命令列上。按一下這個按鈕，Toolbar 便會在瀏覽器視窗的底部開啟，並分成三個窗格 (請參閱螢幕擷取畫面)。第一個窗格顯示所有網頁項目的樹狀檢視。在任一項目上按一下即可在另外兩個窗格中顯示它的屬性和樣式。

您可以使用下拉式功能表反白顯示畫面上的特定項目，方法是按一下項目或搜尋項目。舉例來說，搜尋所有 h3 標記，這些 h3 標記便會逐個顯示在樹狀檢視中。選取標記即可框出它在網頁上的對應項目。您也可以藉由選擇特定類別 (例如 div 標記、表格、影像和使用絕對或相對路徑定址的物件) 來尋找項目。

網頁幕後作業

Toolbar 對於處理樣式規則特別有用。它可以反白顯示頁面上以識別碼或類別樣式格式化的所有項目。您可以產生一份包含樣式表中所有規則的報告，藉此確定套用這些規則的位置和方式。您甚至可以停用所有 CSS 來檢視網頁項目會受到什麼樣的影響。

若要使用 Toolbar 管理圖形物件，您可以啟用和停用影像，顯示每個圖片的解析度、大小、路徑及 alt 標記。Toolbar 也會產生容易閱讀的影像報告，顯示所有圖形的重要細節。

透過 Toolbar，您可以輕鬆地調整瀏覽器網頁大小，範圍從 800x600 到 1280x1024，或是您自訂的大小都可以。螢幕上尺規可以測量任何項目的像素。色彩選擇器工具會顯示滴管工具，讓您選取物件以查看它的 RGB 和十六進位色彩值。

為了幫助您疑難排解網頁問題，Toolbar 可以停用特定項目，例如 JavaScript 和 Cookie。您可以檢視內容的 HTML 原始檔，看是整篇網頁或只有選定物件都行。此外，原始碼顯示已經過格式化並以顏色標示，因此您很容易分辨出內容與標記。從樹狀檢視中，您甚至可以新增和移除呈現的網頁顯示中的樣式與其他屬性，藉此觀察其效果。最後，Toolbar 會將您的網頁輸送全球資訊網協會 (W3C) 驗證服務，以確保您的內容已經通過 XHTML 有效性、中斷的連結和可存取性的檢查。

Internet Explorer Developer Toolbar 與 Windows XP、Windows Vista 和 Windows Server 2003 下的 Internet Explorer 6 及 7 相容。請造訪 go.microsoft.com/fwlink/?LinkId=125120 以取得有關 Toolbar 的詳細資訊和下載連結。

Lance Whitney 身兼 IT 顧問、Web 開發人員和技術文件作家。他投入許多時間改良 Windows 工作站與伺服器。記者出身的 Lance 在 15 年前一頭栽進了 IT 產業。