IE調試網頁之三：使用 F12 工具控制台查看錯誤和狀態 (Windows)

　　使用 F12 開發人員工具控制台命令，可以接收來自 Windows Internet Explorer 9 的錯誤訊息，並從代碼發送回你自己的訊息，而無需中斷執行流。

　　可以使用 F12 工具控制台視圖在程式碼之外立即運行指令碼語句。

　　控制台選項卡和視圖

　　可以從“控制台”選項卡或“指令碼”選項卡下的控制台窗格中查看 F12 工具控制台訊息。控制台在開啟時收到來自 Windows Internet Explorer 的訊息（例如，代碼中包含錯誤時）。Internet Explorer 9 可以向控制台發送很多資訊訊息和錯誤訊息 。若要導航到代碼中的某個錯誤位置，請單擊錯誤中提供的源資訊。 如果在關閉 F12 工具時出現訊息，則下次開啟 F12 工具時會顯示警告訊息。以下螢幕顯示 F12 工具控制台。

　　你還可以從代碼向控制台發送訊息 以選項組、標誌錯誤或使用控制台對象的相關問題的警告。Internet Explorer 9 提供了四種類型的訊息 以區分代碼中的問題 - 日誌、警告、錯誤和資訊。調試時可以使用這些訊息，而不使用 "window.alert()"，或者只保留作業記錄（如果在代碼中進行了重要聲明）。訊息字串可以包含文本、 變數、運算式結果或者所有這些內容的組合。以下螢幕顯示已顯示了多條訊息的 F12 工具控制台。

　　將訊息從代碼發送到控制台

　　F12 工具提供了可從指令碼代碼中使用的命令，用於發送訊息，啟動或停止分析，或者更改用於評估鍵入控制台的指令碼語句的視窗。

　　使用控制台對象，以將訊息從代碼發送到控制台。 測試代碼時使用控制台而不使用 "window.alert()"，這樣不會太明顯，因而不會通過強制回應對話方塊停止執行。此對象提供大量表單，以便在需要時能夠區分資訊訊息和錯誤訊息。使用控制台對象時，請確保開啟 F12 工具。為了避免執行不必要的代碼，請使用以下功能測試：

if(window.console && window.console.clear)

　　在測試大量不具有括弧和參數的 Internet Explorer 9 對象時，則如果存在功能，其將傳回值 True。在這種情況下，我們將測試 console.clear() 功能。還可通過僅測試控制台對象以進行通用檢查：

