How to access Webpack module from dev browser tools?

Question

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

export class Dialog {
  ...
}

window.debugdialog = Dialog;

This is very cumbersome and certainly not the best way to do this. Is there a way to reference modules without having to change the source?

Yes, I know about breakpoints, and I use them. But sometimes I want to download all the code and customize the user interface, controlling it with built-in JavaScript.

Answer 1

Source maps

, , JavaScript devtools, bundle.js ( ).

Sourcemaps , Chrome, Webpack.

Webpack , :

devtool: 'source-map'

(. )

, webpack cli, webpack -d , .

Chrome .

, , JavaScript . , sourcemap , .

Ctrl + P, .

, "" Ctrl + Shift + O, class .