我是一名后端.NET開發人員因業務需求需要開發前端，習慣了下斷點F11，F10調試代碼的過程，突然讓我看JS讓我很不適應，因此這里我主要介紹兩種下斷點調試JS的方法。
方法一：Chrome內置斷點功能調試JS
命中斷點后，再按下URL欄左邊的小圓圈即可下斷點調試。
方法二:
VSCode下安裝Debugger for Chrome(安裝過程不再介紹，網上一堆自行百度)
這里主要介紹的是launch.json文件的修改(網上很多關於這個文件的修改但是我試過很多都不行。。。這里我獻上自己親自測試通過的修改方法)：
{
// 使用 IntelliSense 了解相關屬性。
// 懸停以查看現有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"name": "使用本機 Chrome 調試",
"type": "chrome",
"request": "launch",
//這里一定要注意！！！網上很多這邊寫的都不對，后來一個一個試覺得這樣是最簡單也是最方便的(這里的意思是指運行你當前打開的文件,有些博客寫的是寫死文件的路徑其實沒必要)
"file": "${file}",//${workspaceRoot}
// "url": "http://mysite.com/index.html",
//使用外部服務器時,請注釋掉 file, 改用 url, 並將 useBuildInServer 設置為 false "http://mysite.com/index.html
//這邊大部分人Chrome的路徑都不需要修改如果你不是Chrome或者安裝在D盤需要自己改一下
"runtimeExecutable": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
// "preLaunchTask":"build",
"userDataDir":"${tmpdir}",
"port":5433
}
]
}
然后！！！
就成功啦!!!
