I have an ES6 module that is piled 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.

I have an ES6 module that is piled 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.

• javascript
• google-chrome-devtools
• webpack

• 1 You could expose the __webpack_require__(moduleId) function on window, but that requires you to know the ID that Webpack assigned to the module. At least by default, the original you use in an import statement doesn't appear to be available in the Webpack output file. – Matt Zeunert Commented Feb 19, 2016 at 12:09
• check stackoverflow./questions/30539725/… – David 天宇 Wong Commented Nov 20, 2021 at 7:34

1 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 mand, you can utilize webpack -d to pile 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 piled 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.