很多開(kāi)發(fā)人員都只是略知道一些瀏覽器 DevTool 調(diào)試的基礎(chǔ)知識(shí)。

使用最多的 console.log() 對(duì)于在代碼運(yùn)行時(shí)輸出值非常有用，通常可以幫助查明錯(cuò)誤。

但是，還有一高級(jí)的用法還有很多人不知道，所以并未得到充分利用，更快，更容易和更有用的高級(jí)的用法，這些高級(jí)的用法可用于客戶(hù)端腳本，Web 工作人員和服務(wù)工作人員。

Node.js 和 Deno 運(yùn)行時(shí)控制臺(tái)也支持許多功能。

1. 使用 ES6 解構(gòu)輸出變量名稱(chēng)

當(dāng)監(jiān)視多個(gè)值時(shí)，日志記錄可能會(huì)變得很復(fù)雜。通常有必要添加更多信息，例如

const?x?=?42;console.log('variableX:',?variableX); //?or console.log(`variableX:?${?variableX?}`);/* output: variableX:?42 */

更快的選擇是使用 ES6 對(duì)象銷(xiāo)毀分配。這會(huì)將變量添加到具有匹配屬性名稱(chēng)的對(duì)象。

換句話(huà)說(shuō)，只要地方 { and } 括號(hào)一個(gè)變量來(lái)顯示其名稱(chēng)和值：

console.log({?variableX?});/* output: {?variableX:?42?} */

2. 使用適當(dāng)?shù)娜罩鞠㈩?lèi)型

console.log() 眾所周知的最簡(jiǎn)單的方法：

console.log('no-frills?log?message');

但這不是唯一的類(lèi)型。消息可以歸類(lèi)為信息（與相同處理 console.log() ）：

console.info('this?is?an?information?message');

warnings:

console.warn('I?warned?you?this?could?happen!');

errors:

console.error('I\'m?sorry?Dave,?I\'m?afraid?I?can\'t?do?that');

或更不重要的 debug 調(diào)試消息：

console.debug('nothing?to?see?here?-?please?move?along');

console.table() 可以以更友好的格式輸出對(duì)象值：

const?obj?=?{propA:?1,propB:?2,propC:?3};console.table(?obj?);

console.table() 也可以用于一維或多維數(shù)組：

const?arr1?=?[[?1,?2,?3?],[?4,?5,?6?],[?7,?8,?9?]];console.table(?arr1?);

或?qū)ο髷?shù)組：

const?arr2?=?[{?a:?1,?b:?2,?c:?3?},{?a:?4,?b:?5,?c:?6?},{?a:?7,?b:?8,?c:?9?}];console.table(?arr2?);

其他選項(xiàng)包括：

• console.dir( obj ) 在 JavaScript 對(duì)象中顯示屬性的交互式列表

• console.dirxml( element ) 顯示來(lái)自指定 HTML 或 XML 節(jié)點(diǎn)的后代元素的交互式樹(shù)

• console.clear() 清除控制臺(tái)中所有以前的消息。

3. 過(guò)濾日志消息

瀏覽器以適當(dāng)?shù)念伾@示日志消息，但也可以對(duì)其進(jìn)行過(guò)濾以顯示特定類(lèi)型。

單擊 控制臺(tái) 面板左上方的圖標(biāo)，可打開(kāi) Chrome 的側(cè)欄：

請(qǐng)注意，console.debug() 僅在查看 詳細(xì) 選項(xiàng)時(shí)才會(huì)顯示消息。

4. 使用 printf-type 消息

所有日志類(lèi)型都可以使用 C 樣式的 printf消息格式，該格式定義帶有 % 指示符的模板，該指示符用于替換變量。

例如：

console.log('The?answer?to?%s?is?%d.','life,?the?universe?and?everything',42 ); //?The?answer?to?life,?the?universe?and?everything?is?42.

5. 記錄樣式

可以使用在任何消息類(lèi)型的第二個(gè)參數(shù)中作為字符串傳遞的標(biāo)準(zhǔn) CSS 設(shè)置日志消息的樣式。

%c 消息中的標(biāo)記指示樣式的應(yīng)用位置，例如

console.log('%cOK,?things?are?really?bad?now!',`font-size:?2em;padding:?0.5em?2em;margin:?1em?0;color:?yellow;background-color:?red;border-radius:?50%;` );

在 DevTools 控制臺(tái)中的結(jié)果是：

6. 使用類(lèi)似測(cè)試的斷言

console.assert() 當(dāng)條件失敗時(shí)，可以使用類(lèi)似 test 的命令來(lái)輸出消息。

可以使用條件定義斷言，然后在該條件失敗時(shí)輸出一個(gè)或多個(gè)對(duì)象，例如

console.assert(life?===?42,'life?is?expected?to?be',42,'but?is?set?to',life );

或者，可以使用消息和替換值：

console.assert(life?===?42,'life?is?expected?to?be?%s?but?is?set?to?%s',42,life );

當(dāng)條件失敗時(shí)，這兩個(gè)選項(xiàng)都將顯示斷言錯(cuò)誤：

7. 運(yùn)行堆棧跟蹤

可以使用以下命令輸出構(gòu)成當(dāng)前執(zhí)行點(diǎn)的所有函數(shù)調(diào)用的日志 console.trace()：

function?callMeTwo()?{console.trace();return?true; }function?callMeOne()?{return?callMeTwo(); }const?r?=?callMeOne();

跟蹤顯示了每個(gè)調(diào)用的行，可以在 “控制臺(tái)” 窗格中折疊或展開(kāi)該行：

8. 組日志消息

