Source調(diào)試JS代碼
理解單步調(diào)試，單步進(jìn)入塊，單步退出塊的區(qū)別
- 單步調(diào)試
- F10 跳過(guò)當(dāng)前函數(shù)調(diào)用
- 單步進(jìn)入塊
- F11 進(jìn)入當(dāng)前函數(shù)調(diào)用
- 單步退出塊
- Shift + F11 退出當(dāng)前函數(shù)調(diào)用
編輯CSS/JS
- Click on the “Sources” panel.
- Then, click on the “Filesystem” panel.
- Finally, click on “Add folder to workspace.”
- Chrome will open a window to let you choose the directory with the sourcefiles.
快速進(jìn)入調(diào)試方法
[圖片上傳失敗...(image-f3e4b3-1556554307580)]
注意：調(diào)試時(shí)授舟，可以在具體方法前臨時(shí)添加斷點(diǎn)，然后按F11進(jìn)入方法體內(nèi)昭雌，或者按F10跳過(guò)當(dāng)前方法移動(dòng)到下一個(gè)打上斷點(diǎn)的方法之前渔扎，如圖36行位置
重新執(zhí)行方法
[圖片上傳失敗...(image-8eb87d-1556554307580)]
- 點(diǎn)擊
Source右側(cè)Call Stack，選中想要從新執(zhí)行的方法（這里我想重新執(zhí)行success）夭问，右鍵點(diǎn)擊Restart frame泽西，然后點(diǎn)擊step即可回到success起始位置
調(diào)試功能區(qū)域
- Call Stack：方法調(diào)用棧
- Scope：全局變量，局部變量等
- Breakpoints：顯示當(dāng)前JS代碼中所有斷點(diǎn)
- XHR Breakpoints：
- 點(diǎn)擊右側(cè)的+號(hào)缰趋，可以添加請(qǐng)求的URL捧杉，一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷
- DOM Breakpoints
- 監(jiān)聽(tīng)和查看某個(gè)元素的變化情況
- TODO 測(cè)試
- Event listener Breakpoints
- 勾選對(duì)應(yīng)的事件類(lèi)型，當(dāng)觸發(fā)了該類(lèi)型的事件的 JS代碼 時(shí)就會(huì)自動(dòng)中斷
- 舉例：選中
Mouse - click之后秘血，那么觸發(fā)了鼠標(biāo)點(diǎn)擊時(shí)事件之后味抖，就會(huì)在對(duì)應(yīng)的代碼處停下
使用Source - Sinppets
- 好處：在項(xiàng)目環(huán)境頁(yè)面內(nèi)，該片段可執(zhí)行項(xiàng)目?jī)?nèi)的方法
- 瀏覽器會(huì)保存Sinppets
