幾個常使用的前端 debug 方法

在這邊紀錄幾個常用的前端 debug 方式，像是 console 系列以及在程式中或瀏覽器中使用中斷點的功能

Open Table of contents

console 系列

在知道 console 以前，最早是用 alert 來 debug，但是 alert 會導致程式停止有些不方便，後來發現 console 還有很多種方法可以使用。

呈現的結果可於各個瀏覽器的開發者工具 (DevTools) 中的主控台 (Console) 頁籤中查看。

這是最基本的 console 方法，可以印出變數、字串、結果等等。

console.log("Hello World");

可以印出物件或是陣列的資料，方便查看。

const obj = {
  name: "John",
  age: 18,
};
console.table(obj);

可以印出物件的屬性，方便開發，在操作 DOM 相關語法時十分實用。

let p = document.querySelector("p");
console.dir(p);

可以計算程式執行的時間，方便查看效能。

console.time("timer");
for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.timeEnd("timer");

可以追蹤程式的執行路徑，方便查看程式的流程，不過目前已經較少用到，因為像是 vscode 中都有內建的工具可以快速地找到程式的執行路徑。

function a() {
  b();
}
function b() {
  c();
}
function c() {
  console.trace();
}
a();

可以將相關的 log 組合在一起，方便查看以及可以做摺疊，類似於 #region 的功能。

console.group("查看 Hello World 的 log");
console.log("Hello World");
console.log("Hello World");
console.groupEnd("查看 Hello World 的 log");

可以在 console 中使用 css，方便美化 log 的呈現。
語法的部分在開頭處加上 %c，接著第二個參數接上 css 的內容，有點像是 inline style。

console.log("%c Red Hello World", "color: red; font-size: 20px;");

斷點的功能為當程式執行到這個點時，程式會暫停，並且可以透過開發者工具來查看程式的狀態以及此時此刻相關變數的值，方便 debug。

像是可以在 js 中插入 debugger;，此時使用瀏覽器瀏覽時就會停在這個點，並且可以透過開發者工具來查看程式的狀態以及此時此刻相關變數的值。

let num = 1;
function a() {
  num++;
  b();
}

function b() {
  num++;
  c();
}

function c() {
  debugger;
}

a();

執行到 c debugger; 的時候瀏覽器的偵錯工具就會自動跳出，可以透過右手邊的 範圍(Scope) 來查看變數的值、在呼叫堆疊(Call Stack) 中也可以看到目前的執行路徑，會回傳文章上述的 console.trace() 的結果。

後續也可以透過上方的工具列選項來接著執行下面的程式，由左至右分別為

而除了上述透過程式插入中斷點外，也可以透過瀏覽器開發者工具中的來源 (Sources) 頁籤來設定中斷點，進入到頁面後在某支程式旁邊的行數點一下，就會出現中斷點，並透過重新整理讓程式執行到這個中斷點，接著就和剛剛一樣來取得相關資訊。

像是我想透過中斷點來查蝦皮頁面上的某段程式，在執行到這個點時其他相關的變數，就可以透過這個方式來查看。

而在來源 (Sources) 頁籤中除了可以查看變數外，也有 XHR 以及 DOM 變化的中斷點可以使用，方便在各種情況下的 debug。

像是在 XHR/擷取中斷點 加入條件若 URL 中有 json 字樣則自動中斷，在瀏覽器發送請求時只要符合資格就會進入中斷點頁面，在範圍(Scope)的地方就可以看到像在 網路(Network) 頁籤中看到的 request header、response body 等資訊。