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

Question

我正在使用 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"
    ]
  }
}

Answer 1

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

ts ---> js (es5).

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

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

Answer 2

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

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

有人解释了here。

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

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

Answer 3

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

Answer 4

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

 "compileOnSave": true

这将在您保存后立即开始编译您的打字稿。

你，如果它仍然不起作用，请清除浏览器的缓存并重新启动浏览器。这肯定会发挥作用。

我希望它有所帮助。 （我的 Chrome 版本：52.0.2743.116 m（64 位）-> 但这并不重要）