CODEWITHSUNDEEP
javascriptwebpack
spacek33z
spacek33z

Reputation: 2253

Debugging in devtools with Webpack

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?

Upvotes: 9

Views: 4171

Answers (2)

Vitaly Volkov
Vitaly Volkov

Reputation: 303

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()

Upvotes: 1

Juho Vepsäläinen
Juho Vepsäläinen

Reputation: 26873

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.

Upvotes: 1

Related Questions