javascript - Chrome 调试器不适用于 typescript 文件

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在编译期间，最终它是在 Web 浏览器中加载的 javascript 文件。你的浏览器不知道 typescript .

ts ---> js (es5).

当调试器运行时，它将运行相应的已编译 js文件。如果有任何错误，它指向 js文件，你被映射到 ts在 .d.ts 的帮助下文件行号(发生错误的地方)内部。

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