从console.log调用webpack绑定函数/类
Call webpack bundled function/class from console.log
是否可以从web检查器控制台访问导出的模块(ES6->ES5已编译)?它们使用webpack 捆绑在一起
我正在尝试调用Session.setSessionLocalStorage("测试键"、"测试对象");
/******/ (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
是
将以下代码添加到捆绑包中的某个模块:
require.ensure([], function () {
window.require = function (module) {
return require(module);
};
});
从控制台使用需求:
require("./app").doSomething();
编辑:
在TypeScript中,我们使用:
(require as any).ensure([], () => {
window["require"] = module => require(module);
});
我目前正在以这种方式实例化/获取我的服务:
var contactsService= (new (require("./app").default)).contactsService;
1)打开您的devtools,即"Sources"面板。
2) 打开资源管理器选项卡中的webpack://
,您将看到源映射提供的原始ES6文件。
您可以设置断点、访问变量。。。
如果您不想在应用程序中添加特殊代码。您可以按照以下步骤操作:
- 在使用稍后要调试的服务/类的位置放置断点
- 在控制台中,将其保存在窗口上,例如
window.myService = this.props.myService
- 使用窗口上保存的引用
相关文章:
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- Jquery:将函数绑定到已绑定元素的点击事件
- 我可以通过使用函数绑定来保留默认值吗?如果没有,为什么
- 这在 Object 方法中不引用对象,而是引用函数绑定到的标记
- 为什么当我尝试将函数绑定到自身时,“this”对象仍然引用窗口
- 如何将函数绑定到使用链接函数创建 HTML 的角度指令
- 将jquery函数绑定到事件
- 将服务中的函数绑定到$scope(错误:无法设置undefined的属性'onChange')
- 使用闭包/函数绑定将自函数作为回调传递
- 如何在 Javascript 中将函数绑定到对象数据成员的更改
- 需要将内部函数绑定到元素的单击事件
- 在Javascript中将对象原型函数绑定到对象
- 将函数绑定到Twitter Bootstrap Modal Ajax Complete
- ng使用一个不识别临时变量形式ng repeat的函数绑定html
- 将函数绑定到baz后调用fn.apply(bar,[])
- 将函数绑定到采用参数的不同事件
- 如何将返回函数绑定到标记角度
- 在IE9中未检测到视图模型函数绑定,但在FF和Chrome中有效
- 如何将函数绑定到ShadowDOM内部的元素
- 将原型函数绑定到此的方式不那么冗长