目的：

在VSCode里，直接F5打開(kāi)html頁(yè)面，并且可以在編輯器里，進(jìn)行斷點(diǎn)調(diào)試js代碼。

準(zhǔn)備工作：

1、VSCode 軟件

2、js項(xiàng)目

3、VSCode 上裝一個(gè)插件：Debugger for Chrome

配置文件更改：

1、用VSCode裝載項(xiàng)目

2、然后按F5，出現(xiàn)這個(gè)框，選擇 Chrome

3、然后出現(xiàn)個(gè)配置的提示，并打開(kāi)了launch.json這個(gè)文件

添加如下信息：

       {             "name": "使用本機(jī) Chrome 調(diào)試",             "type": "chrome",             "request": "launch",              "file": "${workspaceRoot}/index.html",         //  "url": "http://mysite.com/index.html",          //使用外部服務(wù)器時(shí),請(qǐng)注釋掉 file, 改用 url, 并將 useBuildInServer 設(shè)置為 false "http://mysite.com/index.html             "runtimeExecutable": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe",              // 改成您的 Chrome 安裝路徑             "sourceMaps": true,             "webRoot": "${workspaceRoot}",         //  "preLaunchTask":"build",             "userDataDir":"${tmpdir}",             "port":5433         }

結(jié)果如圖：

4、更改調(diào)試方式

如圖：選擇左邊的圓形按鈕，然后出來(lái)這個(gè)調(diào)試配置管理界面，選擇“使用本機(jī) Chrome 調(diào)試”

5、最后在項(xiàng)目的 js 處設(shè)置好斷點(diǎn)，按 F5，就可以進(jìn)行斷點(diǎn)調(diào)試了。

相關(guān)文章教程推薦：vscode教程