使用 F12 工具控制檯查看錯誤和狀態

.NET Framework 3.0
5(共 5)對本文的評價是有幫助 評價此主題

此內容參考較早版本的 F12 開發人員工具。請查看最新的 F12 工具文檔

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

可以使用 F12 工具控制檯視圖在程序代碼之外立即運行腳本語句。

控制檯選項卡和視圖

可以從“控制檯”選項卡或“腳本”選項卡下的控制檯窗格中查看 F12 工具控制檯消息。控制檯在打開時收到來自 Windows Internet Explorer 的消息(例如,代碼中包含錯誤時)。Internet Explorer 9 可以向控制檯發送很多信息消息和錯誤消息 。若要導航到代碼中的某個錯誤位置,請單擊錯誤中提供的源信息。 如果在關閉 F12 工具時出現消息,則下次打開 F12 工具時會顯示警告消息。以下屏幕截圖顯示 F12 工具控制檯。

“腳本”選項卡的控制檯窗格中的由 Internet Explorer 發送的代碼錯誤的屏幕截圖

你還可以從代碼向控制檯發送消息 以記錄狀態、標誌錯誤或使用控制檯對象的相關問題的警告。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() - 打印當前窗口。
  • 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);
}


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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章