Call webpack bundled function/class from console.log

Question

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.setSessionInLocalStorage('test key', 'test object');

/******/ (function(modules) { // webpackBootstrap
/******/  // The module cache
/******/  var installedModules = {};
/******/
/******/  // The require function
/******/  function __webpack_require__(moduleId) {
/******/
/******/   // Check if module is in cache
/******/   if(installedModules[moduleId])
/******/    return installedModules[moduleId].exports;
/******/
/******/   // Create a new module (and put it into the cache)
/******/   var module = installedModules[moduleId] = {
/******/    exports: {},
/******/    id: moduleId,
/******/    loaded: false
/******/   };
/******/
/******/   // Execute the module function
/******/   modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/   // Flag the module as loaded
/******/   module.loaded = true;
/******/
/******/   // Return the exports of the module
/******/   return module.exports;
/******/  }
/******/
/******/
/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = modules;
/******/
/******/  // expose the module cache
/******/  __webpack_require__.c = installedModules;
/******/
/******/  // __webpack_public_path__
/******/  __webpack_require__.p = "";
/******/
/******/  // Load entry module and return exports
/******/  return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!*********************!*\
  !*** ./app/main.js ***!
  \*********************/
/***/ function(module, exports, __webpack_require__) {

 'use strict';
 
 var _CoreUtils = __webpack_require__(/*! ./Core/utils/session/Core.utils.Session */ 4);
 
 var mySession = new _CoreUtils.Session();
 
 mySession.setSessionInLocalStorage('key', 'my object');

/***/ },
/* 1 */,
/* 2 */,
/* 3 */,
/* 4 */
/*!******************************************************!*\
  !*** ./app/Core/utils/session/Core.utils.Session.js ***!
  \******************************************************/
/***/ function(module, exports) {

 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Session = function () {
     function Session(sessionId) {
         _classCallCheck(this, Session);
 
         this.sessionId = sessionId;
     }
 
     _createClass(Session, [{
         key: "getSessionFromLocalStorage",
         value: function getSessionFromLocalStorage(sessionKey) {
             return localStorage.getItem(sessionKey);
         }
     }, {
         key: "setSessionInLocalStorage",
         value: function setSessionInLocalStorage(sessionKey, sessionData) {
             localStorage.setItem(sessionKey, JSON.stringify(sessionData));
         }
     }]);
 
     return Session;
 }();
 
 exports.Session = Session;

/***/ }
/******/ ]);
//# sourceMappingURL=app.js.map

score 3 · Answer 1 · answered Nov 25 '16 at 09:47

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;

score 2 · Answer 2 · answered Apr 18 '16 at 22:25

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 ...

answered Apr 18 '16 at 22:25

topheman

7,422
4
24
33

1

Ok yes I see it under webpack://. I know I can set break points etc... I want to execute the function from console? isn't there like a global window object/namespace for me to access my modules from console and call it? e.g execute this from console? `Session.setSessionInLocalStorage('test key', 'test object');` – MonteCristo Apr 19 '16 at 08:50
Put a breakpoint somewhere this class + method is accessible, then execute the function. In your case, import Session somewhere if you don't already have then you'll be able to play with it in the console. – topheman Apr 19 '16 at 08:59

score 0 · Answer 3 · answered Apr 02 '17 at 16:26

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

Call webpack bundled function/class from console.log

3 Answers3

Linked