Debugging WebPack in WebStorm 11

Question

I'm trying to debug javascript application bundled with WebPack in WebStorm using source mapping. My current webpack.config.js looks like this:

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'
    }
}

The source map is generated and looks like this:

{"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":""}

Now, I have found mentions that WebStorm 11 will fully support WebPack and it's source mapping [eg. here] but it provides very little info. The debugging with config I provided doesn't work, the breakpoint is ignored. After many tries I have found out the only config that let's me do the debugging (correctly, other tries could sometimes break the code but the lines and code execution were mismatched), by setting devtool: 'eval'. However, this has nothing to do with source mapping I'm trying to use.

The generated source map works in all popular browsers and let's me debug the original sources in them, so why the WebStorm doesn't work? Do I need to perform some configuration in WebStorm before using source maps?

The current WS version I'm using is 142.4148 and debugging is done via chrome extension. I would appreciate any ideas or tutorial on how to set up debugging here, even for older WS 10 version (I'm using the WS 11 just because it was supposed to play nicely with WebPack)

Gardener

Answer 1

Webpack sourcemaps are mostly supported in WebStorm 11, but you need to set up remote URL mappings in your Javascript Debug Run configuration accordingly, to let WebStorm know the directory with the Webpack output files (including source maps) and how paths to source files specified in the sourcemap map to their location in the project. So, you need to specify mappings of the compiled script web server URL to its local path, and map source URL (listed in a source map) to the local path in the project. Sounds weird, but it's not that complicated. For the configuration file like yours, you'd likely have to specify Remote URL http://localhost:63342/webpack/Built for your 'Built' directory where bundle file and sourcemaps are located, and webpack:///. - for 'js' directory. This works fine for me... We plan to publish a blog post about webpack debugging soon... For now, I can suggest looking at https://github.com/prigara/debugging-webpack for the simple example

Abandoned

Just one thing to add: please make sure to exclude 'Built' directory from project (Mark directory as/Excluded) – Abandoned

Thank you, I have been able to set up this eventually and have debugger stop at the breakpoints, however the stepping through code still appears mismatched. As you can see here <ctrlv.cz/X2xV>, I get stepped onto empty lines, and therefore the debugging of this run method ends before I get to its end. However, the code execution appears to work correctly as I can see the result of the last render call (which, by the way, happens at the highlighted line). – Gardener

Setting breakpoint in debugging-webpack/main.js works. Setting in debugging-webpack/greetings.js doesn't – Pandora

But what about if you're not doing JS in the browser (what Javascript Debug is for), but rather debugging a transpiled node.js application (for which the Node.Js run configuration is probably more appropriate)? – Bruni

debugging server-side webpack applications is not supported, see the answer in #33301761 – Abandoned

Answer 2

I racked my brain on this for hours, and I hope that it can help someone else. The instructions in this blog post actually do work: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

So, follow the instructions to configure your webstorm instance, but don't run it with the webpack-dev-server, use a different web server like the WEBrick::HTTPServer used in Ruby mine / rails or the built in debug server. For some reason the webpack-dev-server does not correlate the source map correctly to line numbers.

Embroider

Answer 3

I would add that you can put the statement

debugger;

in your javascript/typescript even in framework files of angular or vue2.

So even if your path mappings to URL don't work, it will step anyway.

Gratianna