使用 Windows Internet Explorer 8 開發人員工具修復網站

發行項
01/08/2009

注意：本文件只是初步文件，日後可能隨時異動。

Windows Internet Explorer 8 引進了新的開發人員工具組，可協助找出及解決網頁的 HTML、階層式樣式表 (CSS) 和指令碼的相關問題。開發人員工具會協助 Web 開發人員執行許多工作，包括檢視個別屬性、判斷為何某個元素套用特定的 CSS 規則、執行指令碼的執行階段偵錯，以及使用不同的文件相容模式預覽網頁。

本文將說明開發人員工具的一般使用，以及這些工具包含的四種主要模式的功能和使用方式。四種模式如下

     1. HTML 模式，可讓您檢視網頁後置的基礎程式碼、加框及選取個別元素、預覽某些屬性值的變更對頁面呈現時的影響，以及檢視您的 CSS 規則如何套用至個別元素。
     2. CSS 模式，可讓您了解各種樣式表對您網頁的影響，所以這個模式對使用多個樣式表的網站最為實用。
     3. 指令碼模式，可讓您對網頁所使用的指令碼進行偵錯。這個模式能讓您逐步執行程式碼、插入中斷點和監看式，以及檢查變數。
     4. 分析工具模式，可讓您分析網頁後置的基礎程式碼效能，並找出執行效能欠佳的函數。

開啟及關閉開發人員工具

您可以按 F12 鍵或按一下 Windows Internet Explorer 工具列上 [ 工具 ] 功能表中的 [ 開發人員工具 ] 選項，來開啟開發人員工具。圖 1 顯示在 Windows Internet Explorer 右上角已強調顯示的 [ 開發人員工具 ] 功能表選項。

圖2

[開發人員工具] 視窗會在 Windows Internet Explorer 視窗前面顯示。若要關閉開發人員工具，可以和開啟時一樣按F12，或者按一下 Windows Internet Explorer 工具列上**[工具]功能表中的[開發人員工具]**選項。

使用開發人員工具所做的任何變更都是暫時性的，不會影響您網頁的基礎原始碼。重新整理頁面、瀏覽器巡覽至新頁面，或關閉瀏覽器視窗時，都會還原變更。可以按 [ 開發人員工具 ] 工具列上的磁碟 ( 儲存 ) 按鈕，將 HTML 與 CSS 的變更儲存至文字檔案。

預覽不同的相容模式

Windows Internet Explorer 8 引進了文件相容模式，這會改變 Windows Internet Explorer 8 呈現網頁的方式。如需支援的各種文件相容模式的詳細資訊，以及如何實作這些模式的詳細資訊，請參閱未來相容性的 META 標籤與鎖定。

您可以使用開發人員工具來查看不同相容模式之間的視覺化差異。若要變更特定網頁的文件模式，請在 [ 開發人員工具 ] 功能表的 [ 文件模式 ] 功能表上，選擇要使用的模式。核取符號會指出所選取的相容模式。其中的選項包括 [Quirks] 、 [Internet Explorer 7 標準 ] 及 [Internet Explorer 8 標準 ] 。若要變更瀏覽器模式，請在 [ 開發人員工具 ] 功能表的 [ 瀏覽器模式 ] 功能表上，選擇要使用的模式。核取符號會指出所選取的相容模式。其中的選項包括 [Internet Explorer 7] 、 [Internet Explorer 8] 及 [Internet Explorer 8 相容性檢視 ] 。

為元素加框

為了幫助您了解元素在網頁中的位置，以及用於建立特定效果的元素類型，您可以選擇為某些元素加上外框。您從 [ 外框 ] 功能表選擇指令時， Windows Internet Explorer 會在網頁上將對應的元素加上外框。例如，您從 [ 外框 ] 功能表選擇 [DIV 元素 ] 指令時，目前網頁上所有 div 元素周圍都會顯示外框。

使用 HTML 模式

HTML 模式可讓您檢視頁面後置的基礎標記、選取個別元素及檢視其屬性、預覽特定屬性值的變更會如何影響呈現的頁面，以及檢視 CSS 規則套用至個別元素的情形。您可以按一下 [ 開發人員工具 ] 視窗中的 [HTML] 索引標籤，以存取 HTML 模式。圖 2 顯示已選取 [ 開發人員工具 ] 視窗左上角的 [HTML] 索引標籤。

圖 2

[HTML] 視窗窗格右邊所顯示的工具，是要幫助您了解網頁中 HTML 元素的呈現方式。

