Call Webpack Bundled Function/class From Console.log

Is it possible to access the exported modules(ES6->ES5 compiled) from web inspector console? They are bundled together using webpack I am trying to call Session.setSessionInLoca

Solution 1:

Yes.

Add following code to some module in bundle:

require.ensure([], function () {
    window.require = function (module) {
        return require(module);
    };
});

Use require from console:

require("./app").doSomething();

---

EDIT:

In TypeScript we use:

(require as any).ensure([], () => {
    window["require"] = module => require(module);
});

I'm currently instantiating/getting my services this way:

var contactsService= (new (require("./app").default)).contactsService;

Solution 2:

1) Open your devtools, the "Sources" panel.

2) open the webpack:// in the explorer tab, you'll see your original ES6 files thanks to sourcemaps.

You can setup break points, access variables ...

Solution 3:

If you don't want to add special code to your app. You can follow these steps:

• Place a breakpoint where you use the service/class that you later wish to debug
• In the console, save it on the window for example window.myService = this.props.myService
• Use the saved reference on the window