How do I access a Webpack module from the browser dev tools?

Question

I have an ES6 module that is compiled with webpack. To debug it I have to manually attach certain objects to the window so that I can reference them through the debugging tools in Chrome/Safari:

export class Dialog {
  ...
}

window.debugdialog = Dialog;

This is very cumbersome and surely not the best way to do it. Is there a way to reference the modules without having to modify the source?

Yes I know about breakpoints, and I use them. But sometimes I want to load the all the code and tweak the UI by controlling it with inline JavaScript.

Answer 1

Source Maps

If you're running the server in a development environment or on your own machine, you can leverage sourcemaps so that you can open the original JavaScript files in the devtools, rather than your bundle.js (or equivalent).

There's a number of awesome resources out there for getting started with Sourcemaps and setting them up, both with Chrome and Webpack.

Setting up Source Maps in Webpack can be done by adding the following config:

devtool: 'source-map'

(See also)

Additionally, if you're using the webpack cli command, you can utilize webpack -d to compile in development mode to enable your sourcemaps.

For Chrome, there's a great guide here for using source maps.

Debugging Modules

After you get sourcemaps enabled, you can simply open up the JavaScript file for your module and set a breakpoint anywhere necessary. When the compiled version of the code executes, the sourcemap should kick in and break within the source version of the module, allowing you to step through using your original source file.

You can use Ctrl+P to open your particular Source File.

Additionally, while focussed in the Sources panel, you can use Ctrl+Shift+O to jump to a particular class or member declaration.