vscode断点调试工程化的nodejs文件

一、创建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界面的左边，可以查看当前上下文环境，也可以设置变量监听。将鼠标停在断点前的变量或者参数上，可以查看该变量当前的数值。