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

Answer 1

您的ts代码在编译时被转换为jsjavascript 文件，最终加载到 Web 浏览器中。您的浏览器不知道typescript.

ts---> js(es5).

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

如果你想调试，你可以使用karma测试运行程序或使用visual studio code专门提供调试选项的程序。