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

I'm toying around with an Angular 2 / Bootstrap 4 / Webpack project, just to see how the new stuff is lining up, and I'm trying to get debugging to work in IntelliJ IDEA 15 in Chrome with the JetBrains Chrome extension.

我正在玩一个Angular 2 / Bootstrap 4 / Webpack项目，只是为了看看这些新东西是如何排队的，我正在尝试使用JetBrains Chrome扩展程序在Chrome中的IntelliJ IDEA 15中进行调试。

The problem is that any breakpoints I set in my TypeScript files are ignored. I'm using the built-in transpiler and leaving the JavaScript output files with the same name/location as the TypeScript files, so that my-app.ts is in the same folder as my-app.js and the associated my-app.js.map mapping file.

问题是我在TypeScript文件中设置的任何断点都会被忽略。我正在使用内置的转换器并保留JavaScript输出文件与TypeScript文件具有相同的名称/位置，因此my-app.ts与my-app.js和相关的my-app位于同一文件夹中.js.map映射文件。

The odd thing is that if I set breakpoints in the generated JavaScript file, the IDE then breaks in the corresponding spot in the TypeScript file (even though it shows no breakpoint there). I can then step normally since the mapping seems to work.

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

The problem seems to be that setting a breakpoint in a .ts file doesn't set the needed breakpoint in the corresponding .js file.

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

Am I doing something wrong (I've never worked with TypeScript debugging before), or is this a bug in IDEA?

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

P.S. I get the same results whether doing remote JavaScript debugging or using local debugging through IDEA's built-in web server.

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

2 个解决方案

#1

The trick was adding a reference to the Webpack internal URL to the debug config. The path to use for that Webpack URL will come from the scripts tab of the debugger when the application is running. You can also see it in Chrome's scripts tag just as easily, but I've included the view from IntelliJ IDEA here:

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

You can see that the . path in webpack:// corresponds to my project folder (as witnessed by the src path in it). That's what told me that I needed to use the . path for Webpack in the debug config. If your project lines up differently, you'll have to adjust accordingly.

你可以看到。 webpack中的路径：//对应于我的项目文件夹（由其中的src路径见证）。这就是告诉我我需要使用的。调试配置中Webpack的路径。如果您的项目排列不同，则必须进行相应调整。

As to why it is webpack:///. (with three slashes) instead of webpack://., that I can't answer. I saw that used in a JetBrains post and that's what led me to that solution of adding an additional forward slash.

至于为什么它是webpack：///。（有三个斜杠）而不是webpack：//。，我无法回答。我看到JetBrains帖子中使用的那个，这就是我带来添加额外正斜杠的解决方案的原因。

Now you need to create your JavaScript debug configuration and set it up like the following:

现在，您需要创建JavaScript调试配置并将其设置如下：

Adjust your localhost URL and port, as well as your build path (__build__ in my case, maybe build or dist in yours).

调整您的localhost URL和端口，以及您的构建路径（在我的情况下__build__，可能是您的构建或dist）。

Now that I have the debug configuration setup like the above, it works just fine.

现在我已经像上面那样进行了调试配置设置，它的工作正常。

#2

I have successfully solved problem with debugging with webpack in Intellij/Webstorm based on this solution: How to debug angular 2 app using angular-cli webpack?. You have to map your main ui project directory and directory with .ts sources to remote url, exactly the same as in the solution upside.

基于这个解决方案，我已成功解决了在Intellij / Webstorm中调试webpack的问题：如何使用angular-cli webpack调试angular 2 app？您必须使用.ts源将主ui项目目录和目录映射到远程URL，与解决方案的优势完全相同。

My tsconfig.json:

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

#1