How to inspect ES6 modules in chrome debugger

in webpack.config.js:

• set debug flag to true
• indicate a 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 starting babel from commandline, you can set the same options on the commandline like this:

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 start it easily from commandline without having to keep in mind all the options and flags:

npm run test

Code within the scripts works exactly (for the most part at least) like what you type on your console. npm run test (or whatever you call the script) is the shortcut you can use from then on.

If it still doesn't stop at breakpoints try adding the command "debugger;" at the desired breakpoint inside your actual javascript code. Looks funny but usually does the trick. Chrome will find them and set breakpoints there for you.

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.