IntelliJ IDEA TypeScript/Webpack 调试仅适用于 JavaScript 断点

Question

我正在玩弄 Angular 2 / Bootstrap 4 / Webpack project，只是想看看新东西是如何排列的，我正在尝试在 IntelliJ 中进行调试 IDEA 15 in Chrome 与 JetBrains Chrome 扩展。

问题是我在 TypeScript 文件中设置的任何断点都被忽略了。我正在使用内置的转译器并将 JavaScript 输出文件保留为与 TypeScript 文件相同的 name/location，因此 my-app.ts 与 my-[ 位于同一文件夹中=27=] 和关联的 my-app.js.map 映射文件.

奇怪的是，如果我在生成的 JavaScript 文件中设置断点，IDE 就会在 TypeScript 文件中的相应位置中断（即使它在那里没有显示断点）。由于映射似乎有效，因此我可以正常执行步骤。

问题似乎是在 .ts 文件中设置断点并没有在相应的 .js 文件中设置所需的断点。

我做错了什么（我以前从未使用过 TypeScript 调试），还是 IDEA 中的错误？

P.S。无论是进行远程 JavaScript 调试还是通过 IDEA 的内置 Web 服务器进行本地调试，我都得到相同的结果。

Answer 1

诀窍是在调试配置中添加对 Webpack 内部 URL 的引用。当应用程序为运行时，用于该 Webpack URL 的路径将来自调试器的脚本选项卡。您也可以同样轻松地在 Chrome 的脚本标签中看到它，但我在此处包含了来自 IntelliJ IDEA 的视图：

可以看到webpack://中的.路径对应的是我的项目文件夹（从里面的src路径可以看出）。这就是告诉我需要在调试配置中使用 Webpack 的 . 路径。如果您的项目安排不同，则必须相应地进行调整。

至于为什么是webpack:///.（三斜线）而不是webpack://.，我无法回答。我看到它使用了 in a JetBrains post，这就是让我想到添加额外正斜杠的解决方案的原因。

现在您需要创建 JavaScript 调试配置并按如下方式进行设置：

调整你的 localhost URL 和端口，以及你的构建路径（__build__ 在我的情况下，可能 build 或 dist 在你的情况下).

现在我已经像上面那样设置了调试配置，它工作得很好。

Answer 2

我已经根据这个解决方案成功解决了 Intellij/Webstorm 中使用 webpack 进行调试的问题：。您必须将您的主 ui 项目目录和带有 .ts 源的目录映射到远程 url，与上面的解决方案完全相同。

我的tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "../resources/static/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../../../node_modules/@types"
    ]
  }
}

IntelliJ IDEA TypeScript/Webpack 调试仅适用于 JavaScript 断点

IntelliJ IDEA TypeScript/Webpack debugging only works with JavaScript breakpoints

debugging

intellij-idea

typescript

webpack

angular