if (window.console){      // Add console commands here.}

　　window.console

　　下表 展示可在指令碼中使用的控制台命令的文法和樣本。

命令	樣本	說明
log(message)	window.console.log("This is a logging message");	向控制台列印" message"，以“LOG:” 開頭。
warn(message)	window.console.warn("This is a warning message");	向控制台列印警告" message"。該訊息以 警告圖示 開頭。
error(message)	window.console.error("This is an error message");	向控制台列印錯誤" message"。該訊息文本顯示為紅色， 並以錯誤表徵圖 開頭。
info(message)	window.console.info("This is an info message");	向控制台列印資訊性" message"。此訊息以 資訊表徵圖 開頭。
clear()	window.console.clear();	清除控制台中的訊息。不清除你在控制台命令列中 輸入的指令碼錯誤訊息或指令碼代碼。按右鍵“控制台”窗格並單擊“清除控制台”選項可清除 全部訊息。
dir(object)	window.console.dir(oExample);	向控制台列印 "object" 的 屬性。
assert(expression, message)	window.console.assert((x == 1)， "assert message: x != 1");	列印 "message"（如果 "expression" 的值為 false）。
profile(report)	window.console.profile("My profile report");	開始在 "report" 的標題下記錄設定檔資訊。此命令等同於單擊“設定檔”選項卡上的“開始採樣”按鈕。
profileEnd()	window.console.profileEnd();	停止在上一個報告標題下記錄設定檔資訊。此命令等同於單擊“設定檔”選項卡上的“停止採樣”按鈕。 可以在“設定檔”選項卡上查看“報告”""。

　　可以使用 "printf" 樣式的替代模式設定訊息控制台命令的格式。例如，你可以使用以下方法之一調用 "console.log"：

console.log("Variable x = " + x + " and variable y = " + y)console.log("Variable x = ", x, " and variable y = ", y)console.log("Variable x = %d and variable y = %d", x, y)

  控制台訊息方法接受選擇性參數，以允許將訊息中的變數替換為值。例如，可以向控制台發送一個功能報告錯誤：

function sendErrorConsole(errorCode) {       window.console.error("Error: %s occured", errorCode);}

　　在控制台中執行指令碼和命令

　　在“控制台”選項卡或“指令碼”選項卡中的“控制台”窗格的底部，可以執行一行 或多行控制台命令或指令碼語句。可在控制台中執行任何有效指令碼命令或運算式。

　　例如，若要查看變數值，請在控制台中鍵入名稱並按 Enter。若要變更指令碼中某個變數的值， 請在控制台中鍵入所賦的值。 按向上鍵瀏覽之前執行的命令。

　　無論是否啟動偵錯工具，都可以使用“指令碼”選項卡中的“控制台” 窗格。在斷點處停止執行時，在此窗格中輸入的命令將 在斷點的範圍內運行；當執行未暫停時，命令將在全域範圍中運行。

　　使用 cd() 跨架構執行命令

　　指令碼語句和命令的執行 預設情況下在最上層視窗的上下文中進行。如果使用的是幀，則使用 "cd()" 控制台 命令。

cd() 　　cd(window)

可以將命令列運算式計算 從網頁的預設最上層視窗更改為幀的視窗。調用不帶參數的 cd() 會返回最上層視窗。

　　示範了在此處提供的樣本中執行的幾個步驟。

　　從控制台視圖的頂部， 執行以下命令：

• cd() - 列印當前視窗。
• cd(myframe) - 將運算式計算 更改為 id 為“myframe”的樣本幀。
• counter - 顯示 iframe 中 名為“counter”的全域變數。
• counter = 25 - 將計數器的值更改為 25。
• cd() - 將運算式計算改回 預設的最上層視窗。
• counter - 在本例中，計數器在最上層視窗中 不是有效變數。

　　可使用 ID 名稱或 frames[] 集合來更改為 iframe。在本例中， "document.frames[0]" 同樣發揮作用。

　　執行多行 指令碼

　　若要執行多行指令碼命令，請單擊多行模式按鈕  或按 Ctrl+Alt+M。在多行視窗中鍵入 script，然後單擊“運行指令碼”按鈕以執行。與執行一行指令碼的單行模式不同，按 Enter 會在指令碼視窗中 添加一個換行。可調整大小的輸入視窗通過按右鍵或捷徑功能表（如複製和粘貼） 以及 Unicode 功能來擁有其他控制項。

　　篩選訊息並擴充控制台對象

　　可以從控制台窗格 篩選控制台訊息以顯示或隱藏某些類別的訊息。若要篩選訊息，請按右鍵“控制台”窗格並將滑鼠指標懸停在“篩選器”上方。將顯示一個可用篩選器的列表，其中帶核取記號的篩選器是活動的。

　　可以擴充控制台對象以添加 新功能。例如，你可能希望自訂方法以將格式化的調試訊息輸出到控制台。若要添加 "console.debug" 命令，則可向 JavaScript 代碼中添加以下程式碼片段：

console.debug = function(name, value){    console.warn("DEBUG: " + name + "==" + value);}

　　此樣本採用了兩個參數，並使用某種最小化格式將它們輸出到“控制台”窗格。但 可以隨意自訂函數參數和行為。通過這種方法，控制台對象可以用於添加所需的任意數量的 新命令。

注意  由於你在新命令中使用了現有控制台命令，因此仍將應用篩選器。例如， 上一樣本中的 console.debug 命令使用 console.warn 將訊息輸出到“控制台” 窗格。如果從“篩選器”列表中清除“控制台警告”，則“控制台”窗格中將不會顯示 console.warn 中的任何輸出。