vscode調試html頁面，及配置說明

一、效果目的 
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等游覽器不支持本地游覽的資源，那么就需要開啟服務器，配合這個插件，才能進行斷點調試。

配置說明：

${workspaceRoot} VS Code當前打開的文件夾

${file} 當前打開的文件

${relativeFile} 相對於workspaceRoot的相對路徑

${fileBasename} 當前打開文件的文件名

${fileDirname} 所在的文件夾，是絕對路徑

${fileExtname} 當前打開文件的拓展名，如.json

注：轉自：http://blog.csdn.net/arvin0/article/details/53673351