一、创建express应用
我们使用express-generator创建一个新的express应用。
1、全局安装express-generator
// 安装 sudo npm install express-generator -g // 检测是否安装成功 express -v
2、生成express应用目录
express myapp
可以看到，这个小应用已经五脏俱全，有Node服务器配置，公共资源文件夹，视图文件夹，以及路由配置。
3、运行express应用
// 安装依赖 cd myapp && npm install // 启动应用 npm start
4、访问
这时我们在浏览器中访问localhost:3000，即可浏览页面。
二、调试express应用
1、点击左侧栏调试按钮，切换到debug模式
点击添加配置按钮，选择nodejs环境，此时vscode会自动在.vscode文件夹下新建launch.json文件，根据调试需要自己修改launch.json文件，然后选择调试配置。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "附加到端口",
"address": "localhost",
"port": 5858
},
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/bin/www"
}
]
}
program字段定义了整个应用的入口，开启调试器的时候会从这个入口启动应用。VScode在初始化这个配置文件的时候，会查看package.json中是否有包含了键名为start的scripts，如果有，就会把start配置的内容作为“program”字段的值。
2、设置断点
打开myapp/routes/index.js文件，这个文件配置了应用根路径的路由，当前的处理是返回一个页面，传入字符串"Express"作为视图的参数。
我们用鼠标在行号6的左边单击左键，就可以设置一个断点。注意，添加断点之前要先关闭调试，关闭的方法是点击界面上方的调试控制面板中的停止按钮（橘色正方形）。
3、开始调试
点击开始调试按钮（绿色向右三角形），这时界面上方就会出现一个调试控制的面板，页面右下方会出现一个调试控制台，用来查看程序输出的信息，在界面下方会出现一个状态栏，当前的橘黄色表示应用正常运行。
4、浏览页面
在浏览器中访问localhost:3000，会发现页面可以打开，应用已经正常启动了。这时候，断点的形状发生了变化，程序停留在了断点，调试控制面板的按钮也发生了变化，从左到右依次是单步跳过，单步调试，单步跳出，重启，停止调试，这几个都是常见的断点调试指令。
5、调试界面介绍
在vscode界面的左边，可以查看当前上下文环境，也可以设置变量监听。将鼠标停在断点前的变量或者参数上，可以查看该变量当前的数值。
三、备注
如果设置了断点，但是没有执行，说明断点设置不对，请重新选择断点。
// 调试node程序，参考配置
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": false,
"outDir": null //编译后，代码生成目录
},
{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858, // 如果关联到正在运行的任务
"address": "localhost",
"restart": false,
"sourceMaps": false, // 利用编译生成的map把源码和编译后的代码对应起来
"outDir": null,
"localRoot": "${workspaceRoot}",
"remoteRoot": null
}
]
}
