javascript的除錯技巧
1. debugger
‘debugger’ 與後端除錯的斷點類似。只要把它寫到程式碼裡,Chrome 等瀏覽器執行js的時候就會自動停在那。也可以用條件語句把它包裹起來,這樣就可以在需要的時候執行它。
if(flag){
debugger;
}
2. 把objects以表格形式輸出顯示
有時候你可能有一堆物件需要檢視。你可以用 console.log 把每一個物件都輸出來,你也可以用 console.table 語句把它們直接輸出為一個表格!
console.table(objects);
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('Timer1');
執行結果:
6.獲取函式的堆疊軌跡資訊
你可能知道 JavaScript 框架會產生很多的程式碼--迅速的。
它建立檢視觸發事件而且你最終會想知道函式呼叫是怎麼發生的。
因為 JavaScript 不是一個很結構化的語言,有時候很難完整的瞭解到底發生了什麼以及什麼時候發生的。 這個時候就輪到 console.trace(在終端的話就只有 trace)出場來除錯 JavaScript了 。
假設你現在想看 car 例項在呼叫 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();
輸出:
你可以看到func1呼叫了func2, func2又呼叫了func4。Func4 建立了Car的例項,然後呼叫了方法car.funcX,等等。
儘管你感覺你對自己的指令碼程式碼非常瞭解,這種分析依然是有用的。 比如你想優化你的程式碼。 獲取到堆疊軌跡資訊和一個所有相關函式的列表。每一行都是可點選的,你可以在他們中間前後穿梭。 這感覺就像特地為你準備的選單。
7. 格式化JavaScript程式碼
有時候引入的js檔案,由於採用壓縮檔案,常常在除錯時顯得很混亂,不利於快速除錯檢視。Chrome 瀏覽器可以格式化 JavaScript 檔案,使之易讀。格式化出來的程式碼在可讀性上可能不如原始碼 —— 但至少你可以觀察到發生的錯誤。點選原始碼檢視器下面的美化程式碼按鈕 {} 即可。
8. 快速找到除錯函式
來看看怎麼在函式中設定斷點。
通常情況下有兩種方法:
-
在檢視器中找到某行程式碼並在此新增斷點
-
在指令碼中新增 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. 遮蔽不相關程式碼
如今,經常在應用中引入多個庫或框架。其中大多數都經過良好的測試且相對沒有缺陷。但是,偵錯程式仍然會進入與此除錯任務無關的檔案。解決方案是將不需要除錯的指令碼遮蔽掉。當然這也可以包括你自己的指令碼。 點此(https://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)選項來使用: