Debugging in devtools with Webpack

Question

With require.js it was very easy to debug a module in Chrome's DevTools, by simply entering:

require('my-module').callThisFunction()

With Webpack this is not possible anymore, because it compiles the modules via CLI and does not export require.

window.webpackJsonp is globally exposed, so I thought I could just find the module ID and call it like this: webpackJsonp([1],[]), but unfortunately this returns undefined.

Are there any workarounds to still be able to debug like require.js?

Possible duplicate of How do I require() from the console using webpack? — Venryx
– Venryx, Commented Mar 27, 2017 at 20:31

Vitaly Volkov · Accepted Answer · 2015-12-09 09:43:07Z

1

Add code to module in bundle

require.ensure([], function() {
  window.require = function(smth) {
    return require('./' + smth);
  };
});

Now you can use 'require' from chrome console like require('app').doSmth()

answered Dec 9, 2015 at 9:43

Vitaly Volkov

3032 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Juho Vepsäläinen · Accepted Answer · 2015-06-09 17:54:27Z

1

You can get something pretty close using expose-loader. Ie. for React you could have { test: require.resolve("react"), loader: "expose?React" } at your loader configuration. After that you can access React through console. The same idea applies for other libraries.

answered Jun 9, 2015 at 17:54

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

4 Comments

spacek33z Over a year ago

Yeah, but then I would need to do this for every module that I have (and it would create globals). This takes away the ease of testing that I had before with require.js.

Juho Vepsäläinen Over a year ago

That's definitely true! I've "solved" this problem by using hot loading. If I want to introspect something I just add a console.log somewhere. After that it triggers my build and updates the browser where I can see the answer I was after. Would that work for you?

spacek33z Over a year ago

Unfortunately no, because being able to freely test all modules in the console can really speed up debugging. Is there really no way to just do something like getWebpackModule(moduleId)?

Juho Vepsäläinen Over a year ago

As far as I understand, nope. Webpack just gives you a bundle. Fortunately Webpack's watcher works fast during development so that helps a bit. Btw, see blog.player.me/… . Some good info on moving from RequireJS to Webpack.

Collectives™ on Stack Overflow

Debugging in devtools with Webpack

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related