[樣式] 工具會顯示您的 CSS 規則如何套用至選取的元素。它會顯示受到影響的屬性，以及這些值是在何處指定。每個規則左邊的核取符號可以啟用或停用規則；您可以使用核取符號來實驗網頁元素的外觀。
[ 追蹤樣式 ] 工具會顯示套用至某個元素的 CCS 屬性、定義屬性的元素，以及 ( 若適用的話 ) 定義屬性值的樣式表名稱。
[配置] 工具會顯示元素方塊模型的屬性，方塊模型則會顯示內容區域中心的元素受到影響的情形。如需方塊模型的詳細資訊，請參閱W3C 的方塊模型討論。
[屬性] 工具會顯示 [HTML] 索引標籤中所選元素的屬性。工具中會顯示目前的節點。使用此工具即可輕易新增或刪除所選取節點的屬性，然後在瀏覽器視窗中更新。

圖 3 顯示位於 [HTML] 窗格右邊的**[樣式]、[追蹤樣式]、[配置]及[屬性]** 按鈕。

圖 3

選取元素與變更屬性值

您可以藉由在 [HTML] 窗格中強調顯示某個元素來選取元素，或者使用 [ 開發人員工具 ] 工具列上的 [ 按一下以選取元素 ] 工具來選取元素。圖 4 顯示在 [ 開發人員工具 ] 視窗左上角已強調顯示的 [ 按一下以選取元素 ] 按鈕。 [ 按一下以選取元素 ] 工具讓您只需在瀏覽器頁面的任何元素上按一下，即可選取該元素。所按的元素會在 [開發人員工具] 視窗中選取。

圖 4

您選取網頁中的元素之後，即可檢視其目前屬性值，也可以使用 HTML 模式變更其值，來試驗其他新值的結果。若要變更屬性值，請在 [HTML] 索引標籤中按一下想要變更的屬性值，或者在 [屬性] 工具中連按兩下要變更的值。然後輸入新值，再按ENTER鍵。執行之後，Windows Internet Explorer 會顯示變更的效果。您可以在按ENTER鍵之前，按ESC鍵以捨棄部分值。若要將頁面還原為原始外觀，請重新整理頁面。

使用樣式與追蹤樣式工具

[ 樣式 ] 工具會以階層式的順序，顯示套用至所選取元素的所有樣式規則，並以刪除線顯示否決的樣式。使用每個規則旁邊的核取方塊可以啟用及停用該規則，然後立即在 Windows Internet Explorer 中檢視效果。 [ 追蹤樣式 ] 工具會顯示特定樣式屬性的計算。在這個檢視中，樣式會依屬性 ( 而非依規則 ) 分組。因此可立即看到屬性的計算值。展開屬性會顯示設定該屬性的所有規則，同樣是以階層式順序排列，以顯示 Windows Internet Explorer 如何決定最後的結果。

這兩種工具的樣式值，都可以藉由按一下畫面上的值然後輸入新值予以變更。將焦點從可編輯的值移開就會認可新值，若按 ESC 鍵則會中止變更。

圖 5 顯示有已停用規則的 [ 樣式 ] 工具。

圖 5

認識配置工具

[ 配置 ] 工具會顯示下列值：

[位移] 值會描述所選物件及其父項間的距離，以offsetLeft和offsetTop屬性表示。
[邊界]、[框線] 及 [邊框間距] 值會顯示網頁中指定的對應值。如果網頁原始碼中未指定值，[配置] 工具會顯示 Windows Internet Explorer 使用的預設值。
最內部的值是元素的高度和寬度，由offsetHeight與offsetWidth屬性定義。

其中會顯示每個方塊模型屬性的值和度量單位。根據預設， [ 配置 ] 工具會假設方塊模型屬性是以像素指定；如果 [ 配置 ] 工具中未顯示度量單位，值就代表像素。圖 6 顯示在左邊 [HTML] 窗格中的所選元素的 [ 配置 ] 工具畫面。

圖 6

使用屬性工具檢視屬性

Windows Internet Explorer 8 開發人員工具還包含檢視元素屬性的工具。若要使用屬性工具，請按一下右上方的**[屬性]** 按鈕。在 [HTML] 索引標籤中，目前網站的 HTML 元素會顯示在左邊的窗格中。如果您選取元素，右邊窗格中會顯示元素的屬性清單。勾選**[顯示唯讀內容]核取方塊，會使 [屬性] 工具顯示所選取元素之所有屬性的清單。圖 7顯示已選取屬性工具，還有HTML**元素的屬性清單。

圖 7

您可以按一下 [屬性] 工具視窗上方的或按鈕，來新增或移除屬性。有一個下拉式方塊可讓您選取要新增的屬性。

使用 CSS 模式

CSS 模式可讓您看到各種樣式表對網頁的影響，這對於使用多個樣式表的網站是最實用的模式。您可以按一下 [開發人員工具] 視窗中的**[CSS]索引標籤，以存取 CSS 模式。圖 8顯示已選取 [開發人員工具] 視窗左上角的[CSS]**索引標籤。

圖4

CSS 模式工具列包含一個下拉式方塊，可讓您選取網頁要載入的樣式表，並顯示其屬性。樣式表中的規則會出現在樣式表按鈕底下，您可以展開或摺疊屬性樹狀結構。您可以勾選每個項目旁邊的核取方塊，以啟用及停用個別規則。

