使用typescript开发调试nodejs
发布于 7 年前 作者 xiadd 9337 次浏览 来自 分享

这两天在看ts,也在入门中, 网上大部分教程都是前端配置ts开发调试,这个也有很多相当成熟的实践教程, 这篇文章主要是nodejs的ts配置, 说起来也是相当简单的, 不涉及任何ts的语法与概念, 同时也可以根据本文配置es6的nodejs开发环境(主要是模块部分).

ts-node的使用

说起 babel-node 大家应该都挺熟悉了, ts-node是一个类似的工具,可以在不编译的情况的执行ts文件,方便我们开发, 当然是node环境下的.

安装

npm i -D typescript ts-node

创建app.ts文件:

//app.ts
console.log(1)

调用命令ts-node app.ts(全局安装的情况下), 如果一切正常的话,我们应该可以看到想要的输出了.

一直到上面都是常规话题, 没什么深入下去的意义. 下面讲到ts-node的调试

调试

根据nodejs官网 我们知道nodejs的调试方法有下面几种:

  1. node-inspect 一个第三方开发的调试工具, 今天我们不涉及
  2. chrome 开发者工具, 下面会讲到
  3. vs code 今天的重点
  4. vs
  5. webstorm 也是相当方便的工具

vs code的调试

根据官网我们打开node的inspect模式(ts-node同样可以)ts-node --inspect app.js, 应该可以看到类似的的提示:

image

这样表示已经可以进行调试了, 但是貌似不可以进行打断点之类的操作, 这个就要借助vscode了.

打开vscode debug面板增加调试选项, 选择attach to progess:

image

然后点击debug, 会弹出类似下面的弹窗:

image

注意红框, 会有几个node进程, 选择带inpect的那个进程, 如果一切进行的正常的话就可以进行调试了:

image

chrome 开发者工具

这个更加简单, 在任意网页打开开发者工具, 我们可以看到如图

image

点击node图标同样可以进行调试:

image

但是貌似不是很稳定, 经常崩溃, 而且windows上也有问题.

最后是个示例: https://github.com/xiadd/node-ts

感兴趣可以star

1 回复

另一种方式

.vscode/launch.json

{
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch TypeScript",
      "program": "${workspaceRoot}/src/app.ts",
      "smartStep": true,
      "preLaunchTask": "compile",
      "env": {
        "NODE_ENV": "_development,development",
        "DEBUG": ""
      },
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js"
      ]
    }
  ]
}

.vscode/tasks.json

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [
    {
      "taskName": "compile",
      "command": "npm run compile",
      "type": "shell"
    }
  ]
}

只需要按f5就可以启动调试了，并且可以在启动调试前运行指定的命令，设置环境变量

回到顶部