IntelliJ IDEA的打字稿/ WebPACK中调试只能用JavaScript断点

本文介绍了IntelliJ IDEA的打字稿/ WebPACK中调试只能用JavaScript断点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我与href=\"github/michaeloryl/angular2-bootstrap4-oauth2-webpack\" rel=\"nofollow\">角2/4引导/ WebPACK中的项目

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.

问题是我设置任何断点在我的打字稿文件将被忽略。我使用的是内置transpiler和离开具有相同名称/位置为打字稿文件中的JavaScript输出文件，让我-app.ts是在同一文件夹作为我-app.js和相关的我的应用.js.map映射文件。

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.

奇怪的是，如果我设置生成的JavaScript文件中设置断点时，IDE然后在将输出文件（即使它没有显示出断点有）对应的点打破。那么我可以一步，因为正常的映射似乎工作。

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.

这个问题似乎是，在.TS文件中设置一个断点不设置断点需要在相应的.js文件。

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

我是不是做错了什么（我从来没有与打字稿调试工作之前），或者这是IDEA的错误吗？

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

P.S。我得到同样的结果是否进行远程JavaScript调试或通过IDEA的内置Web服务器，使用本地调试。

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

推荐答案

诀窍是增加了WebPACK中内部URL到调试配置的参考。要使用的路径为WebPACK中URL中的应用程序运行时将来自调试器的脚本标签。你也可以看到它在Chrome浏览器的脚本标签很容易，但我已经有来自的IntelliJ IDEA这里查看：

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：// 对应到我的项目文件夹中（如目击在的src 在其路径）。这就是告诉我，我需要使用。路径WebPACK中的调试配置。如果你的项目排队不同，你必须做出相应的调整。

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：/// （三斜杠）代替的WebPack：// ，我不能回答。我看到使用在JetBrains的帖子而这正是使我增加一个额外的正斜杠的解决方案。

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.

现在你需要创建你的JavaScript调试配置，并将它设置如下所示：

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

调整你的本地主机 URL和端口，以及您的构建路径（ __构建__ 于我而言，也许建立或 DIST 在你）。

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

现在，我有调试配置设置像上面，它工作得很好。

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