今天要介紹的是針對前端 (Browser) 的 JavaScript 進行偵錯，說明如下。

debugger

這個 debugger 語法會開啟指令碼偵錯工具的網頁直接進入中斷點，或是強迫網頁啟動偵錯工具再配合我們常用的編輯器來對網頁進行偵錯。

進入中斷點有許多好處，你可以讓 JavaScript 發生例外狀況的時候透過中斷點暫停 JavaScript 執行，並檢查當下的 區域變數 (Locals)、設定、監看式 (Watch) 與瀏覽、呼叫堆疊 (Call Stack) 等等，對於 JavaScript 程式的除錯非常有幫助。

除錯面板簡介

• 檔案瀏覽控制台 (File Navigator pane)：位於面版左邊，列出頁面上所有可用的資源。
• 程式編輯控制台 (Code Editor)：在面版中間，當你從檔案瀏覽控制台中選擇檔案後，檔案的原始碼就會出現在這裡。
• JS 除錯控制台 (JavaScript debugging pane)：位於面版的右邊，這裡提供了很多除錯 JS 的工具。

設定一個中斷點

在 JS 中，要設定一個中斷點，可以使用 debugger 這個關鍵字，如下：

debugger

const handleDelete = () => {
  return SweetAlert.confirm({
    text: "Are you sure Delete !?",
    callback: () => {
      return false;
    }
  });
};

使用中斷點的時候要注意幾件事：

首先，你的程式需要被執行到，不然中斷點並不會被執行，所以下面這段程式的中斷點是不會被觸發的。

const handleDelete = () => {
	debugger
  return SweetAlert.confirm({
    text: "Are you sure Delete !?",
    callback: () => {
      return false;
    }
  });
};

有看出來為什麼嗎？因為 handleDelete function 沒有被執行，所以 debugger 自然沒有被觸發。

最後，在使用中斷點時，你的開發者工具一定要是開著，不然瀏覽器是不會有任何動作的。

Console 基本應用

在前端進行偵錯時自己都會使用瀏覽器所提供的 console.log 來記錄 debug 資訊，但是對於 console 來講，其實也提供了很多好用的 API 應用，可以讓開發者在除錯時更為方便，請看以下說明。

console.log()

最基本的應用是使用 console.log 紀錄內容，使用該 API 後會將內容輸出到瀏覽器的控制台。

• 印出 API 回傳的資料。
• 或是印出我們要的字串來檢查，該頁面是否有正常執行。
• 印出變數來檢查資料是否正確。
• 以上等等.....

console.trace()

會將一個堆疊軌跡 (stack trace) 印到主控台裡面。

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

console.warn 和 console.error

使用 warn 以及 error 等 API，可以增加閱讀 log 時的可讀性。

console.warn('Hello World !')
console.error('Hello World !')

Console.Table

另一種增加可讀性的方法是使用 console.table()，使用方式也相當簡單，使用 console.table 加上變數即可快速使用。

const rock1 = { name: 'SPYAIR', live: 2021 }
const rock2 = { name: 'back number', live: 2020 }

console.table({ rock1, rock2 })

Dumper.js

讓我們在使用 Node.js 時，會配合使用 console.log 來觀察程式執行中的變數變化，這個模組會採用更漂亮的方式來觀看這些變數。

Dumper.js 支援兩種模式：

• dd()，意思是顯示變數後就結束程式。
• dump()，意思是顯示變數後，後續的程式會繼續執行。

Dumper.js - dd()

const users1 = [
  { user: 'mary', age: 18, active: true, createdAt: new Date() },
  { user: 'fred', age: 18, active: true, createdAt: new Date() },
  { user: 'alan', age: 18, active: true, createdAt: new Date() },
]

dd(users1) // 這行之後的程式不會執行

console.log('End') 

Dumper.js - dump()

const users2 = [
  { user: 'mary', age: 18, active: true, createdAt: new Date() },
  { user: 'fred', age: 18, active: true, createdAt: new Date() },
  { user: 'alan', age: 18, active: true, createdAt: new Date() },
]

dump(users2) // 這行之後的程式會執行

console.log('End')

結論

今天不管是使用 debugger 還是 console API 來幫我們除錯，要注意以下：

• 開發者工具一定要先開。
• 下 debugger 或 console API 一定要在該頁面。
• 如果是下在 function 裡面，哪也一定要有執行該 function，這樣除錯指令也才會被觸發。