How to inspect ES6 modules in chrome debugger

Question

Prior to using Webpack to bundle my application, I was creating modules using IIFE's and then attaching them onto the window object so that I could access them. This made debugging in the chrome browser pretty simple since the modules are all globally available and I could inspect them with breakpoints.

I've recently transitioned to using Webpack to bundle my application, which has been great. However, now when I set breakpoints and want to inspect the imported modules, I'm unable to do so by referencing the module name. I'm pretty sure this is because under the hood, Webpack renames the modules to something else.

Here's an example of the import statements in a particular file (btw, each of the imported modules is importing an object):

And in that same file, when I set a breakpoint, I'd like to be able to inspect the contents of the modules like I used to be able to. 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 while debugging in the Chrome console?

To clarify, my webpack.config.js is working and I have sourcemaps enabled which is why I'm seeing the original file instead of the garbled bundle.js files. Specifically, I'm just trying to inspect the modules I imported and see their contents.

Answer 1

There is an open issue on Webpack's Github. The best answer for me is the second point here.

Memorise the webpack naming conventions. If you are at a breakpoint, and your import is similar to import UserModel from 'xxx'. Then the webpack bindings are usually called WEBPACK_IMPORTED_MODULE_0__UserModel. The devtools are usually friendly enough to autocomplete for you if you start typing __ and then go from there.