技術領域總是充滿著神秘的未知和挑戰,有趣又令人不能自拔。就像 JavaScript,即使是每天使用它進行開發交互的開發人員,而語言的某些部分仍然未被開發。
了解工具可以使工具最大限度的幫助你完成任務。盡管JavaScript的調試非常麻煩,但在掌握了技巧 (tricks) 的情況下,依然可以用盡量少的的時間解決這些錯誤 (errors) 和問題 (bugs) 。那麼今天的這篇“前端開發教程之14個JavaScript 調試技巧了解一下”就請大家放心食用吧!
1. ‘debugger;’
‘debugger’ 是 console.log 之外最好的調試工具,簡單暴力。隻要把它寫到代碼裏,Chrome 運行的時候就會自動自動停在那。甚至可以用條件語句把它包裹起來,這樣就可以在需要的時候才執行它。也是一款非常好用的調試工具了。
if (thisThing) {
debugger;
}
2. 把 objects 輸出成表格
很多的時候,你可能會有一堆對象需要查看。可以用console.log把每一個對象都輸出出來,也可以用console.table語句直接把所有的對象都直接輸出成為一個表格。demo如下:
var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);
輸出結果:
3. 試遍所有的尺寸
雖然把各種各樣的手機都擺在桌子上看起來很酷,但卻很不現實。但是,瀏覽器內卻提供了你所需要的一切。進入檢查麵板點擊“切換設備模式”按鈕。這樣,就可以在窗口內調整視窗的大小。
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 實例在第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. 快速找到調試函數
我們來看看怎麼在函數中設置斷點。
通常情況下有兩種方法:
在查看器中找到某行代碼並在此添加斷點
在腳本中添加 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)選項來使用:
作者:技術學派 來源:頭條號
下一篇 Nginx超詳細入門教程
熱門課程
專業講師指導 快速擺脫技能困惑相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題,火星幫你解答本文介紹火星3D模型師的培訓內容,包括火星地形建模、紋理映射、3D打印等技術,以及火星時代教育的傳授方法。
找尋最好的角色遊戲原畫培訓機構,火星時代教育是不二之選,專業培訓團隊,資深行業導師,打造你的遊戲原畫夢想。”/> <meta name=
脫穎而出的模型設計培訓機構評估,詳細分析火星時代教育在優質教學、多元化課程設計以及專業師資方麵的超越
零基礎华体会hth体育app在线登录 模型培訓 - 如何啟動您的华体会hth体育app在线登录 之旅
零基礎也能學習华体会hth体育app在线登录 。本文將介紹火星時代教育提供的零基礎华体会hth体育app在线登录 模型培訓課程以及如何通過它開始你的华体会hth体育app在线登录 之旅。
火星時代教育的零基礎3D-Max培訓課程為您全方位解析3D-Max設計軟件的使用技巧和操作方法,幫助您無壓力掌握3D-Max並充分提升設計實力
本文詳細解析什麼樣的影視模型培訓中心是優質的,同時強調火星時代教育對於雕塑未來影視模型界英才的重要作用。
1. 打開微信掃一掃,掃描左側二維碼
2. 添加老師微信,馬上領取免費課程資源
同學您好!