Chrome 调试器不适用于打字稿文件

Posted 2023-03-07

技术标签:

【中文标题】Chrome 调试器不适用于打字稿文件【英文标题】：Chrome debugger doesn't work on typescript files 【发布时间】：2017-01-01 14:48:51 【问题描述】：

我正在使用 webstorm 2016.2、angular-cli、webpack2。在照片中，我无法在第 19、20、22、23 行创建断点。当我在第 21 行创建时，控制台不会打印我在第 19 行告诉他的内容。

我看到应该调试的 ts 文件，但似乎我正在调试其他文件或我无权访问的 js 文件。

如果可能，我想调试 ts 文件，如果没有，我想调试 js 文件。

angular-cli.json：


  "project": 
    "version": "1.0.0-beta.11-webpack.2",
    "name": "store-app-02"
  ,
  "apps": [
    
      "main": "src/main.ts",
      "tsconfig": "src/tsconfig.json",
      "mobile": false
    
  ],
  "addons": [],
  "packages": [],
  "e2e": 
    "protractor": 
      "config": "config/protractor.conf.js"
    
  ,
  "test": 
    "karma": 
      "config": "config/karma.conf.js"
    
  ,
  "defaults": 
    "prefix": "app",
    "sourceDir": "src",
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+",
    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
    ]

tsconfig.json：


  "compilerOptions": 
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "core-js"
    ]

【问题讨论】：

【参考方案1】：

您的ts 代码在编译期间转换为js，最终它是在网络浏览器中加载的javascript 文件。您的浏览器不知道typescript。

ts ---> js (es5).

当调试器运行时，它将运行各自编译的js 文件。如果有任何错误，它指向js 文件，并且您在内部.d.ts 的帮助下被映射到ts 文件行号（发生错误的地方）。

如果要调试，可以使用karma test runner 或使用专门提供调试选项的visual studio code。

【讨论】：

感谢您的快速回答，但我看不到错误（？）与您的回答之间存在任何联系。 chrome 不会调试 typescript，因为它不理解它。它将指向相应的 js 文件。你可以试试visual studio code编辑器进行调试【参考方案2】：

如果您希望能够在 TypeScript 文件上使用工具，通常需要在编译 TypeScript 的同时生成地图文件。

映射文件包含有关如何将原始.ts 文件与编译后的.js 文件链接的信息。调试器等工具通常需要这些文件才能对.ts 文件进行操作。

有人解释了here。

另外，如果您不想为这些映射生成额外的文件，the TypeScript compiler 允许您使用--inlineSourceMap 在编译文件的末尾直接添加这些信息。

这里，我认为 Chrome 找不到地图文件。

【讨论】：

感谢您的快速回答，但我看不到错误（？）与您的回答之间存在任何联系。哦，是的，抱歉，我的意思是我认为地图文件尚未生成，或者 Chrome 没有找到它们。我看到你的配置文件有"sourceMap": true，你能找到.map对应的文件吗？您的.js 和.ts 文件是否在同一目录中？我正在使用 angular-cli，因此它会为 dist\main.bundle.js 中的所有 ts 文件生成相应的 js 文件。因此，从该文件夹读取和调试将是一场噩梦。我不知道 angular-cli，所以我无法为您提供帮助。但我敢肯定，您需要一种方法来获取这些.map 文件，这些文件通常是在编译时创建的。 angular-cli 是否使用您在此处显示的 tsconfig.json 文件？如果没有，你有办法告诉 angular-cli 生成这些地图文件吗？【参考方案3】：

我正在使用 react native 和 typescript 并且我的调试点突然停止工作，所以我认为这是源映射的问题。事实证明，在我的场景中，它与 typescript 的源映射无关，但这是由于 chrome 调试器/react-native-debugger 缓存了一些文件并简单地停止缓存修复了我的调试点。实际的解决方案可以在这里找到https://github.com/jhen0409/react-native-debugger/issues/423 所以表面上它看起来像一个打字稿问题，这让我陷入了一个兔子洞。因此，为了节省其他人一些时间，我将其留在这里，因为标题实际上是我遇到此问题时首先搜索的内容。

【讨论】：

【参考方案4】：

Chrome 完美调试，允许设置断点并打印日志消息。我认为，问题出在您的tsconfig.json 上。正如提到的其他答案，您必须在编译时生成 js 文件。。要让编译器知道这一点，您必须添加：