美文网首页
Typescript项目如何调试 Debugger

Typescript项目如何调试 Debugger

作者: chace_tse | 来源:发表于2021-12-05 17:23 被阅读0次

ts编译简介

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

  • 一般我们编译ts文件需要用到node的typescript的模块
npm i -g typescript
// 示例
{
  "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

注意事项:

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

相关文章

  • Typescript项目如何调试 Debugger

    ts编译简介 ts的项目一般不会直接运行,需要编译成js文件去运行,但是编译后的js文件与我们直接输出的ts文件有...

  • 在 vscode 中 debugger 调试

    如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。项目地...

  • 跨越无限Debugger

    如何绕过无限Debugger 对于无限Debugger这种反调试操作,我们要想办法绕过debugger或者让程序不...

  • [Other] Debug Adapter Protocol

    1. 调试器(debugger) 编程语言是用debugger调试的,有些debugger可以用来调试多种编程语言...

  • React Native Debugger

    React Native Debugger 是RN项目的调试利器,集成了多个调试工具。 (1) 官方提供的调试工具...

  • 前端调试

    代码调试 chrome调试 代码调试 1.debugger 可以直接在编写代码的时候,加入debugger,打开浏...

  • 调试器命令

    Debugger commands: 调试器命令: apropos -- List debugger...

  • 调试typescript项目

    安装插件 初始化配置文件 package.jsonnpm init -y tsconfig.jsontsc --i...

  • visual studio远程调试

    一、Remote Debugger 使用VS远程调试器Remote Debugger,我们可以调试部署在不同机器上...

  • 1.node学习记录--调试

    vscode 调试 左侧debugger按钮 找到项目文件夹,添加配置 会在项目根目录生成.vscode文件夹,里...

网友评论

      本文标题:Typescript项目如何调试 Debugger

      本文链接:https://www.haomeiwen.com/subject/gntwxrtx.html