8 招 JavaScript Console 運用技巧，讓你除錯更高效

參考網站

寫 JavaScript 需要檢視運作是否正確時候，都會使用 console.log 來檢視輸出或運算的值，而 console 的運用技巧不僅僅只有將值呈現在開發的 Console 介面中。本篇就來介紹許多 console 語法的實戰運用方法吧！

首先，在此先準備一份等等會用到的物件及陣列作為以下範例使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const Ming = {
  name: '小明',
  age: 15,
  favorite: '鍋燒意麵'
}
const Jay = {
  name: '杰倫',
  age: 16,
  favorite: '炒麵'
}
const Auntie = {
  name: '漂亮阿姨',
  age: 21,
  favorite: '蘿蔔糕'
}
const people = [Ming, Jay, Auntie];

為 console.log 的程式碼上色

有在 Facebook 頁面中開啟過開發者工具嗎？如果有，相信你對於以下這張圖並不陌生。

Console 中的文字並非只有固定的色彩，它與網頁中的文字一樣，都可以透過 CSS 的語法來調整其色彩，只要在 log 的文字前方先加入 %c 後，在 , 後方的參數就能夠傳入 CSS 語法做為參數，並且調整 Console 中呈現的文字樣式。

1
console.log(`%c ${Ming.name} 有瑟瑟的顏色`, 'color: orange; font-size: 24px');

console.table()：使用表格的方式陳列陣列的資訊

當要呈現資料於 Console 介面中，做常見的方式就是使用 log 的方法：

1
2
3
4
5
6
// 基本用法
console.log(Ming);
console.log(Jay);
console.log(Auntie);

console.log(people);

當然，這樣的用法絕對沒有問題，透過此方法可以將值一一陳列出來，不過當這些數值是 具有關聯性 時，一般的 log 就無法比較兩者之間的關係。

console.table() 針對物件之間有相同的屬性名稱時，就能夠輕易的比較相同屬性之間的關係。

1
2
console.table([Ming, Jay, Auntie]);
console.table(people);

除此之外，表格上方的標頭還可以點選作為排序使用，如果拿到一個 JSON 想比對其中的值，還要轉貼到 Excel 或是 sort() 語法安排，不如直接改用 table() 進行比較吧。

console.group()：群組化大量的 log 資訊

使用 log() 觀看迴圈值是合情合理的，不過當陣列的長度有上百筆時，Console 介面中的資料還真會滾到令人厭世。

1
2
3
4
for (let index = 0; index < people.length; index++) {
  const element = people[index];
  console.log(element);
}

在迴圈中使用 console.log() 會一一呈現資料，數量一多看起來就會顯的很吃力

使用 console.group()、console.groupEnd() 設置群組的起訖，在 Console 的介面中就能方便的收合群組內容。

1
2
3
4
5
6
console.group('迴圈群組');
for (let index = 0; index < people.length; index++) {
  const element = people[index];
  console.log(element);
}
console.groupEnd();

console.group(/* 群組名稱 */) 可以傳入 群組名稱 做為參數，作為在 Console 介面中辨識群組的顯示名稱，在介面中的群組名稱也會以粗體名稱，並且可以點擊箭頭符號收合群組內容。

console.time()：開發者最愛斤斤計較那 1ms 的效能了

每當寫出神邏輯的時候，都會擔心電腦效能跟不上自己的思維，這時候就可以使用 time() 追蹤片段程式碼所處理的時間差，得知自己是不是該換台電腦解決問題。

1
2
3
4
5
6
7
// 時間追蹤
console.time('迴圈處理時間');
for (let index = 0; index < people.length; index++) {
  const element = people[index];
  console.log(element);
}
console.timeEnd('迴圈處理時間');

在起訖中分別加入 time() 以及 timeEnd()，執行程式碼後就可以獲得處理的結果。

console.dir()：以物件的形式呈現資料

1
2
3
// HTML <p>推薦的 Console 語法</p>
const p = document.querySelector('p');
console.log(p);

當使用 console.log() 查看 DOM 元素，並想了解其中可用的方法或屬性時…，它可能會出現如下帶點失望的標籤，並且心裡默罵：

要這個幹嘛啦
要知道的是物件屬性、屬性

這時候需要的是 console.dir()，你會發現另一個新世界，原本的 DOM 元素被改為物件的形式呈現，你可以輕鬆展開此物件，並檢視裡面有哪些可用屬性。

1
2
const p = document.querySelector('p');
console.dir(p);

展開的 P 元素，包含其中所有的屬性（這在操作 DOM 時極為好用）

console.error()

寫程式有錯誤是難免的，但是如果是錯誤，卻沒有明確的提示導致沒有被發現問題，就失去提示的意義了，如果想讓 Console 的內容更加醒目，可以使用 console.error() 使訊息在 Console 介面中以錯誤的形式呈現。

1
console.error(`${Ming.name} 你完蛋了`);

當運用在一般文字訊息上時，也可以展開訊息並說明錯誤來源自哪一段程式碼。

在 AJAX 的未確認狀態中，也會使用 console.error 來呈現錯誤的回饋訊息，以下範例刻意將 API 路徑調整成錯誤的，並透過 console.error() 來將錯誤的資訊呈現在 Console 介面中

1
2
3
4
5
6
// Error
axios.get('https://randomuser.me/apis')
  .then((res) => console.log(res))
  .catch((error) => {
    console.error('待誌大條啦: ', error.response)
  })

console.warn()

錯誤太突兀了嗎？如果是自行開發的函式庫，已經透過各種形式避免程式碼出錯，但還是想把有錯誤的訊息給予開發者知道，那麼則可以使用 console.warn()。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Warning
/***
 * 超精美函式庫 💖
 * @param {number} num 純數值
 * @param {string} text 請傳入字串
 */
function superMagicLibrary(num, text) {
  if (typeof num !== 'number') {
    console.warn('尊重一下好嗎，請傳入純數值')
  }
}
superMagicLibrary('字串');