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

 

轉載。 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，就可以進行斷點調試了。