轉載。 https://blog.csdn.net/arvin0/article/details/53673351

一、效果目的
1.在VSCode裏，直接F5打開html頁面，並且可以在編輯器裏，進行斷點調試js代碼；

二、工具準備
1.VSCode 軟件
2.一個js項目
3.VSCode 上裝一個插件：Debugger for Chrome
如圖

三、配置文件更改
1.用VSCode裝載項目

2.然後按F5，出現這個框

選擇 Chrome

3.然後出現個配置的提示，和打開了launch.json這個文件

在 這個文件裏添加一段配置信息

        {
            
 
"name": "使用本機 Chrome 調試",
            "type": "chrome",
            "request": "launch",
             "file": "${workspaceRoot}/index.html",
        //  "url": "http://mysite.com/index.html", //使用外部服務器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設置為 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
        }

結果如圖

4.然後，更改調試方式 

如圖，選擇左邊的圓形按鈕，然後出來這個調試配置管理界面，選擇“使用本機 Chrome 調試”。

5.然後在項目的 js 處設置好斷點，按 F5，就可以進行斷點調試了。

使用VSCode 斷點調試 js項目，html頁面