?Google Chrome控制臺為開發者提供了網頁和應用程序調試的幾種方法，本文通過基本操作、控制臺API、命令行API來介紹控制臺的使用。

基本操作 1、開啟控制臺 可以通過下列三種方式開啟控制臺： a) 按下Chrome界面右上方的按鈕，選擇菜單：更多工具->開發者工具，進入開發者工具界面，點擊該界面右上方的控制臺顯示按鈕。 b) 按下快捷鍵CTRL-SHIFT-I，打開開發者工具，點擊該界面右上方的控制臺顯示按鈕。 c) 按下快捷鍵CTRL-SHIFT-J，直接打開調試界面及控制臺。 2、清空控制臺 可以通過下列兩種方式清空控制臺： a) 在控制臺內，選擇右鍵快捷菜單：Clear console b) 在控制臺內輸入命令：clear() c) 在javascript代碼中使用方法：console.clear() d) 在控制臺內，選擇左上角的按鈕。 3、保留日志記錄 默認情況下，在頁面刷新或跳轉到其他頁面時，控制臺的日志記錄全部會清空。此時，若需要進行保留，則需要將控制臺的Preserve log選項選中。 4、記錄所有XHR請求 若需要對所有XHR請求記錄日志，則可以通過右鍵快捷菜單Log XMLHTTPRequests來實現。 控制臺API 1、控制臺日志輸出 console.log() log方法可以將括號內的一個或多個表達式以字符串形式輸出至控制臺。各表達式之間用逗號隔開，逗號的實際效果與加號一樣。 代碼舉例： 結果如下： ????
2、錯誤和警告 console.error()——輸出錯誤信息 console.warn()——輸出警告信息 error()方法將以紅色字體向控制臺輸出指定的內容，而warn()方法以黑色字體顯示輸出內容。兩者均不會阻斷程序代碼的運行。兩者均支持格式化字符串，與C語言的printf類似，具體支持的格式化類型見后面表格。 代碼舉例：
????結果如下： 3、斷言 console.assert(boolean, string) 當第一個參數boolean計算結果為false時，將第二個參數string輸出至控制臺 4、輸出信息分組顯示 console.group(groupString)和console.groupEnd() 上述一組方法可將執行group和groupEnd方法期間輸出至控制臺的信息歸屬于groupString分組顯示。分組可以嵌套。 代碼舉例：

????結果如下：

5、以javascript對象形式格式化DOM元素 默認情況下，console.log()將以XML形式展示DOM元素。 代碼舉例： ????結果如下：
????如果希望看到元素擁有哪些屬性以及它們的值，那么就需要用到console.dir()方法了，其效果與使用帶有%O格式符的console.log()方法一致。 代碼舉例： 結果如下：
6、以CSS定義風格輸出內容 Chrome還可以以指定的CSS格式輸出顯示指定內容。 代碼舉例：
????結果如下：
7、測量代碼執行時間 console.time(nameString)和console.timeEnd(nameString) 控制臺輸出自執行console.time(nameString)方法開始，直至遇到對應的console.timeEnd(nameString)方法的累積執行時間，單位為ms。使用該組方法可以檢測函數的執行時間。 代碼舉例：
????結果如下：
8、設置調試斷點
????debugger 該代碼的效果相當于在所在位置設置了一個調試斷點，當程序執行到debugger時，會中斷執行等待調試。 注：只有在打開程序員工具時，才有該效果。9、設置時間軸標簽 console.timeStamp(markName) 當執行到timeStamp()方法時，會產生一個時間軸標志。該語句僅在啟用時間軸面板錄制時有效。關于時間軸面板詳見后續文章。 代碼舉例： ????結果如下：(見藍色選中行時間軸：Timestamp:Adding Timeline) 命令行API 1、計算表達式 說是計算表達式，其實能執行一切javascript腳本，包括函數、JS代碼變量的讀取和賦值等。注意：這里所做的一切對當前頁面立即生效。 2、選擇DOM元素 $(condition)和$$(condition) $()返回符合條件的第一個元素，同?document.querySelector()效果一致。$$()以數組形式返回符合條件的所有元素，同document.querySelectorAll()效果一致。 x(xpath) 返回符合XPath路徑的DOM元素。 3、檢測DOM元素和javascript堆對象 inspect() 以XML形式展示傳入的DOM元素，顯示內容與console.log()一致，與$()語句輸出一致。若將($_)作為參數傳入inspect方法，表示顯示最近一次計算的對象。 4、快速選中最近選擇的元素 $0、$1、$2、$3、$4分別表示輸出最近一個元素、輸出倒數第二個元素、以此類推。 5、對象事件監控 monitorEvents(obj, event) 指定監控的對象的所有事件、所有對象的指定事件、指定對象的指定事件。該方法只能指定一個監控對象，但能指定多個事件。有多個事件時，需要以數組的形式傳遞，如下： monitorEvents(obj, [event1,event2,……] 由于網頁事件是可以冒泡的，所以，監控父對象時，子元素的相同事件一并會被監控到。 代碼舉例：

????結果如下：

6、CPU監控 profile(fileName)、profileEnd(fileName) 在Console里執行profile()方法啟動一次CPU跟蹤記錄，profileEnd()結束本次跟蹤。若省略fileName參數，則系統自動給予一個名字。當執行profileEnd()方法時，會將當前調試頁面切換到profiles面板，并顯示本次跟蹤的詳細信息。其效果與直接在profiles面板中選擇Collect javascript CPU profile一致。 代碼舉例：

????結果如下：

????多個profile()、profileEnd()可以相互間嵌套或者交叉。如：

總結

以上是生活随笔為你收集整理的Console的使用——Google Chrome代码调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。