1 | 一、設(shè)置斷點(diǎn) |
有兩種方法可以給代碼添加斷點(diǎn)
1 | 二、設(shè)置斷點(diǎn)執(zhí)行條件 |
1 | 三、Call Stack 調(diào)用棧 |
1 | 四、DOM 元素設(shè)置斷點(diǎn) |
(3)設(shè)置好斷點(diǎn)后,當(dāng) DOM 元素要被修改時(shí),代碼就會(huì)在自動(dòng)停留在修改處。
1 | 五、統(tǒng)一管理所有斷點(diǎn) |
1 | 六、快捷鍵 |
1 | 七、格式化 |
(4)命令行中先輸入 copy(),然后將拷貝的數(shù)據(jù)粘貼到括號(hào)中
(5)回車后 copy 接口便會(huì)自動(dòng)將數(shù)據(jù)進(jìn)行格式化,并保存到剪貼板中。我們將其粘貼到文本編輯器中就可以看到效果:
1 | 八、使用 Snippets 編寫(xiě)代碼片段 |
(2)在代碼區(qū)域輸入 js 代碼
(3)按下“Ctrl + Enter”或者點(diǎn)擊右下方的按鈕執(zhí)行代碼,可以看到代碼執(zhí)行成功且反應(yīng)到當(dāng)前頁(yè)面上了。
1 | 九、Async 調(diào)試 |
Chrome 調(diào)試器的 Async 模式是為調(diào)試異步函數(shù)所設(shè)計(jì)一個(gè)功能
//做飯function cook(){ console.log('開(kāi)始做飯。'); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('做飯完畢!'); resolve('雞蛋炒飯'); }, 1000); }); return p;} //吃飯function eat(data){ console.log('開(kāi)始吃飯:' + data); var p = new Promise(function(resolve, reject){ //做一些異步操作 setTimeout(function(){ console.log('吃飯完畢!'); resolve('用過(guò)的碗和筷子'); }, 2000); }); return p;} cook().then(eat).then(function(data){ console.log(data);});
(2)開(kāi)啟 Async 模式后,異步函數(shù)之前的調(diào)用棧都會(huì)被記錄下來(lái),而且調(diào)用棧中代碼執(zhí)行狀態(tài)也得到了保留。
聯(lián)系客服