實用的 Javascript debug 技巧

快速找到 DOM 元素

當我們使用 Chrome 的開發者工具(inspector)選取元素(Elements Panel)功能時 Chrome 會保留最後 5 個被我們選到的元素
此時只要透過 $0 - $4 就可以找出剛剛選取的元素 $0 是最新的以此類推

將物件資訊輸出成一個表格

使用 console.table 來輸出物件陣列。舉例如下

var animals = [
 { animal: 'Horse', name: 'Henry', age: 43 },
 { animal: 'Dog', name: 'Fred', age: 13 },
 { animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

追蹤 function 的堆疊

當程式碼越來越多越來越複雜時, 我們想知道到底是誰觸發了某個 function 就會變得異常困難. 由於 js 並不是靜態結構化的語言, 很多時候很難判斷過程中到底發生了什麼事. 這種時候使用 console.trace 會讓我們很方便地得知這些訊息

最後在 console 我們會由下而上知道其呼叫的關係

快速 debug function

假設你想要在一個 function 中設定中斷點, 比較常用的兩種方式

  • 在 inspector 加入中斷點
  • 在程式碼中加入 debugger

另外這邊要提到的方法是透過在 console 使用 debug 方法
直接使用 debug(function_name) 當執行到該函式時就會停止

把不需要 debug 的部分加入 Black box

監視指定的 function

在 console 面板使用 monitor(function_name) 觀察其帶入的參數

快速選取到元素

使用 $('css-selector') 會回傳第一個符合的元素, $$('css-selector') 回傳全部