Typescript项目如何调试 Debugger

ts编译简介

ts的项目一般不会直接运行，需要编译成js文件去运行，但是编译后的js文件与我们直接输出的ts文件有出入，这对于我们调试造成很大的麻烦。

• 一般我们编译ts文件需要用到node的typescript的模块

npm i -g typescript

• 编译时我们可以进行格式，输出位置进行配置，这些参数可以写在tsconfig.json的文件内，具体可参照：https://www.tslang.cn/docs/handbook/tsconfig-json.html

// 示例
{
  "compilerOptions": {
    //    指定要使用的模块化规范
    "module": "ES6",
    //    用来指定ts被编译为的es版本
    "target": "es6",
    //    用来指定项目中要使用的库
    "lib": [
      "es6"
    ],
    // 生成相应的 .map文件。
    "sourceMap": true,
    //    用来指定编译后文件所在的目录
    "outDir": "./dist",
    //    是否移除注释
    "removeComments": true,
    //    编译发生error时不生成js文件
    "noEmitOnError": false,
    //    是否对js文件进行编译
    "allowJs": false,
    //    是否检查js代码是否符合语法规范
    "checkJs": false,
    //    用来设置编译后的js文件是否使用严格模式
    "alwaysStrict": false,
    //    不允许隐式any类型
    "noImplicitAny": false,
    //    不允许不明确的this
    "noImplicitThis": false,
    //    严格检查空值
    "noStrictGenericChecks": false,
    //    所有严格检查的总开关
    "strict": false
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "./src/**/*.ts"
  ]
}

VS Code调试typescript项目

官方参考文档： https://code.visualstudio.com/docs/typescript/typescript-debugging

注意事项：

• tsconfig.json中的sourceMap需设为true
• 如果项目目录与运行环境的目录不同，需设置lanuch.json中的cwd为运行代码环境的目录，参照： https://code.visualstudio.com/docs/editor/debugging#_compound-launch-configurations

image

IDEA(WebStorm)调试typescript项目

官方参考文档：https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#ws_ts_run_debug_server_side

注意事项：

• 需从运行代码环境的目录打开项目，打开tsconfig.json的上级目录

• tsconfig.json中的sourceMap需设为true

• 添加 Node parameters: --inspect --require ts-node/register

image

idea DEBUG页面

image