一、效果目的
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，就可以進行斷點除錯了。

6.接著就 Enjoy!

PS：這種方法只適合普通頁面，要是你的js專案裡，包含json等遊覽器不支援本地遊覽的資源，那麼就需要開啟伺服器，配合這個外掛，才能進行斷點除錯。
---------------------
作者：seanin
來源：CSDN
原文：https://blog.csdn.net/arvin0/article/details/53673351
版權宣告：本文為博主原創文章，轉載請附上博文連結！