不少開發人員都只是略知道一些瀏覽器 DevTool
調試的基礎知識。數組
使用最多的 console.log()
對於在代碼運行時輸出值很是有用,一般能夠幫助查明錯誤。瀏覽器
可是,還有一高級的用法還有不少人不知道,因此並未獲得充分利用,更快,更容易和更有用的高級的用法,這些高級的用法可用於客戶端腳本,Web 工做人員和服務工做人員。app
Node.js
和 Deno
運行時控制檯也支持許多功能。編輯器
當監視多個值時,日誌記錄可能會變得很複雜。一般有必要添加更多信息,例如函數
const x = 42; console.log('variableX:', variableX); // or console.log(`variableX: ${ variableX }`); /* output: variableX: 42 */
更快的選擇是使用 ES6 對象銷燬分配。這會將變量添加到具備匹配屬性名稱的對象。oop
換句話說,只要地方 { and }
括號一個變量來顯示其名稱和值:性能
console.log({ variableX }); /* output: { variableX: 42 } */
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()
清除控制檯中全部之前的消息。瀏覽器以適當的顏色顯示日誌消息,但也能夠對其進行過濾以顯示特定類型。
單擊 控制檯 面板左上方的圖標,可打開 Chrome 的側欄:
請注意,console.debug()
僅在查看 詳細 選項時纔會顯示消息。
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.
可使用在任何消息類型的第二個參數中做爲字符串傳遞的標準 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 控制檯中的結果是:
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 );
當條件失敗時,這兩個選項都將顯示斷言錯誤:
可使用如下命令輸出構成當前執行點的全部函數調用的日誌 console.trace()
:
function callMeTwo() { console.trace(); return true; } function callMeOne() { return callMeTwo(); } const r = callMeOne();
跟蹤顯示了每一個調用的行,能夠在 「控制檯」 窗格中摺疊或展開該行:
能夠 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();
該 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 )
將命名計數器重置爲零。
DevTools Sources
面板(或 Firefox 中的 Debugger)容許您經過單擊行號來打開文件並設置斷點。
基於 Chrome 的瀏覽器還容許您經過 debug( functionName )
在控制檯中輸入來設置斷點,例如
debug( doSomething );
該函數必須在全局名稱空間中可用,而且瀏覽器將在調用調試器後當即啓動它。可使用 undebug( functionName )
或經過從新加載頁面來取消調試。
的 monitor( functionName )
和其相關聯的 unmonitor( functionName )
命令被以相似的方式使用。他們沒有中止執行,而是記錄了對函數的每次調用並顯示了傳遞的參數:
function doSomething called with arguments: "hello", 2
Firefox DevTools 檢查器面板在任何附加了處理程序的 DOM 元素旁邊顯示一個事件圖標。
單擊該圖標以查看功能名稱,而後單擊左側的箭頭圖標以展開代碼。
另外,「在調試器中打開」 圖標可在 「調試器」 窗格中找處處理程序,所以你能夠設置斷點:
Chrome 的實現並不理想,可是您能夠經過將 DOM
節點傳遞給 getEventListeners()
函數來查看全部事件偵聽器。例如,getEventListeners( $0 )
顯示應用於「元素」面板中當前突出顯示的 DOM
節點的偵聽器:
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 。
經過閱讀本篇文章,若是有收穫的話,能夠點個贊和在看,這將會成爲我持續分享的動力,感謝~