vscode javascript 調試

安裝好node.js，配置好路徑

• nodejs項目

    很是方便，詳見網上教程

 

• 網頁項目

    裝一個插件：Debugger for Chrome 

    用VSCode打開文件夾

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

選擇 Chrome，只有node.js

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

-項目

         -.vscode

                   -launch.json

 {
 "name": "使用本機 chrome 調試",
 "type": "chrome",
 "request": "launch",
 "file": "${workspaceRoot}/tb-comments.htm",
 "url": "http://localhost/tb-comments.htm", //使用外部服務器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設置爲 false "http://mysite.com/index.html
 "runtimeExecutable": "C:/Users/Administrator/Downloads/Chrome/chrome.exe", // 改爲您的 Chrome 安裝路徑
 // "sourceMaps": true,
 "webRoot": "${workspaceRoot}",
 // "preLaunchTask":"build",
 // "userDataDir":"${tmpdir}",
 "port":5433
 }

 

4.轉到要調試的html

更改調試方式

 

而後點綠色

 

5.設置好斷點，按 F5，就能夠進行斷點調試了。 
 

要是不支持本地遊覽的資源，那麼就須要開啓服務器，才能進行斷點調試。

 

在服務器裏調試

launch.json裏添加

 ,{
 "name": "web調試",
 "type": "chrome",
 "request": "launch",
 // "file": "${workspaceRoot}/tb-comments.htm",
 "url": "http://localhost:88/tb-comments.htm", //使用外部服務器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設置爲 false "http://mysite.com/index.html
 "runtimeExecutable": "C:/Users/Administrator/Downloads/Chrome/chrome.exe", // 改爲您的 Chrome 安裝路徑
 // "sourceMaps": true,
 "webRoot": "${workspaceRoot}",
 // "preLaunchTask":"build",
 // "userDataDir":"${tmpdir}",
 "port":5433
 }

 

2、Html文件中不能打斷點問題

      默認狀況下，VSCode是不能在Html文件裏打斷點的，可是能夠修改設置，依次打開：文件->首選項->設置，而後功能->調試->勾選上「容許在任何文件中設置斷點」。

 

另外還有個狀況，若是開了兩個VSCode，不能同時運行調試