在WebStorm 11中调试WebPack

Question

我正在尝试使用源映射在WebStorm中调试使用WebPack打包的JavaScript应用程序。我的当前webpack.config.js文件如下：

var path = require('path');

module.exports = {
    debug: true,
    devtool: 'source-map',

    context: path.join(__dirname, 'js'),
    entry: './main.js',
    output: {
        path: path.join(__dirname, 'Built'),
        filename: '[name].bundle.js'
    }
}

源文件映射已生成，其外观如下：

{"version":3,"sources":["webpack:///webpack/bootstrap 2919a5f916c286b8e21a","webpack:///./main.js","webpack:///./structure_editor/content.js","webpack:///./structure_editor/test_bundle.js"],"names":[],"mappings":";AAAA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;ACtCA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;;;;;ACVA,8C;;;;;;ACAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6B","file":"main.bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 2919a5f916c286b8e21a\n **/","document.write(require(\"./structure_editor/content.js\"));\r\nvar TestBundle = require(\"./structure_editor/test_bundle.js\");\r\n\r\nvar test = new TestBundle();\r\ntest.testMe();\r\n\r\n//var StructureEditor = require(\"./structure_editor/structure_editor.js\");\r\n\r\n//var editor = new StructureEditor(0x00FF00);\r\n\r\n//editor.run();\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./main.js\n ** module id = 0\n ** module chunks = 0\n **/","module.exports = \"It works from content.js.\";\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/content.js\n ** module id = 1\n ** module chunks = 0\n **/","var TestBundle = function () {\r\n    \r\n}\r\n\r\nTestBundle.prototype.testMe = function() {\r\n    var a = 10;\r\n    var b = 12;\r\n    var c = a + b;\r\n    document.write(c);\r\n};\r\n\r\nmodule.exports = TestBundle;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./structure_editor/test_bundle.js\n ** module id = 2\n ** module chunks = 0\n **/"],"sourceRoot":""}

现在，我发现WebStorm 11将完全支持WebPack及其源映射（例如：这里），但提供的信息非常少。使用我提供的配置进行调试不起作用，断点被忽略。经过多次尝试，我发现唯一能让我正确调试的配置是devtool：'eval'。然而，这与我要使用的源映射无关。

生成的源映射在所有流行的浏览器中都有效，并且可以让我在其中调试原始源代码，那么为什么WebStorm不起作用呢？在使用源映射之前，我需要在WebStorm中执行一些配置吗？

我正在使用的当前WS版本是142.4148，并且通过Chrome扩展进行调试。我会感激任何有关如何在此处设置调试的想法或教程，即使是较旧的WS 10版本（我只是因为它应该与WebPack很好地协同工作而使用WS 11）。

- Raven

Answer 1

Webpack源代码映射在WebStorm 11中得到了广泛支持，但您需要相应地设置远程URL映射以让WebStorm知道Webpack输出文件（包括源代码映射）所在的目录以及源代码映射中指定的路径与项目中实际位置的映射关系。因此，您需要将已编译脚本Web服务器URL的映射指定为其本地路径，并将源URL（列在源代码映射中）映射为项目中的本地路径。 听起来有些奇怪，但并不是很复杂。对于像您这样的配置文件，您可能需要为位于'Built'目录中的捆绑文件和源代码映射指定远程URLhttp://localhost:63342/webpack/Built，并为'js'目录指定webpack:///.。这对我来说很有效... 我们计划很快发布一篇关于webpack调试的博客文章...现在，我可以建议查看https://github.com/prigara/debugging-webpack获取简单示例。

- lena

---

只有一件事需要补充：请确保从项目中排除“Built”目录（将目录标记为/排除）。 - lena

谢谢，我终于设置好了并且调试器在断点处停下来了，但是代码的单步执行似乎还是不匹配。就像你在这里看到的 https://ctrlv.cz/X2xV，我会跳到空行，因此在到达run方法的结尾之前，该方法的调试结束了。但是，代码执行似乎是正常工作的，因为我可以看到最后一个render调用的结果（顺便提一下，它发生在高亮行）。 - Raven

在调试-webpack/main.js 中设置断点有效。但在调试-webpack/greetings.js 中设置无效。 - rofrol

但是如果你不是在浏览器中使用JS（这就是“Javascript Debug”的作用），而是调试一个经过转译的node.js应用程序（对于这种情况，“Node.Js”运行配置可能更加适合）呢？ - Attila Szeremi

调试服务器端的webpack应用程序不受支持，请参见http://stackoverflow.com/questions/33301261/how-do-i-get-the-debugger-to-recognize-the-sourcemaps-in-webstorm-10-using-the-r/33304712?noredirect=1#comment57710091_33304712中的答案。 - lena

Answer 2

我为此苦苦思索了数小时，希望这篇文章能对其他人有所帮助。实际上，本文中的说明确实有效：https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/。

因此，请按照说明配置您的WebStorm实例，但不要使用webpack-dev-server运行它，而是使用像Ruby mine / rails中使用的WEBrick :: HTTPServer或内置的调试服务器等不同的Web服务器。由于某种原因，webpack-dev-server不能将源映射正确地与行号对应起来。

- Vincil Bishop

Answer 3

我想补充一下，您可以在JavaScript/TypeScript中甚至在Angular或Vue2的框架文件中添加语句

debugger;

因此，即使您的路径映射到URL不起作用，它也会继续执行。

- zurcacielos