Chrome開發者工具調試JS代碼片段

Snippets（代碼片段）

作用：Chrome開發者工具的Snippets提供了在Chrome裡儲存及運作或者調試一段js代碼的功能

入口：Chrome開發者工具-Sources面闆-Snippets面闆

打斷點調試js代碼

// 周遊對象的屬性
var user = {name:'a',age:};
$.each(user,function(propertyName,propertyVal){ // 斷點位置
    console.log(propertyName,propertyVal);
});
           

如果我們需要在上述代碼片段中的“斷點位置”注釋所在行加上斷點，以前我們需要寫一個頁面才能打斷點調試。現在可借助Snippets來完成。

1. 打開Chrome開發者工具-Sources面闆-Snippets面闆

2. 點選“New snippet”，新增一個可以編寫js代碼的snippet區域（右側），在其中編寫上述代碼，并在對應行打上斷點

3. 右鍵左側對應的snippet，選擇“Run”，程式會在斷點處停下