从console.log调用webpack捆绑的函数/类 [英] Call webpack bundled function/class from console.log

问题描述

可以从Web检查器控制台访问导出的模块（ES6-> ES5编译）吗？我们正在尝试调用Session.setSessionInLocalStorage（'test key'，'test object'）;

  / ****** /（function（modules）{// webpackBootstrap / ****** / //模块缓存/ ****** / var installedModules = {}; / ****** // ****** / // require函数/ ****** / function __webpack_require __（moduleId）{/ ****** // ****** / //检查模块是否在缓存中/ ****** / if（installedModules [moduleId]）/ ****** / return installedModules [moduleId] .exports; / *** *** // ****** / //创建一个新模块（并将其放入缓存）/ ****** / var module = installedModules [moduleId] = {/ ****** / exports：{}，/ ****** / id：moduleId，/ ****** / loaded：false / ****** /}; / ****** // ** **** / //执行模块函数/ ****** / modules [moduleId] .call（module.exports，module，module.exports，__webpack _require __）; / ****** // ****** / //将模块标记为已加载/ ****** / module.loaded = true; / ****** // * ***** / //返回模块的导出/ ****** / return module.exports; / ****** /} / ****** // ***** * // ****** / //公开模块对象（__webpack_modules __）/ ****** / __webpack_require __。m = modules; / ****** // ****** / /公开模块缓存/ ****** / __webpack_require __。c = installedModules; / ****** // ****** / // __webpack_public_path __ / ****** / __webpack_require __。p = ; / ****** // ****** / //加载入口模块并返回export / ****** / 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 * // *！*** ************************************************** *********** \ ************************************************ ****** // *** / 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 ||假; descriptor.configurable = true; if（value在描述符中）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）;返回构造函数; }; }（）;函数_classCallCheck（instance，Constructor）{if（！（instance instanceof Constructor））{throw new TypeError（Can not call a class as a function）; }} var Session = function（）{function Session（sessionId）{_classCallCheck（this，Session）; this.sessionId = sessionId; }} {};} {};}} {};}} {};}} {_ .setItem（sessionKey，JSON.stringify（sessionData））;}}]）;返回会话; }（）; export.Session = Session; / *** /} / ****** /]）; //＃sourceMappingURL = app.js.map  

解决方案

1）打开您的devtools，源面板。

2）在资源管理器选项卡中打开 webpack：// ，由于源代码，您将看到原始的ES6文件。

您可以设置断点，访问变量...

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

解决方案

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

这篇关于从console.log调用webpack捆绑的函数/类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！