原文連結：https://www.cnblogs.com/sunny3158/p/17797552.html
一、打斷點的方式
1.找到原始碼位置，新增斷點
（1）尋找原始碼位置
①如果是正常html頁面，那麼原始碼一般是在對應域名下面。如果是webpack處理的頁面，並且開啟了原始碼對映，原始碼就是在webpack://下面。可透過快捷鍵ctrl+ o開啟搜尋框輸入檔名搜尋原始碼.
②使用console.log輸出語句，點選控制檯輸出行右側的連結，可以跳至相應的原始碼位置（個人覺得沒必要，如果已經能在編輯器中找到原始碼，那麼可以直接使用第二種新增斷點的方式）
③使用瀏覽器控制檯編輯程式碼並儲存
在Filesystem新增資料夾到工作路徑，選擇之後會有提示，點選接受。它可以編輯之後ctrl+s真的儲存到檔案，這個可以當編輯器用了。
特殊情況：數字行是灰色的，就是不可斷點；新增某一行斷點，會跳轉到另一個頁面並命中某一行,這個頁面的背景色是黃色且檔名是VM開頭。
上述情況，大部分都是因為瀏覽器顯示的原始碼版本，跟真正的原始碼檔案不一致，只需要重新整理一下頁面，保證顯示的原始碼是最新的即可。
2.直接書寫斷點
在編輯器中新增在想要的程式碼斷點處，此方法不需要手動斷點，但是麻煩的是可能你除錯一次就不用再除錯了，但是每次執行到那裡都會停下，必須移除這個程式碼才行
debugger