1、找到對(duì)應(yīng)的文件

按F12打開網(wǎng)頁(yè)調(diào)試工具，默認(rèn)打開的是Elements，顯示的是網(wǎng)頁(yè)標(biāo)簽元素。選擇Source，在左側(cè)找到對(duì)應(yīng)的js代碼文件（這里是在page標(biāo)簽上找到的）

1.1、如何找到webpack打包后的文件

用 webpack 打包過(guò)后的項(xiàng)目，在本地服務(wù)器上運(yùn)行時(shí)，它在 source 上隱藏得比較深，你可以在 top -> webpack://  目錄下找到原代碼文件，名字和你自己命名的文件名相同。

如上圖，在 webpack:// 的目錄下可以找到原代碼文件（注意，不是在src目錄下，而是在 webpack:// 根目錄下）

 或者：

你也可以通過(guò)在代碼文件上寫 debugger 語(yǔ)句來(lái)打斷點(diǎn)，代碼會(huì)執(zhí)行到該語(yǔ)句而停止，相當(dāng)于在該文件的該位置上手動(dòng)打了斷點(diǎn)，并且 source 會(huì)自動(dòng)定位出該文件。

參考：https://blog.csdn.net/feinifi/article/details/86513705

2、打斷點(diǎn)

在需要打斷的代碼上打斷點(diǎn)（打斷點(diǎn)時(shí)代碼會(huì)執(zhí)行到這個(gè)位置為止，但不會(huì)執(zhí)行這段代碼，比如下圖在53行打斷點(diǎn)，就不會(huì)執(zhí)行53行的代碼，此時(shí)的strArr為undefined）

也可以在 JS 文件上手動(dòng)加上 debugger 語(yǔ)句，相當(dāng)于在該語(yǔ)句的位置上打了斷點(diǎn)，刷新瀏覽器或者觸發(fā)到該語(yǔ)句就會(huì)進(jìn)行調(diào)試模式。

3、進(jìn)行調(diào)試

刷新瀏覽器或者點(diǎn)擊觸發(fā)事件就能執(zhí)行代碼，開始調(diào)試

鼠標(biāo)停留在某一變量上可以看到變量在執(zhí)行到該斷點(diǎn)時(shí)的值。

在最右側(cè)的狀態(tài)欄中，scope上可以看到執(zhí)行到該斷點(diǎn)時(shí)的各個(gè)變量的值

執(zhí)行斷點(diǎn)時(shí)可以選中觀察到紅箭頭指向的幾個(gè)按鈕。當(dāng)你設(shè)置好斷點(diǎn)開始運(yùn)行的時(shí)候，
第一個(gè)按鈕（F8）就會(huì)變成一個(gè)三角形。點(diǎn)擊運(yùn)行至下一個(gè)斷點(diǎn)，若下面沒(méi)有斷點(diǎn)，它就會(huì)自動(dòng)運(yùn)行至結(jié)束。
第二個(gè)按鈕（F10）是逐行執(zhí)行，如果這一行調(diào)用了一個(gè)函數(shù)，會(huì)一次性執(zhí)行函數(shù)得到結(jié)果，而不會(huì)跳轉(zhuǎn)到函數(shù)內(nèi)部去執(zhí)行函數(shù)的過(guò)程 
第三個(gè)按鈕（F11）是逐過(guò)程執(zhí)行，一行一行地執(zhí)行，只是當(dāng)這一行是一個(gè)函數(shù)的時(shí)候，他會(huì)自動(dòng)跳轉(zhuǎn)到函數(shù)內(nèi)部的
第四個(gè)按鈕（shift + F11）是跳出該函數(shù)
第五個(gè)按鈕，是忽略所有斷點(diǎn)，自動(dòng)執(zhí)行至結(jié)束。

清除所有斷點(diǎn)方法：

4、谷歌瀏覽器調(diào)試的其他選項(xiàng)功能

4.1、禁用緩存

打開 network，勾選 disable cache，這樣每次刷新頁(yè)面都不會(huì)通過(guò)緩存來(lái)獲取數(shù)據(jù)，而是每次都會(huì)重新發(fā)出請(qǐng)求。

如下圖，勾選前可以看到某些請(qǐng)求返回的是 304。勾選禁用緩存后，每個(gè)請(qǐng)求返回的都是 200，可以看到?jīng)]有請(qǐng)求是通過(guò)緩存來(lái)獲取數(shù)據(jù)的了。

禁用前：

禁用后：

5、IE 瀏覽器的斷點(diǎn)調(diào)試

IE瀏覽器的斷點(diǎn)調(diào)試跟在谷歌瀏覽器上進(jìn)行調(diào)試差不多一樣，只不過(guò)是一些按鈕和菜單不一樣而已。

下面是以 IE 11 進(jìn)行調(diào)試舉例

從上圖可以看到，在調(diào)試程序菜單中進(jìn)行斷點(diǎn)調(diào)試，在網(wǎng)絡(luò)菜單欄中可以看到接口的返回上送數(shù)據(jù)等。

第一個(gè)按鈕（F11）是逐過(guò)程執(zhí)行，一行一行地執(zhí)行，只是當(dāng)這一行是一個(gè)函數(shù)的時(shí)候，他會(huì)自動(dòng)跳轉(zhuǎn)到函數(shù)內(nèi)部的

第二個(gè)按鈕（F10）是逐行執(zhí)行，如果這一行調(diào)用了一個(gè)函數(shù)，會(huì)一次性執(zhí)行函數(shù)得到結(jié)果，而不會(huì)跳轉(zhuǎn)到函數(shù)內(nèi)部去執(zhí)行函數(shù)的過(guò)程 

第三個(gè)按鈕（shift + F11）是跳出該函數(shù) 

在右邊你可以監(jiān)聽到一些變量的值，也可以在搜索欄中對(duì)網(wǎng)站代碼進(jìn)行文本搜索。