前面我們介紹了IE11的Developer Tools中的第一個工具--DOM Explorer,這篇文章介紹第二個工具--控制台(Console),使用控制台工具查看錯誤和其他信息、發送調試輸出、檢查JavaScript對象和XML節點,以及在所選窗口或框架的上下文中運行JavaScript。
控制台工具的主要用途是與運行的網頁進行向內和向外的通信:
向內:可以運行JavaScript以查看和更改正在運行的網頁中的值、向運行的代碼添加函數,以及在執行代碼時運行調試代碼。
向外:IE和JavaScript代碼將向開發人員提供狀態、錯誤和調試消息,包括可檢查的JavaScript對象和DOM節點。
控制台具有一個"目標(Target)"下拉菜單,可以從中選擇"iframe" 或 "_top"來運行控制台命令,如果網頁中沒有"iframe", "_top"將是唯一選擇,如下圖所示:
在控制台的監控下,可以看到IE系統消息具有三個分類:
信息:你看你希望了解的非重要信息
警告:網頁中可能存在錯誤,它不一定會打斷網頁,但可能導致異常行為
錯誤:使代碼無法運行的嚴重錯誤
默認情況下,三種分類都會顯示出來,但也可以根據需求選擇自己需要顯示的內容:
從上圖可以看出,在控制台的監控下,各種錯信息的數量,而且除了可以選擇查看分類信息之外,還可以清空信息。如果選擇“導航時清除”圖標,即倒數第二個圖標被高亮時,控制台將在每次瀏覽器導航到新網頁時執行清除,這時,我們只能看到當前網頁消息,反之,將會保存以前的網頁的信息,同時,以前的網頁消息呈現灰色,以便區分它們是否來自當前網頁。
在控制台右下角,我們可以看到如下圖所示的三個按鈕:
點擊最后一個按鈕,即朝上的箭頭按鈕,可以打開控制台輸入頁面,這提供給開發人員從代碼發送到控制台的消息,其中消息可以分成:自定義消息、可檢查的對象和節點、計數器、計時器、斷言、跟蹤和分析。輸入代碼之后點擊中間的綠色箭頭,可以在控制台消息里看到相應的返回,如下圖所示:
接下來分別介紹這些信息。
自定義消息
上圖中的console.log()即為自定義消息之一,它顯示不帶警報圖標的純文本,另外三個是系統消息的格式:console.info()--用於信息消息,console.warn()--用於警告消息,console.error()--用於錯誤消息,它們與控制台提供的消息查看是一致的。
編碼的過程中,可以直接用文本作為參數,同樣,也可以是變量的方式或者文本與變量同時使用的方式,甚至可以進行變量替換:
可檢查的對象和節點
要顯示可檢查的JavaScript對象,可以使用console.dir(),將其發送到控制台
要顯示可檢查的DOM節點,可以使用console.dirxml(),將其發送到控制台
這里我們需要注意,對參數的選取,需要獲得元素的id,如果id不存在,將會提示undefined。對於已經獲得的對象或節點,可以展開查看具體的內容。
計數器
雖然在代碼中設置計數器相對簡單,但它仍是一項重復的任務。我們可以使用console.count()方法進行簡單的速記,其字符串包含作為參數的計數器標簽。首次與特定標簽一起使用時,將在控制台輸出中建立一個計數器。之后使用帶有相同標簽的console.count()時,計數器的計數將累加,要將計數器重置為0,使用console.countReset()。
計時器
計時器類似於計數器,在代碼的任意位置使用console.time()就可以啟動計時器了,同時,使用console.timeEnd()來結束計時器並將結果發送給控制台。
如上圖所示,因為對console.time()和console.timeEnd()方法中沒有傳入參數,因此,計時的時候顯示的是“default”標簽,如果需要自己定義標簽,只需要向方法傳遞我們需要的字符串標簽即可。
同時,我們也可以使用console.timeStamp()方法,該方法返回的是加載網頁的時間:
它們都是用毫秒來計時的,如果你結合UI響應能力分析會話期間來使用它的話,除了控制台輸出外,還會將用戶標記以及自會話啟動以來的時間添加到會話時間線中。
斷言
斷言對於調試代碼有一定的幫助,在控制台中使用它,也可以讓我們較為清晰地看到問題的所在。在控制台中使用斷言,只需要使用console.assert()方法即可,如果第一個參數為false, 將運行console.error()彈出錯誤消息,同時可以看到詳細的錯誤信息:
跟蹤和分析
了解從何處調用了你的代碼,正在運行的是哪個代碼,以及執行任務需要多長時間,這些信息對於分析速度緩慢或異常行為非常有用。
堆棧跟蹤通過向上追溯路徑的跟蹤請求向你顯示到達當前代碼的執行路徑。可以在代碼中使用console.trace()方法來顯示堆棧跟蹤。
在一些實例中,查看兩點間運行的代碼的每個部分將十分有用,探查器是用於該目的的最佳工具,但在一些情況下可能需要比手動停止和開始更高的精確度。在代碼中精確地開始和停止探查器可以使用console.profile()和console.profileEnd()。
注意:覆蓋分析會話可能會創建異常報告。在首次測試運行時,使用console.trace()替代console.profile()來確保不會在結束分析前多次調用console.profile().
由於要處理發送到控制台的所有類型的消息和內容,跟蹤它們可能比較困難,可以使用分組命令:console.group(), console.groupCollapsed(), console.groupEnd().
在命令行中輸入的所有腳本都會在點擊了運行之后在當前選定窗口的全局范圍內執行,在命令行中輸入任何有效的JavaScript,還可以將JavaScript發送到控制台。
下一篇文章將介紹調試(Debugger)部分的內容。