How to check ES6 modules in chrome debugger

Question

Before using Webpack to bind my application, I created modules using IIFE and then attached them to the window object so that I could access them. This made debugging in the Chrome browser very easy, since all modules are available around the world, and I could check them with breakpoints.

I recently switched to using Webpack to bundle my application, which was great. However, now that I am setting breakpoints and want to check the imported modules, I cannot do this by referring to the name of the module. I'm sure this happens because under the hood, Webpack is renaming modules to something else.

Here is an example of import statements in a specific file (by the way, each imported module imports an object):

And in the same file, when I set a breakpoint, I would like to be able to check the contents of the modules, as it was before. In the image below, I'm trying to access the CustomHelpers module, which is just a collection of helper functions stored in an object.

Any thoughts on how I can reference these imported modules during debugging in the Chrome console?

To clarify, my webpack.config.js works, and I have sources included, so I see the source file instead of the distorted bundle.js files. In particular, I'm just trying to check the imported modules and see their contents.

Answer 1

in webpack.config.js:

• set debug flag to true
• specify devtool

like this:

 module.exports = { entry: "./index.js", //"./tryfirst/tree.js", // output: { path: __dirname, filename: "bundle.js" }, debug: true, devtool: 'cheap-module-eval-source-map', module: { loaders: [ ... 

If you are used to running babel from the command line, you can set the same parameters on the command line as follows:

 babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map 

The same line can be added to package.json as a script. Just add something like this to the scripts section:

 "scripts": { ..., "test": "babel src -d lib --presets es2015 --sourceMaps inline; webpack --devtool eval-source-map" }, 

Then you can easily start it from the command line, not having in mind all the parameters and flags:

 npm run test 

The code inside the scripts works exactly (for the most part, at least), like what you type on the console. npm run test (or what you call a script) is a shortcut that you can use from now on.

If it does not stop at breakpoints, try adding the "debugger" command; at the desired breakpoint in your actual javascript code. It looks funny, but usually does the trick. Chrome will find them and set breakpoints there.