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

Answer 1

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

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

有人解释了它here。

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

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

Answer 2

您的ts代码在编译期间转换为js，最终是javascript文件，在Web浏览器中加载。您的浏览器不了解typescript。

ts ---＆gt; js（es5）。

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

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

Answer 3

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

Answer 4

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

 "compileOnSave": true

保存后会立即开始编写打字稿。

而且，如果它仍然无法正常工作，请清除浏览器的缓存并重新启动浏览器。这肯定会带来魔力。

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

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

4 个答案: