你可能不知道的14個JavaScript調試技巧

瞭解你的工具能夠在完成任務的過程當中發揮重大做用。儘管傳言 JavaScript 難以調試,可是若是你掌握了一些調試技巧,那麼你將會花費更少的時間來解決這些錯誤。css

咱們已經列出了14個你可能不知道的調試技巧,但可能要記住,這樣下次你須要調試 JavaScript 代碼時就能夠立刻使用了!前端

如今就立刻開始。ajax

1. ‘debugger;’

除了 console.log , debugger; 是咱們最喜歡、快速且骯髒的調試工具。一旦執行到這行代碼,Chrome 會在執行時自動中止。 你甚至可使用條件語句加上判斷,這樣能夠只在你須要的時候運行。愚人碼頭注:本人實在以爲這種調試方面很很差,由於後續的調試步驟和斷點調試沒什麼區別。並且調試完成後,還要記住刪掉這行代碼。確實有點骯髒。設計模式

JavaScript 代碼:

if (thisThing) {
debugger;
}

2. 將 objects 顯示爲表格

有時,你有一個複雜的對象要查看。你能夠用 console.log 查看並滾動瀏覽該對象,或者使用console.table展開,更容易看到正在處理的內容!瀏覽器

JavaScript 代碼:服務器

var animals = [
{ animal: 'Horse', name: 'Henry', age: 43 },
{ animal: 'Dog', name: 'Fred', age: 13 },
{ animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

輸出:cookie

3. 嘗試全部的屏幕尺寸

雖然在桌面設備上安裝不一樣移動設備模擬器很是棒,但在現實世界中並不可行。 應該是調整你的可視窗口,而不是替換移動設備? Chrome爲你提供所需的一切。 進入Chrome 開發者調試工具,而後點擊 ‘toggle device mode(切換設備模式)’ 按鈕。 實時觀察窗口變化便可!網絡

4. 如何快速找到DOM元素

在 Elements(元素) 面板中標記 DOM 元素,並能夠在 console(控制檯) 中使用它。Chrome 檢測器會保留其歷史記錄中的最後 5 個元素,以便最終標記的元素顯示 $0 ,倒數第二個標記元素 $1 ,依此類推。框架

若是你按照「item-4」,「item-3」,「item-2」,「item-1」,「item-0」的順序標記下列項,則能夠在控制檯中像這樣訪問DOM節點:函數

5. 使用 console.time() 和 console.timeEnd() 來標記循環耗時

要確切地知道某段代碼須要執行多長時間,尤爲是在調試慢循環時,可能會很是有用。您甚至能夠經過爲該方法分配標籤來設置多個定時器。讓咱們看看它是如何工做的:

JavaScript 代碼:

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

運行產生了以下結果:

6. 獲取函數的堆棧跟蹤信息

你可能知道JavaScript框架,會引入大量代碼。

它建立視圖觸發事件,並且你最終會想知道函數調用是怎麼發生的。

由於 JavaScript 不是一個很結構化的語言,有時候很難完整的瞭解到底 發生了什麼 以及 何時發生 的。 使用 console.trace((僅僅只是在控制檯中跟蹤) 能夠方便地調試JavaScript 。

假設你如今想看 car 實例在第24行調用 funcZ 函數的完整堆棧軌跡信息:

JavaScript 代碼:

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

24行將輸出:

如今咱們能夠看到 func1 調用 func2, func2 調用 func4。 Func4 建立了一個 Car 的實例,而後調用函數 car.funcX,依此類推。

即便你認爲很是瞭解本身的代碼,這種分析仍然可讓你感到很方便。假如你想改進你的代碼。獲取跟蹤信息和全部涉及的函數名單,每一項均可以點擊,你能夠在他們之間來回切換。這就像一個特意爲你準備的菜單。

7. 美化代碼使調試 JavaScript 變得簡單

有時你可能在生產環境中遇到問題,可是你的source maps沒有部署在服務器上。 不要懼怕 。Chrome 能夠將你的 Javascript 文件美化爲更易閱讀的格式。雖然代碼不會像你的真實代碼那樣有用 – 但至少你能夠看到發生了什麼。點擊檢查器中源代碼查看器下方的 {} 美化按鈕便可。

8. 快速查找要調試的函數

假設你想在一個函數中設置一個斷點。

最多見的兩種方法是:

1.在源代碼查看器查找到相應的行,並添加一個斷點
2.在代碼中添加debugger

在這兩個解決方案中,您必須在文件中單擊以調試特定行。

使用控制檯打斷點可能不太常見。在控制檯中使用 debug(funcName),當到達傳入的函數時,代碼將中止。

這個調試方法很快, 但缺點是不適用於私有函數或匿名函數。但除了私有和匿名函數, 這多是找到調試函數的最快方法。(注意:這個函數和console.debug 函數是不一樣的東西。)

JavaScript 代碼:

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. 屏蔽不相關的代碼

如今,咱們常常在應用中引入多個庫或框架。其中大多數都通過良好的測試且相對沒有陷阱。 可是,調試器仍然會進入與調試任務無關的文件。解決方案是屏蔽不須要調試的腳本。固然也能夠包括你本身的腳本。

10. 在複雜的調試過程當中尋找重點

在更復雜的調試中,咱們有時但願輸出不少行。你能夠作的事情就是使用更多控制檯函數來保持良好的輸出結構,例如, console.log, console.debug, console.warn, console.info, console.error等等。而後,能夠在控制檯中快速瀏覽。但有時候,某些 JavaScrip 調試信息並非你須要的。如今,能夠本身美化調試信息了。在調試 JavaScript 時,可使用 CSS 並自定義控制檯信息:

JavaScript 代碼:

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 控制檯中,您能夠關注特定的函數。 每次調用該函數時,都會對傳入的參數值進行記錄。

JavaScript 代碼:

var func1 = function(x, y, z) {
//....
};

輸出:

這是查看哪些參數傳遞給函數的好方法。 可是我必須說,若是控制檯能夠告訴咱們須要多少參數,那將是一件好事。 在上面的例子中,func1 指望 3個參數,可是隻有 2 個參數被傳入。若是在代碼中沒有處理這個參數,它可能致使一個可能的 bug 。

12. 在控制檯中快速訪問元素

在控制檯中執行 querySelector 一種更快的方法是使用美圓符。$('css-selector') 將會返回CSS選擇器的第一個匹配項。$$('css-selector') 將會返回全部匹配項。若是屢次使用一個元素,能夠把它保存爲一個變量。

13. Postman 很棒(但Firefox更快)

許多開發人員使用 Postman 查看ajax請求。Postman真的很優秀。但打開一個新的瀏覽器窗口,新寫一個請求對象來測試,這確實顯得很麻煩。

有時使用瀏覽器更容易。

當你使用瀏覽器查看時,若是請求一個密碼驗證頁面,你不須要擔憂身份驗證的cookie。下面看,在Firefox中如何編輯並從新發送請求。

打開檢查員並轉到網絡選項卡。 右鍵單擊所需的請求,而後選擇編輯並從新發送。 如今你能夠改變任何你想要的。 更改標題並編輯您的參數並點擊從新發送。

下面我用不一樣的屬性提出兩次請求:

14. 節點變化時中斷

DOM 是一個有趣的東西。 有時候它會被修改,可是你並不知道爲何。 可是,當您須要調試 JavaScript 時,Chrome會讓您在DOM元素髮生更改時暫停。 你甚至能夠監視它的屬性。 在Chrome 檢查器中,右鍵單擊該元素,而後在設置中選擇一箇中斷就能夠了:

這裏推薦一下個人前端學習交流羣:784783012,本身整理了一份2018最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴
相關文章
相關標籤/搜索