當(dāng)前位置:愛純凈 > 系統(tǒng)教程 > 怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

更新時間:2020-11-23 文章編輯:愛純凈 信息來源:網(wǎng)絡(luò) 閱讀次數(shù):

很多win10 64位純凈版編寫JavaScript代碼時如果有bug,就要不斷的去找錯誤。但是如果使用谷歌瀏覽器的開發(fā)者工具,就可以實(shí)現(xiàn)調(diào)試,這樣就不需要自己去找去算了。針對chrome開發(fā)者工具如何斷點(diǎn)調(diào)試,今天愛純凈介紹下怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

  第一步:在需要調(diào)試的界面按【 F12鍵】 啟動開發(fā)者工具。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

 

第二步:這里主要介紹如何調(diào)試,打開開發(fā)者工具后,點(diǎn)擊 【 Sources 標(biāo)簽】。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

第三步:下圖所示左邊 Page 標(biāo)簽下顯示的就是項(xiàng)目目錄。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

第四步:如果想要對 Main.ts 進(jìn)行調(diào)試,需要在調(diào)試代碼行前,點(diǎn)擊行數(shù)字位置所在,出現(xiàn)如圖所示的藍(lán)色標(biāo)志,表示定位成功。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

第五步:接下來運(yùn)行頁面,運(yùn)行到腳本所在就會在斷點(diǎn)的位置,出現(xiàn)暫停,將鼠標(biāo)移到指定變量,就會顯示出相關(guān)數(shù)據(jù)。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

第六步:配合右邊 watch 跟調(diào)用堆棧的使用,可以跳出該函數(shù),查看上一步函數(shù)等等。通過查看這些數(shù)據(jù)得到調(diào)試結(jié)果。

怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試_chrome開發(fā)者工具如何斷點(diǎn)調(diào)試

以上就是怎么在谷歌瀏覽器上設(shè)置斷點(diǎn)調(diào)試的圖文教程!更多win10系統(tǒng)教程關(guān)注愛純凈官網(wǎng)。

留言與評論(共有 條評論)
驗(yàn)證碼:

本類最新列表

最熱系統(tǒng)下載