可以 console.group( label ) 在開(kāi)頭和 console.groupEnd() 結(jié)尾使用來(lái)將日志消息分為命名組。

消息組可以嵌套，折疊或展開(kāi)（console.groupCollapsed( label ) 最初顯示該組處于折疊狀態(tài)）：

//?start?log?group console.group('iloop');for?(let?i?=?3;?i?>?0;?i--)?{console.log(i);//?start?collapsed?log?groupconsole.groupCollapsed('jloop');for?(let?j?=?97;?j?<?100;?j++)?{console.log(j);}//?end?log?group?(jloop)console.groupEnd();}//?end?log?group?(iloop) console.groupEnd();

9. 使用性能計(jì)時(shí)器

該 time( label ) 命令啟動(dòng)一個(gè)計(jì)時(shí)器。timeEnd( label ) 到達(dá)關(guān)聯(lián)的命令后，將報(bào)告經(jīng)過(guò)的時(shí)間（以毫秒為單位）。

計(jì)時(shí)器可用于評(píng)估操作的性能-比管理自己的 Date() 計(jì)算更容易，更準(zhǔn)確，例如

//?start?timer console.time('bigloop');for?(let?i?=?999999999;?i?>?0;?i--);//?show?elapsed?time console.timeEnd('bigloop');

一個(gè)頁(yè)面上最多可以添加 10,000 個(gè)計(jì)時(shí)器，并且該 console.timeLog( label ) 命令將報(bào)告經(jīng)過(guò)的時(shí)間而不會(huì)停止計(jì)時(shí)器。

一個(gè)類(lèi)似的選項(xiàng)是 console.count( label ) 報(bào)告命令被調(diào)用的次數(shù)。

console.countReset( label ) 將命名計(jì)數(shù)器重置為零。

10. 按名稱(chēng)調(diào)試和監(jiān)視功能

DevTools Sources 面板（或 Firefox 中的 Debugger）允許您通過(guò)單擊行號(hào)來(lái)打開(kāi)文件并設(shè)置斷點(diǎn)。

基于 Chrome 的瀏覽器還允許您通過(guò) debug( functionName ) 在控制臺(tái)中輸入來(lái)設(shè)置斷點(diǎn)，例如

debug(?doSomething?);

該函數(shù)必須在全局名稱(chēng)空間中可用，并且瀏覽器將在調(diào)用調(diào)試器后立即啟動(dòng)它。可以使用 undebug( functionName ) 或通過(guò)重新加載頁(yè)面來(lái)取消調(diào)試。

的 monitor( functionName ) 和其相關(guān)聯(lián)的 unmonitor( functionName ) 命令被以類(lèi)似的方式使用。他們沒(méi)有停止執(zhí)行，而是記錄了對(duì)函數(shù)的每次調(diào)用并顯示了傳遞的參數(shù)：

function?doSomething?called?with?arguments:?"hello",?2

11. 查找并修復(fù)事件偵聽(tīng)器

Firefox DevTools 檢查器面板在任何附加了處理程序的 DOM 元素旁邊顯示一個(gè)事件圖標(biāo)。

單擊該圖標(biāo)以查看功能名稱(chēng)，然后單擊左側(cè)的箭頭圖標(biāo)以展開(kāi)代碼。

另外，“在調(diào)試器中打開(kāi)” 圖標(biāo)可在 “調(diào)試器” 窗格中找到處理程序，因此你可以設(shè)置斷點(diǎn)：

Chrome 的實(shí)現(xiàn)并不理想，但是您可以通過(guò)將 DOM 節(jié)點(diǎn)傳遞給 getEventListeners() 函數(shù)來(lái)查看所有事件偵聽(tīng)器。例如，getEventListeners( $0 ) 顯示應(yīng)用于“元素”面板中當(dāng)前突出顯示的 DOM 節(jié)點(diǎn)的偵聽(tīng)器：

12. 將屬性復(fù)制到剪貼板

console copy() 命令可以將任何值復(fù)制到剪貼板。它可以是原始值，數(shù)組，對(duì)象或 DOM 節(jié)點(diǎn)。

傳遞 DOM 節(jié)點(diǎn)后，copy() 將該元素及其所有子元素的 HTML 放置在剪貼板上。

等同于右鍵單擊一個(gè)節(jié)點(diǎn)，然后選擇 “復(fù)制”，然后選擇 “復(fù)制外部HTML” 。

該命令將 copy( document.documentElement ) 復(fù)制整個(gè) HTML文檔。可以將其粘貼到文本編輯器中，以方便閱讀標(biāo)記。

最后

瀏覽器 DevTools 已從基本控制臺(tái)演變?yōu)閺?fù)雜的開(kāi)發(fā)和調(diào)試環(huán)境。

console.log() 始終會(huì)很受歡迎，但其他選項(xiàng)可能會(huì)提供更快，更輕松的方法來(lái)實(shí)現(xiàn)零錯(cuò)誤！

本文翻譯自文章：[12 Ways to Improve Your DevTools Console Logging]

往期精文

• Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 項(xiàng)目配置最佳實(shí)踐

• TypeScript 中提升幸福感的 10 個(gè)高級(jí)技巧

• 推薦 7 個(gè) Vue2、Vue3 源碼解密分析的重磅開(kāi)源項(xiàng)目

通過(guò)閱讀本篇文章，如果有收獲的話(huà)，可以點(diǎn)個(gè)贊和在看，這將會(huì)成為我持續(xù)分享的動(dòng)力，感謝～

總結(jié)

以上是生活随笔為你收集整理的提高 DevTools 控制台调试 console 的 12 种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。