JavaScript調試方法

標籤：定義   ext   console   auto   定時器   沒有   定製   asc   .com   

一、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調試方法