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

Question

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

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

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

角度-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"
    ]
  }
}

原文由 Stav Alfi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

ts —> js (es5)。

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

如果要调试，可以使用 karma 测试运行器或使用 visual studio code 专门提供调试选项。

原文由 candidJ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

这里 有人解释了。

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

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

原文由 Kewin Dousse 发布，翻译遵循 CC BY-SA 3.0 许可协议