JavaScript調試方法
一、console.log和debugger調試方法
這兩種方法使我們一般最喜歡的調試方法
一旦執行到這行代碼,Chrome 會在執行時自動停止。
你甚至可以使用條件語句加上判斷,這樣可以只在你需要的時候運行。
if (thisThing) { debugger; }
這兩種方法還有一個弊端,有人形容他們兩的詞語用到了骯臟,哈哈哈哈哈
(之所以形容他骯臟主要是因為調試完後還要刪除這段代碼)
二、console.table方法進行調試
當遇到一個對象時,我們需要看到他的值,一般我們會使用到console.log方法;
但是當遇到一個較為復雜結構的對象,輸出的結果會不便於我們觀察,這個時候我們就用到了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);
三、console.time和console.end方法
要確切地知道某段代碼需要執行多長時間,尤其是在調試慢循環時,可能會非常有用。
您甚至可以通過為該方法分配標簽來設置多個定時器。讓我們看看它是如何工作的:
console.time(‘Timer1‘); var items = []; for(var i = 0; i < 100000; i++){ items.push({index: i}); } console.timeEnd(‘Timer1‘);
四、console.trace方法——獲取函數的堆棧跟蹤信息
函數執行的順序——方便自己了解自己的代碼,像是一個特定的為自己定制的菜單
var car; var func1 = function() { func2(); } var func2 = function() { func4(); } var func3 = function() { } var func4 = function() { car = new Car(); car.funcX(); } var Car = function() { this.brand = ‘volvo’; this.color = ‘red’; this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } this.funcZ = function() { console.trace(‘trace car’) } } func1();
五、debug(funcName)——快速查找要調試的函數
在控制臺中使用 debug(funcName)
,當到達傳入的函數時,代碼將停止。
這個調試方法很快, 但缺點是不適用於私有函數或匿名函數。
但除了私有和匿名函數, 這可能是找到調試函數的最快方法。
(註意:這個函數和console.debug
函數是不同的東西。)
var func1 = function() { func2(); }; var Car = function() { this.funcX = function() { this.funcY(); } this.funcY = function() { this.funcZ(); } } var car = new Car();
六、Blackbox script——在調試過程中屏蔽不相關的代碼
現在,我們經常在應用中引入多個庫或框架
其中大多數都經過良好的測試且相對沒有陷阱。
但是,調試器仍然會進入與調試任務無關的文件。
解決方案是屏蔽不需要調試的腳本。當然也可以包括你自己的腳本。
七、在復雜的調試過程中尋找重點
在更復雜的調試中,我們有時希望輸出很多行。
你可以做的事情就是使用更多控制臺函數來保持良好的輸出結構,
console.log
, console.debug
, console.warn
, console.info
, console.error
但有時候,某些 JavaScrip 調試信息並不是你需要的。
現在,可以自己美化調試信息了。
在調試 JavaScript 時,可以使用 CSS 並自定義控制臺信息:
console.todo = function(msg) { console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘); } console.important = function(msg) { console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘); } console.todo(“This is something that’ s need to be fixed”); console.important(‘This is an important message’);
在 console.log()
中, 可以用 %s
設置字符串,%i
設置數字,%c
設置自定義樣式等等,還有很多更好的 console.log()
使用方法。
如果使用的是單頁應用框架,可以為視圖(view)消息創建一個樣式,為模型(models),集合(collections),控制器(controllers)等創建另一個樣式。
也許還可以像 wlog,clog 和 mlog 一樣發揮想象力!
JavaScript調試方法