一、安装Debugger for Chrome扩展插件
二、配置运行环境
最左侧菜单找到调试(一个虫子样图标)，点击下图中红色标注或者直接按F5：
然后出现下图所示：
选择Chrome，会生成Launch.json文件：{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "运行 Chrome 打开 localhost",
"url": "http://localhost:8080/src",
"webRoot": "${workspaceFolder}"
},//访问localhost:8080/src
{
"name": "运行 Chrome 打开 index.html",
"type": "chrome",
"request": "launch",
"file": "${workspaceFolder}/html/index.html"
}//访问静态文件index.html
]
}
上面两种配置分别是访问url和文件。
注意：VSCode不会提供Web服务器的环境，需要我们用其他Web服务器(IIS、Nginx等)部署到localhost才能访问对应的url。
如果不需要部署到localhost，可以使用第二种配置，直接访问静态页面。
三、选择运行环境
四、按F5运行程序，在VS Code设置断点并调试
