Koa JS 使用 Visual Studio Code 进行调试教程

Koa 是一个基于 Node.js 平台的下一代 web 开发框架，它使用 async/await、Promise 等现代技术，具有轻量、高效、优雅等特点，受到了越来越多前端开发者的青睐。在 Koa 开发过程中，运用好调试工具能够帮助我们更高效地定位和解决问题，因此本文介绍如何使用 Visual Studio Code 进行 Koa JS 的调试。

前置条件

在使用 Visual Studio Code 进行调试 Koa JS 之前，需要安装以下环境：

• Node.js
• Koa JS
• Visual Studio Code
• nodemon

安装 nodemon

在开发过程中，我们希望在保存文件后能够自动重启服务，这就需要使用 nodemon 工具。安装方法如下：

npm install nodemon -g

创建一个 Koa 应用

在学习 Koa JS 调试前，需要先创建一个 Koa 应用。可参考以下代码：

// www.javascriptcn.com code example
// 导入 Koa
const Koa = require('koa')
// 创建实例
const app = new Koa()
// 定义路由
app.use(async ctx => {
  ctx.body = 'Hello World'
})
// 启动服务器
app.listen(3000)
console.log('Server is listening on http://localhost:3000')

保存以上代码至 app.js 文件中，然后通过以下命令启动服务：

node app.js

此时打开浏览器访问 http://localhost:3000，应该会看到 Hello World。

配置 Visual Studio Code 调试

首先在项目根目录下创建 .vscode/launch.json 文件。然后在文件中添加以下内容：

// www.javascriptcn.com code example
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Koa Server",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "nodemon",
      "program": "${workspaceFolder}/app.js",
      "restart": true,
      "console": "integratedTerminal",
      "protocol": "inspector",
      "port": 9229
    }
  ]
}

解释一下各项配置：

• name: 配置名称。
• type: 调试类型，这里是 node。
• request: 执行类型，这里是 launch。
• runtimeExecutable: 运行工具，这里是 nodemon。
• program: 要执行的文件路径。
• restart: 是否在文件变化后自动重启。
• console：调试控制台类型，这里是 integratedTerminal，表示使用终端。
• protocol: 调试协议，这里是 inspector。
• port: 调试端口，这里是 9229。

进行调试

保存 launch.json 文件，然后在 Visual Studio Code 界面上的左侧调试菜单中选择 Configurations 为「Debug Koa Server」，并按下 F5 启动调试。

应该会看到类似以下的控制台输出：

// www.javascriptcn.com code example
> nodemon "--inspect-brk=9229" "--nolazy" app.js 

[nodemon] 2.0.14
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js
[nodemon] starting `node --inspect-brk=9229 --nolazy app.js`
Debugger listening on ws://127.0.0.1:9229/8c585f6f-02f0-44fc-8ab8-ae75ccbd1de7
For help, see: https://nodejs.org/en/docs/inspector
Server is listening on http://localhost:3000

此时可以在代码中打断点，然后访问 http://localhost:3000 以触发断点，Visual Studio Code 就会自动暂停在该断点处，右侧调试菜单中也会出现断点相关的信息。

结语

通过以上步骤，我们成功实现了在 Koa JS 中使用 Visual Studio Code 进行调试，这对于快速定位和解决问题非常有帮助。希望读者能够掌握这项技能，更轻松地应对后续开发工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd0b16e46428fe9e65cdf3