• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

VSCode使用ts-node调试TypeScript代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

TS-NODE

可以看出这些不足都来自于一个根本原因,运行之前需要编译。后来我就发现了一个很强大的工具ts-node,来看下ts-node的简介:

TypeScript execution environment and REPL for node.

简单的说就是它提供了TypeScript的运行环境,让我们免去了麻烦的编译这一步骤。最简单的例子,在注册ts-node之后,我们就可以直接加载并运行ts文件

require('ts-node').register();

// 这样就能直接加载并运行 ./ts-code.ts...
require('./ts-code');

TS Config

为了断点调试,我们需要在tsconfig.json中开启sourceMap

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
}

VSC Launch.json 配置

为ts-node注册一个vsc的debug任务,修改项目的launch.json文件,添加一个新的启动方式

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${workspaceRoot}/src/index.ts" // 入口文件
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

通过这些简单的配置,我们在vsc的debug界面中选择Debug by ts-node的任务,就可以开始愉快的调试了,修改代码之后直接重启服务即可,这里简单的介绍一些vsc debug相关的快捷键,参考

  1. F5 – 开始调试、继续执行
  2. cmd(ctrl) + shift + F5 – 重启
  3. shift + F5 – 结束调试
  4. F9 – 添加断点
  5. F10 – 单步跳过
  6. F11 – 单步调试
  7. shift + f11 – 单步跳出

调试当前打开ts文件

{
  "name": "Current TS File",
  "type": "node",
  "request": "launch",
  "args": [
    "${relativeFile}"
  ],
  "runtimeArgs": [
    "--nolazy",
    "-r",
    "ts-node/register"
  ],
  "sourceMaps": true,
  "cwd": "${workspaceRoot}",
  "protocol": "inspector",
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

调试 mocha 测试代码

在launch.json中添加

{
  "name": "Debug Current TS Tests File",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/.bin/_mocha",
  "args": [
    "-r",
    "ts-node/register",
    "${relativeFile}", // 调试当前文件
    "--colors",
    "-t 100000" // 设置超时时间,因为调试时执行时间较长容易触发超时
  ],
  "cwd": "${workspaceRoot}",
  "protocol": "inspector"
}

然后打开一个包含mocha单元测试的ts文件,添加断点,运行Debug Current TS Tests File即可进行断点调试。 运行项目中的所有单元测试建议在package.json中添加test脚本,比如

"scripts": {
  "test": "mocha -r ts-node/register src/**/*.spec.ts --colors"
}

然后运行npm test即可


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript学习一参数,函数,析构表达式发布时间:2022-07-18
下一篇:
deno学习五typescript+vscode集成发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap