如何在Visual Studio Code中调试Meteor教程项目的js、jsx文件

前置准备 #

• 确保你的Meteor项目已经可以正常运行，先在终端运行meteor run确认项目启动无报错后再做调试配置
• 确认VS Code已经安装了JavaScript Debugger扩展，该扩展为VS Code默认自带，若未安装直接在扩展商店搜索安装即可

第一步：配置调试launch文件 #

• 打开你的Meteor项目根目录，在VS Code左侧边栏点击「运行和调试」标签（虫子加三角的图标）
• 点击「创建launch.json文件」，在弹出的环境选择列表里选「Node.js」
• 把生成的默认配置全部替换为以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Meteor 调试",
      "program": "${workspaceFolder}/.meteor/local/build/main.js",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "meteor",
      "runtimeArgs": [
        "run",
        "--inspect-brk"
      ],
      "port": 9229,
      "skipFiles": [
        "<node_internals>/**",
        "${workspaceFolder}/.meteor/**"
      ]
    }
  ]
}

配置中的skipFiles参数作用是跳过Meteor框架本身的内部文件，你只需要调试自己编写的业务代码即可，不需要关注框架底层实现。

第二步：启动调试&单步执行 #

• 先关闭之前运行的Meteor进程，避免端口占用冲突
• 打开你需要调试的js/jsx文件，在你想要暂停查看的代码行左侧（行号旁边的空白处）点击一下，会出现红色圆点，即为断点，代码运行到该位置会自动暂停
• 回到「运行和调试」标签，点击顶部的绿色三角按钮启动调试，等待Meteor启动完成（终端会输出项目访问地址，默认是localhost:3000）
• 打开浏览器访问你的项目，触发你打了断点的业务逻辑（比如点击按钮调用你写的函数），此时VS Code会自动跳到断点位置暂停运行
• 用调试工具栏的按钮即可控制单步执行：
  • 单步跳过（F10）：执行下一行代码，遇到函数不会进入函数内部
  • 单步调试（F11）：执行下一行代码，遇到函数会进入函数内部逐行运行
  • 单步跳出（Shift+F11）：直接跳出当前正在执行的函数
  • 继续（F5）：直接运行到下一个断点位置
• 运行过程中可以把鼠标悬停在变量上，直接查看变量当前的数值，方便理解逻辑走向。

常见问题处理 #

• 断点打了没有生效：确认你打的断点位置是会被触发的业务代码，不是注释或者从未被调用的函数
• 启动调试提示端口被占用：检查是否有其他Meteor进程未关闭，或者修改launch.json里的port参数为其他未被占用的端口即可
• 需要调试客户端代码：也可以直接打开Chrome开发者工具，切换到「源代码」标签，找到你写的js/jsx文件打断点，调试逻辑和VS Code完全一致。

内容的提问来源于stack exchange，提问作者Iuval Clejan