你可能不知道的 JavaScript 偵錯技巧

如果使用一種程式碼，那麼一定要先了解你的工具，熟悉了後可以極大的幫助你完成任務。這篇文章告訴大家一些你可能不知道的JavaScript 調試技巧，儘管JavaScript 的調試非常麻煩，但在掌握了技巧(tricks) 的情況下，你依然可以用盡量少的時間解決這些錯誤(errors) 和問題(bugs) 。希望大家好好掌握你可能不知道的 JavaScript 調試技巧。在我們累積程式碼的路上更進一步。

我們會列出14個你可能不知道的調試技巧, 但是一旦知道了，你就會迫不及待的想在下次需要調試JavaScript 程式碼的時候使用它們！

現在開始。

雖然許多技巧也可以用在別的檢查工具上，但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的。

1. 'debugger;'

#'debugger' 是console.log 以外我最喜歡的調試工具，簡單暴力。只要把它寫到程式碼裡，Chrome 運行的時候就會自動自動停在那裡。你甚至可以用條件語句把它包起來，這樣就可以在需要的時候執行它。

if (thisThing) {
    debugger;
}

2. 把objects 輸出成表格

##有時候你可能有一堆對像要檢查。你可以用 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);

輸出結果:

3. 試遍所有的尺寸

雖然把各種各樣的手機都放在桌上看起來很酷，但這卻很不現實。為什麼不選擇直接調整介面大小呢? Chrome 瀏覽器提供了你所需要的一切。 進入檢查面板點選 ‘切換裝置模式’ 按鈕，這樣你就可以調整視窗的大小了！

#4. 如何快速定位DOM 元素

在元素面板上標記一個DOM 元素並在concole 中使用它。 Chrome Inspector 的歷史記錄保存最近的五個元素，最後被標記的元素記為 $0，倒數第二個被標記的記為 $1，以此類推。

如果你像下面一樣把元素依序標記為'item-4′, 'item-3', 'item-2', 'item-1', 'item-0' ，你就可以在concole 中取得到DOM 節點:

5. 用console.time() 和console.timeEnd() 測試迴圈耗時

當你想知道某些程式碼的執行時間的時候這個工具將會非常有用，特別是當你定位很耗時的循環的時候。你甚至可以透過標籤來設定多個 timer 。 demo 如下:

console.time('Timer1');
 
var items = [];
 
for(var i = 0; i < 100000; i++){
   items.push({index: i});
}
 
console.timeEnd(&#39;Timer1&#39;);

運行結果:

##6.取得函數的堆疊軌跡資訊

#############你可能知道JavaScript 框架會產生很多的程式碼--快速的。 ###############它建立視圖觸發事件而且你最終會想知道函數呼叫是怎麼發生的。 ###############因為 JavaScript 不是一個很結構化的語言，有時候很難完整的了解到底發生了什麼事以及什麼時候發生的。 這時候輪到 console.trace（在終端機的話就只有 trace ）出場來調試 JavaScript了 。 ###############假設你現在想看car 實例在第33行呼叫funcZ 函數的完整堆疊軌跡資訊:###

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();
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();

###第33行會輸出:## ################################

你可以看到func1调用了func2, func2又调用了func4。Func4 创建了Car的实例，然后调用了方法car.funcX，等等。

尽管你感觉你对自己的脚本代码非常了解，这种分析依然是有用的。 比如你想优化你的代码。 获取到堆栈轨迹信息和一个所有相关函数的列表。每一行都是可点击的，你可以在他们中间前后穿梭。 这感觉就像特地为你准备的菜单。

7. 格式化代码使调试 JavaScript 变得容易

有时候你发现产品有一个问题，而 source map 并没有部署到服务器。不要害怕。Chrome 可以格式化 JavaScript 文件，使之易读。格式化出来的代码在可读性上可能不如源代码 —— 但至少你可以观察到发生的错误。点击源代码查看器下面的美化代码按钮 {} 即可。

8. 快速找到调试函数

来看看怎么在函数中设置断点。

通常情况下有两种方法：

1. 在查看器中找到某行代码并在此添加断点
2. 在脚本中添加 debugger

这两种方法都必须在文件中找到需要调试的那一行。

使用控制台是不太常见的方法。在控制台中使用 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();

在控制台中输入 debug(car.funcY)，脚本会在调试模式下，进入 car.funcY 的时候停止运行：

9.  屏蔽不相关代码

如今，经常在应用中引入多个库或框架。其中大多数都经过良好的测试且相对没有缺陷。但是，调试器仍然会进入与此调试任务无关的文件。解决方案是将不需要调试的脚本屏蔽掉。当然这也可以包括你自己的脚本。 点此阅读更多关于调试不相关代码（http://raygun.com/blog/javascript-debugging-with-black-box/）。

10. 在复杂的调试过程中寻找重点

在更复杂的调试中，我们有时需要输出很多行。你可以做的事情就是保持良好的输出结构，使用更多控制台函数，例如 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 一样发挥你的想象力！

11. 查看具体的函数调用和它的参数

在 Chrome 浏览器的控制台（Console）中，你会把你的注意力集中在具体的函数上。每次这个函数被调用，它的值就会被记录下来。

var func1 = function(x, y, z) {

//....

};

然后输出：

#這是查看將哪些參數傳遞到函數的一個很好的方法。但我必須說，如果控制台能夠告訴我們需要多少參數，那就好了。在上面的例子中，函數1期望3個參數，但是只有2個參數被傳入。如果程式碼沒有在程式碼中處理，它可能會導致一個 bug 。

12. 在控制台中快速存取元素

#在控制台中執行querySelector 一種更快的方法是使用美元符。 $(‘css-selector’)  將會傳回第一個符合的 CSS 選擇器。 $$(‘css-selector’) 將會回傳所有。如果你使用一個元素超過一次，它就值得被當作一個變數。

#13. Postman 很棒（但Firefox 更快）

很多開發人員都使用Postman 來處理Ajax 請求。 Postman 真不錯，但每次都需要打開新的瀏覽器窗口，新寫一個請求對象來測試。這確實有點兒煩人。

有時候直接使用在使用的瀏覽器會比較容易。

這樣的話，如果你想請求一個透過密碼保證安全的頁面時，就不再需要擔心驗證 Cookie 的問題。這就是 Firefox 中編輯並重新發送請求的方式。

開啟探查器並進入網路頁面，右鍵點選要處理的請求，選擇編輯並重新傳送。現在你想怎麼改就怎麼改。可以修改頭訊息，也可以編輯參數，然後點選重新傳送即可。

現在我發送了兩個同一個請求，但使用了不同的參數：

14. 節點變更時中斷

DOM 是個有趣的東西。有時候它發生了變化，但你不知道為什麼會這樣。不過，如果你需要調試 JavaScript，Chrome 可以在 DOM 元素改變的時候暫停處理。你甚至可以監控它的屬性。在Chrome 探查器上，右鍵點擊某個元素，並選擇中斷（Break on）選項來使用

以上就是關於JS的使用小技巧，有共同研究的朋友都可以一起探討。

相關閱讀:

JavaScript與ECMAScript 的差異

JavaScript實作下拉式選單的實例

24 JavaScript 面試題

以上是你可能不知道的 JavaScript 偵錯技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！