1、找到對應的文件
按F12打開網頁調試工具，默認打開的是Elements，顯示的是網頁標簽元素。選擇Source，在左側找到對應的js代碼文件（這里是在page標簽上找到的）
1.1、如何找到webpack打包后的文件
用 webpack 打包過后的項目，在本地服務器上運行時，它在 source 上隱藏得比較深，你可以在 top -> webpack:// 目錄下找到原代碼文件，名字和你自己命名的文件名相同。
如上圖，在 webpack:// 的目錄下可以找到原代碼文件（注意，不是在src目錄下，而是在 webpack:// 根目錄下）
或者：
你也可以通過在代碼文件上寫 debugger 語句來打斷點，代碼會執行到該語句而停止，相當於在該文件的該位置上手動打了斷點，並且 source 會自動定位出該文件。
參考：https://blog.csdn.net/feinifi/article/details/86513705
2、打斷點
在需要打斷的代碼上打斷點（打斷點時代碼會執行到這個位置為止，但不會執行這段代碼，比如下圖在53行打斷點，就不會執行53行的代碼，此時的strArr為undefined）
也可以在 JS 文件上手動加上 debugger 語句，相當於在該語句的位置上打了斷點，刷新瀏覽器或者觸發到該語句就會進行調試模式。
3、進行調試
刷新瀏覽器或者點擊觸發事件就能執行代碼，開始調試
鼠標停留在某一變量上可以看到變量在執行到該斷點時的值。
在最右側的狀態欄中，scope上可以看到執行到該斷點時的各個變量的值
執行斷點時可以選中觀察到紅箭頭指向的幾個按鈕。當你設置好斷點開始運行的時候，
第一個按鈕（F8）就會變成一個三角形。點擊運行至下一個斷點，若下面沒有斷點，它就會自動運行至結束。
第二個按鈕（F10）是逐行執行，如果這一行調用了一個函數，會一次性執行函數得到結果，而不會跳轉到函數內部去執行函數的過程
第三個按鈕（F11）是逐過程執行，一行一行地執行，只是當這一行是一個函數的時候，他會自動跳轉到函數內部的
第四個按鈕（shift + F11）是跳出該函數
第五個按鈕，是忽略所有斷點，自動執行至結束。
清除所有斷點方法：
4、谷歌瀏覽器調試的其他選項功能
4.1、禁用緩存
打開 network，勾選 disable cache，這樣每次刷新頁面都不會通過緩存來獲取數據，而是每次都會重新發出請求。
如下圖，勾選前可以看到某些請求返回的是 304。勾選禁用緩存后，每個請求返回的都是 200，可以看到沒有請求是通過緩存來獲取數據的了。
禁用前：
禁用后：
5、IE 瀏覽器的斷點調試
IE瀏覽器的斷點調試跟在谷歌瀏覽器上進行調試差不多一樣，只不過是一些按鈕和菜單不一樣而已。
下面是以 IE 11 進行調試舉例
從上圖可以看到，在調試程序菜單中進行斷點調試，在網絡菜單欄中可以看到接口的返回上送數據等。
第一個按鈕（F11）是逐過程執行，一行一行地執行，只是當這一行是一個函數的時候，他會自動跳轉到函數內部的
第二個按鈕（F10）是逐行執行，如果這一行調用了一個函數，會一次性執行函數得到結果，而不會跳轉到函數內部去執行函數的過程
第三個按鈕（shift + F11）是跳出該函數
在右邊你可以監聽到一些變量的值，也可以在搜索欄中對網站代碼進行文本搜索。