作者 | Indrek Lasn 譯者 | 王強 編輯 | 張之棟、王文婧 JavaScript 為我們的代碼調試提供了足夠多的工具，但調試 JavaScript 代碼最好的方法又是什麼呢？
調試 JavaScript 代碼的最簡單途徑就是簡單地通過 console.log 方法輸出結果。雖然它能用，但這并不是最理想的處理方式。如果有更好的方法，何不探索一番呢？
“來自控制台的 Hello”
console 對象提供對浏覽器調試控制台的通路。僅當在浏覽器上運作 JavaScript 代碼(即用戶端代碼而非服務端代碼)時，才可以使用 console 對象。不同浏覽器的工作方式各不相同，但是通常都會提供一組正常功能。調試語句最棒的一點是它們相容所有庫和架構，因為它們是在核心語言中編寫的。
console.log 的最基本使用場景是顯示代碼的輸出。考慮以下代碼：
它記錄傳遞給 sayHello 函數的名稱。
輸出傳遞給函數的名稱
如果我們想知道必須調用 sayHello 函數多少次，該怎麼辦？有一個簡單的方法，稱為 console.count()。
console.count count() 會輸出使用該标簽調用它的次數。如果沒有參數，count() 的行為就像使用預設标簽調用一樣。
function
上面的代碼記錄以下内容：
統計我們調用 sayHello 函數的次數
這樣可以統計出調用函數的次數，但如果要統計調用相同名稱函數的次數怎麼辦？一種方法是簡單地将 name 參數傳遞給 count 方法。
function
搞定！該函數跟蹤我們用每個名稱調用這個函數的次數。
統計我們說每個名字的次數
console.warn 以下方法将警告消息輸出到控制台，在使用開發人員工具或 API 時非常有用。console.warn 是一種理想選擇，用來讓使用者知道某些事情不對勁，例如省略參數或讓開發人員知道 API/ 軟體包版本已過時。
上面的代碼檢查 name 參數是否傳遞給函數。如果未輸入任何名稱，則會記錄一條警告消息，提示其考慮某些事項。
未傳遞名稱時，向使用者顯示警告消息。
console.table 如果我們要處理數組或對象，則在顯示資料時 console.table 很有用。數組中的每個元素将是表中的一行。以下面的示例為例，其中有一系列水果組成的數組。如果将 fruits 數組傳遞給 console.table 方法，則應該看到一個列印到控制台的表。
const fruits = [
而且如果我們看一眼控制台，應該看到一個描述數組的表。
以表格形式顯示數組
你可以想象一下，當我們處理具有數百個(甚至數千個)值的更大數組，這種方法會非常有用。這裡有一個例子來說明問題，其中數組有更多的值。
const fruits = [
如果我們用數組調用 console.table，我們應該看到下表。
在表格中顯示所有水果
使用數組很簡單。如果我們要處理的是對象呢？
注意，現在我們有了一個對象而不是一個數組。該對象擁有兩個鍵：寵物的 name 和 type。
該表沒有像之前那樣登出值，而是顯示值以及鍵和值。如果我們還有一個對象并嘗試将其列出，該怎麼辦？
不出所料，兩個單獨的對象顯示在兩個不同的表中。
兩個對象
如果我們想将它們配對在一個表中，則将對象包裝在數組中。
現在我們将對象分組到一個表中。
通過将對象包裝在數組中進行分組
console.group 在使用集合或連結資料時，請使用嵌套組來直覺地關聯相關消息，進而讓輸出井井有條。要建立一個新的嵌套塊，請調用 console.group()。
console.log(
以下代碼顯示嵌套的塊級控制台語句——在處理基于關系的資料時很有用。
console.groupCollapsed() 方法也差不多，但是新塊是折疊的，需要單擊顯示按鈕才能讀取它。
概 要
請使用語言自身提供的所有工具，能用就用。簡單提一下：由于 debugger 本身就值得單獨寫一篇文章來探讨，是以我們暫時跳過了它的内容。
如果你對 debugger 感到好奇，請參閱這篇文章: https://medium.com/@indreklasn/how-to-find-bugs-in-your-code-with-the-debugger-a7f739ea98
如果你剛入門 JavaScript，想要學習這種語言，我建議你先閱讀相關書籍，同時結合實際的建構來學習。先看一下《更聰明的 JavaScript 學習方式》一書，這裡還列出了一些用來建構的有趣應用程式: https://medium.com/better-programming/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c
感謝閱讀。
原文連結: https://medium.com/better-programming/boost-your-javascript-debugging-skills-with-these-console-tricks-ab984c70298a