When debugging WebPack step by step, how to switch to original source instead of the bundled file?

Permanently deleted user

Created December 27, 2017 10:13

I encountered an issue when trying to debug a simple WebPack application in WebStorm. The WebPack application being debugged is given here as a simplest sample: https://webpack.js.org/guides/getting-started. The original source file /src/index.js is bundled by WebPack to file /dist/bundle.js. I followed instructions there exactly and got the expected results. Now I want to debug this application in WebStorm step by step to observe how execution flows and how variables change. We know that the bundled source is lengthy and hard to read, so I hope I can debug the original source index.js instead. That is, the blue line of current statement being debugged can switch to human-written index.js automatically. But after I launch the debugger, it is always debugging the bundled source bundle.js. I believe we can configure the WebStorm debugger somehow to realize what I want because it is the case when I debug another huge WebPack application. I don't know how to make it or what I am missing so I ask here for help.

The WebStorm I am using is the latest 2017.3.1. The WebPack is 3.10.0, the Node.js is v8.9.1 and npm is 5.6.0. I am working on Windows 7.

I manually set up a JavaScript Debug configuration as follows:

After that, I placed the breakpoints densely at the beginning of both index.js and the generated bundle.js. Then I right click /dist/index.html and select "Debug Unnamed JS" to launch the debugging. As I said, the debugger only dwells in bundle.js, instead of switching the execution to /src/index.js as desired. The automatic switch is what happens in another huge WebPack application. I forgot the details of how I configured that application. I hope you can help me make the debugging of my simple test application behave the same way as that of the huge one so that in the future I can know how to set up the debugger correctly. Thanks a lot.

3 comments

Elena Pogorelova

Created December 27, 2017 11:10

To debug original sources, you need to make sure that sourcemaps are generated. They are not generated when using configuration from https://webpack.js.org/guides/getting-started.

To solve the issue, make sure to add devtool option to webpack config:

module.exports = {
    entry : './src/index.js',
    output: {
        filename: 'bundle.js',
        path    : path.resolve(__dirname, 'dist')
    },
    devtool: 'source-map'
};

then re-build the project and debug:

Permanently deleted user

Created December 28, 2017 00:28

I read the link you gave at the bottom, I tried this:

Right-click on the directory in the Project view and select Mark Directory As and then select Excluded.

mark_as_excluded

then my whole project disappear in the Project view. Only "External Library" is left:

How to bring them back? If WebStorm wanna let the user know the directory is now different from regular because it is marked, it can just leave the directory there, colored grey, but don't disappear it. Again, DON't DISAPPEAR IT! It would frighten and confuse or even irritate user. OK? I agree that I don't know what I am doing, because I am totally lost after "Instead we recommend specifying the mappings in the JavaScript debug configuration:"; I have no idea what you are talking about in the blog, I cannot find any UI elements in the JavaScript debug configuration dialog that is related to specifying the mappings (there should be a word "mapping" in the dialog but no), so I have to try in order to understand what you were trying to convey. Now, how to bring my project directory back? Also, what is "Preferences | Project | Directories"? I couldn't find any menu called this. Also2, what is "The post number"? Zip code? I didn't continue to read because I really don't understand what you are talking in the blog. Tell me how to bring back my project directory first, Please.

Elena Pogorelova

Created December 28, 2017 09:38

>Right-click on the directory in the Project view and select Mark Directory As and then select Excluded.

You don't actually need to exclude it to make debugging work - this part of instruction is out of date. But excluding build output folder is actually one of best practices, as it prevents from re-indexing on files re-building

>then my whole project disappear in the Project view.

this shouldn't normally happen - even excluded folders are shown by default (Show excluded files enabled in Project view preferences):

>How to bring them back?

You can un-exclude files in Settings | Directories

>I cannot find any UI elements in the JavaScript debug configuration dialog that is related to specifying the mappings (there should be a word "mapping" in the dialog but no)

the field is called Remote URL:

but you don't need mappings to make debugging work for your project, mappings are only required for complex/non-standard configurations. See the blog post:

Update: Starting with WebStorm 2016.1 you don’t have to configure path mappings in the Debug configurations for most of the apps, just make sure that you have devtool: "source-map" in your webpack.conf.js. However, that might still be required for some complex Webpack configurations.

Update 2: WebStorm 2017.1 brings further improvements to debugging the apps with Webpack. Ensure that the source maps are enabled, specify the URL your app is running on in the debug configuration and you’re ready to go.

>what is "Preferences | Project | Directories"?

in your version, it's Settings | Directories

>what is "The post number"?

it's a typo; should be "port number" - as it's clear from the context/further instructions

Please sign in to leave a comment.