從console.log調用webpack捆綁的函數/類

Question

是否可以從Web檢查器控制台訪問導出的模塊（ES6-> ES5編譯）？ 它們使用webpack捆綁在一起

我試圖調用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 

Answer 1

1）打開你的devtools，“Sources”面板。

2）打開webpack://在資源管理器選項卡中，由於源圖，您將看到原始的ES6文件。

您可以設置斷點，訪問變量......

Answer 2

是。

將以下代碼添加到bundle中的某個模塊：

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

從控制台使用require：

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

---

編輯：

在TypeScript中我們使用：

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

我目前正以這種方式實例化/獲取我的服務：

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

Answer 3

如果您不想在應用中添加特殊代碼。 您可以按照以下步驟操作：

• 在您使用稍后要調試的服務/類的位置放置斷點
• 在控制台中，將其保存在窗口中，例如window.myService = this.props.myService
• 使用窗口中保存的參考