提升 DevTools 控制檯調試的 12 種方法

不少開發人員都只是略知道一些瀏覽器 DevTool 調試的基礎知識。數組

使用最多的 console.log() 對於在代碼運行時輸出值很是有用,一般能夠幫助查明錯誤。瀏覽器

可是,還有一高級的用法還有不少人不知道,因此並未獲得充分利用,更快,更容易和更有用的高級的用法,這些高級的用法可用於客戶端腳本,Web 工做人員和服務工做人員。app

Node.jsDeno 運行時控制檯也支持許多功能。編輯器

1. 使用 ES6 解構輸出變量名稱

當監視多個值時,日誌記錄可能會變得很複雜。一般有必要添加更多信息,例如函數

const x = 42;

console.log('variableX:', variableX);
// or
console.log(`variableX: ${ variableX }`);

/*
output:
variableX: 42
*/

更快的選擇是使用 ES6 對象銷燬分配。這會將變量添加到具備匹配屬性名稱的對象。oop

換句話說,只要地方 { and } 括號一個變量來顯示其名稱和值:性能

console.log({ variableX });

/*
output:
{ variableX: 42 }
*/

2. 使用適當的日誌消息類型

console.log() 衆所周知的最簡單的方法:測試

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

但這不是惟一的類型。消息能夠歸類爲信息(與相同處理 console.log() ):this

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

warnings:spa

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

errors:

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

或更不重要的 debug 調試消息:

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

console.table() 能夠以更友好的格式輸出對象值:

const obj = {
    propA: 1,
    propB: 2,
    propC: 3
  };

console.table( obj );

console.table() 也能夠用於一維或多維數組:

const arr1 = [
    [ 1, 2, 3 ],
    [ 4, 5, 6 ],
    [ 7, 8, 9 ]
  ];

console.table( arr1 );

或對象數組:

const arr2 = [
    { a: 1, b: 2, c: 3 },
    { a: 4, b: 5, c: 6 },
    { a: 7, b: 8, c: 9 }
  ];

console.table( arr2 );

其餘選項包括:

  • console.dir( obj ) 在 JavaScript 對象中顯示屬性的交互式列表
  • console.dirxml( element ) 顯示來自指定 HTML 或 XML 節點的後代元素的交互式樹
  • console.clear() 清除控制檯中全部之前的消息。

3. 過濾日誌消息

瀏覽器以適當的顏色顯示日誌消息,但也能夠對其進行過濾以顯示特定類型。

單擊 控制檯 面板左上方的圖標,可打開 Chrome 的側欄:

請注意,console.debug() 僅在查看 詳細 選項時纔會顯示消息。

4. 使用 printf-type 消息

全部日誌類型均可以使用 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. 記錄樣式

可使用在任何消息類型的第二個參數中做爲字符串傳遞的標準 CSS 設置日誌消息的樣式。

%c 消息中的標記指示樣式的應用位置,例如

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 控制檯中的結果是:

6. 使用相似測試的斷言

console.assert() 當條件失敗時,可使用相似 test 的命令來輸出消息。

可使用條件定義斷言,而後在該條件失敗時輸出一個或多個對象,例如

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
);

當條件失敗時,這兩個選項都將顯示斷言錯誤:

7. 運行堆棧跟蹤

可使用如下命令輸出構成當前執行點的全部函數調用的日誌 console.trace()

function callMeTwo() {
  console.trace();
  return true;
}

function callMeOne() {
  return callMeTwo();
}

const r = callMeOne();

跟蹤顯示了每一個調用的行,能夠在 「控制檯」 窗格中摺疊或展開該行:

8. 組日誌消息

能夠 console.group( label ) 在開頭和 console.groupEnd() 結尾使用來將日誌消息分爲命名組。

消息組能夠嵌套,摺疊或展開(console.groupCollapsed( label ) 最初顯示該組處於摺疊狀態):

// start log group
console.group('iloop');

for (let i = 3; i > 0; i--) {

  console.log(i);

  // start collapsed log group
  console.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. 使用性能計時器

time( label ) 命令啓動一個計時器。timeEnd( label ) 到達關聯的命令後,將報告通過的時間(以毫秒爲單位)。

計時器可用於評估操做的性能-比管理本身的 Date() 計算更容易,更準確,例如

// start timer
console.time('bigloop');

for (let i = 999999999; i > 0; i--);

// show elapsed time
console.timeEnd('bigloop');

一個頁面上最多能夠添加 10,000 個計時器,而且該 console.timeLog( label ) 命令將報告通過的時間而不會中止計時器。

一個相似的選項是 console.count( label ) 報告命令被調用的次數。

console.countReset( label ) 將命名計數器重置爲零。

10. 按名稱調試和監視功能

DevTools Sources 面板(或 Firefox 中的 Debugger)容許您經過單擊行號來打開文件並設置斷點。

基於 Chrome 的瀏覽器還容許您經過 debug( functionName ) 在控制檯中輸入來設置斷點,例如

debug( doSomething );

該函數必須在全局名稱空間中可用,而且瀏覽器將在調用調試器後當即啓動它。可使用 undebug( functionName ) 或經過從新加載頁面來取消調試。

monitor( functionName ) 和其相關聯的 unmonitor( functionName ) 命令被以相似的方式使用。他們沒有中止執行,而是記錄了對函數的每次調用並顯示了傳遞的參數:

function doSomething called with arguments: "hello", 2

11. 查找並修復事件偵聽器

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

單擊該圖標以查看功能名稱,而後單擊左側的箭頭圖標以展開代碼。

另外,「在調試器中打開」 圖標可在 「調試器」 窗格中找處處理程序,所以你能夠設置斷點:

Chrome 的實現並不理想,可是您能夠經過將 DOM 節點傳遞給 getEventListeners() 函數來查看全部事件偵聽器。例如,getEventListeners( $0 ) 顯示應用於「元素」面板中當前突出顯示的 DOM 節點的偵聽器:

12. 將屬性複製到剪貼板

console copy() 命令能夠將任何值複製到剪貼板。它能夠是原始值,數組,對象或 DOM 節點。

傳遞 DOM 節點後,copy() 將該元素及其全部子元素的 HTML 放置在剪貼板上。

等同於右鍵單擊一個節點,而後選擇 「複製」,而後選擇 「複製外部HTML」 。

該命令將 copy( document.documentElement ) 複製整個 HTML 文檔。能夠將其粘貼到文本編輯器中,以方便閱讀標記。

最後

瀏覽器 DevTools 已從基本控制檯演變爲複雜的開發和調試環境。

console.log() 始終會很受歡迎,但其餘選項可能會提供更快,更輕鬆的方法來實現零錯誤!

本文翻譯自文章:12 Ways to Improve Your DevTools Console Logging

往期精文

歡迎關注公衆號: 「全棧修煉」,回覆 「電子書」 便可以得到下面 300 本技術精華書籍哦,貓哥 wx:CB834301747 。

經過閱讀本篇文章,若是有收穫的話,能夠點個贊在看,這將會成爲我持續分享的動力,感謝~

相關文章
相關標籤/搜索