IE11之F12 Developer Tools--控制檯工具(Console)

前面咱們介紹了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)部分的內容。