實用的 javascript debug 小技巧
實用的 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')
回傳全部