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 中的任何輸出。

 

轉載來自：

做者：Artwl

出處：http://artwl.cnblogs.com