您可以像在 HTML 模式中一樣，按一下某個值、輸入新值，然後將焦點從欄位移開，即可變更每個屬性的值。

使用指令碼模式

指令碼模式可讓您逐步執行程式碼、插入中斷點及檢查變數，來進行網頁指令碼的偵錯。開發人員工具提供內建的簡易偵錯程式，可讓您設定中斷點及逐步執行用戶端指令碼，不必離開 Windows Internet Explorer 即可進行指令碼的偵錯。您可以按一下 [ 開發人員工具 ] 視窗中的 [ 指令碼 ] 索引標籤，以存取指令碼模式。圖 9 顯示已選取 [ 開發人員工具 ] 左上角的 [ 指令碼 ] 索引標籤。

圖6

開始與停止偵錯

按一下 [ 開始偵錯 ] 按鈕即可開始偵錯。偵錯時，下拉式指令碼清單中會提供網站上所有的指令碼，包括個別的檔案和內嵌的指令碼區塊。按一下 [ 停止偵錯 ] 按鈕即可停止偵錯。

設定中斷點

進行偵錯時，出現任何執行階段錯誤都會使偵錯程式中止作業並停在發生錯誤的位置。 Windows Internet Explorer 會暫停，並在 [ 原始碼檢視 ] 視窗中強調顯示造成錯誤的行。

注意： Windows Internet Explorer 在等候指令碼偵錯程式輸入時，並不會回應任何使用者互動。

您也可以藉由設定中斷點，選擇要在哪裡暫停執行。中斷點會使指令碼的執行，在中斷點行之前暫停執行。偵錯程式會在指令碼 [ 原始碼檢視 ] 中強調顯示將要執行的下一行。您也可以在開始偵錯之後設定中斷點。您可以按一下行號的旁邊、透過按一下滑鼠右鍵的快顯功能表，或按 F9 鍵，來設定中斷點。

偵錯程式的 [ 中斷點 ] 索引標籤，會包含所有可用中斷點的清單。圖 10 顯示已選取偵錯程式工具窗格右邊的 [ 中斷點 ] 索引標籤。

圖8

您可以在此找到所有中斷點的位置與檔案名稱和行號。在這份清單中的中斷點上按兩下，即可巡覽至原始程式碼的中斷點位置。只要取消勾選中斷點旁邊的核取方塊，即可停用中斷點，但不會將它從原始程式碼移除。若要移除中斷點，請按一下滑鼠右鍵，然後選取 [ 刪除 ] 。

注意：即使離開目前的網站， Windows Internet Explorer 仍會保持中斷點資訊，直到您關閉開發人員工具為止。

檢查變數

當指令碼在中斷點暫停執行，此時即可以檢查指令碼變數。偵錯程式的 [ 區域變數 ] 工具會顯示目前執行範圍內，所有可用的變數名稱、值及類型。在執行範圍之外的變數並未定義。執行範圍是可以參考變數的範圍。圖 11 顯示已選取 [ 區域變數 ] 工具的偵錯作業。

圖10

您可以將變數新增至**[監看式]** 工具，從其他範圍監看變數。您可以選取原始碼文字，按滑鼠右鍵，再選擇 [ 新增監看式 ] ，以設定監看式變數。這會新增游標所在之識別項的監看式。圖 12 顯示監看變數時已選取 [ 監看式 ] 工具的偵錯作業。

圖12

您也可以按一下 [ 監看式 ] 視窗中的 [ 按一下以新增 …] ，然後輸入變數名稱，來新增監看式變數。

使用分析工具模式

您可以使用分析工具模式，依據分析工具在 Windows Internet Explorer 呈現您網站時收集的資訊，來調查網站的執行時間。如果有一段程式碼會造成執行時間過長或是造成瓶頸，此資訊對最佳化很有用。

若要使用分析工具模式，請選取視窗左上方的 [ 分析工具 ] 索引標籤。若要開始分析，請按一下視窗上方的 [ 開始分析 ] 按鈕。然後分析工具會開始分析在 Windows Internet Explorer 中呈現的網站。若要分析網站，請巡覽至 URL ，分析工具模式將會在網頁呈現時收集資料。按一下 [ 停止分析 ] 按鈕即可檢視分析工具產生的報表。圖 13 顯示已載入報表的分析工具模式。

圖 13

報表中會顯示 Windows Internet Explorer 用來呈現 URL 的函數。其中包括函數的名稱、呼叫函數的次數、內含時間及專有時間。內含時間是函數執行完成所需時間，包括此函數所呼叫之函數其執行時間。專有時間則是此函數執行完成所需時間，但不包括此函數所呼叫之函數其執行時間。

使用分析工具收集的資訊，即可找出您網站程式碼中的潛在瓶頸。找出並重組未能有效率執行的程式碼或演算法，即可縮減 Windows Internet Explorer 呈現網頁所花的時間。