From 5a098d286a3616de3e8eb2b2046f74ad2bd26ccd Mon Sep 17 00:00:00 2001 From: Maiz Date: Fri, 27 May 2016 19:41:46 +0800 Subject: [PATCH] support circular object structure --- dist/vconsole.min.js | 1274 ++++++++++++++++++++++++++++++++++++++++-- example/demo1.html | 12 +- src/core/core.less | 25 +- src/lib/tool.js | 98 +++- src/log/default.js | 13 +- src/log/item.html | 2 +- src/log/log.js | 75 ++- 7 files changed, 1428 insertions(+), 71 deletions(-) diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js index 5e93e0f9..c69dd4d7 100644 --- a/dist/vconsole.min.js +++ b/dist/vconsole.min.js @@ -69,14 +69,37 @@ return /******/ (function(modules) { // webpackBootstrap var _core2 = _interopRequireDefault(_core); + var _plugin = __webpack_require__(10); + + var _plugin2 = _interopRequireDefault(_plugin); + + var _default = __webpack_require__(17); + + var _default2 = _interopRequireDefault(_default); + + var _system = __webpack_require__(21); + + var _system2 = _interopRequireDefault(_system); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - exports.default = new _core2.default(); /** - * A Front-End Console Panel for Mobile Webpage - * - * @author WechatFE - */ + // here we go + // default tabs + /** + * A Front-End Console Panel for Mobile Webpage + * + * @author WechatFE + */ + + // classes + var vConsole = new _core2.default(); + vConsole.addPlugin(_default2.default); + vConsole.addPlugin(_system2.default); + + // export + window.VConsolePlugin = _plugin2.default; + exports.default = vConsole; module.exports = exports['default']; /***/ }, @@ -109,15 +132,23 @@ return /******/ (function(modules) { // webpackBootstrap var _core2 = _interopRequireDefault(_core); + var _tabbar = __webpack_require__(9); + + var _tabbar2 = _interopRequireDefault(_tabbar); + + var _tabbox = __webpack_require__(13); + + var _tabbox2 = _interopRequireDefault(_tabbox); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - var vConsole = function () { - function vConsole() { - _classCallCheck(this, vConsole); + var VConsole = function () { + function VConsole() { + _classCallCheck(this, VConsole); var that = this; @@ -125,6 +156,7 @@ return /******/ (function(modules) { // webpackBootstrap this.$dom = null; this.activedTab = ''; this.tabList = []; + this.pluginList = {}; this.console = {}; // store native console methods this.logList = []; // store logs when vConsole is not ready this.isReady = false; @@ -155,7 +187,7 @@ return /******/ (function(modules) { // webpackBootstrap */ - _createClass(vConsole, [{ + _createClass(VConsole, [{ key: '_render', value: function _render() { var id = '#__vconsole'; @@ -243,12 +275,14 @@ return /******/ (function(modules) { // webpackBootstrap }); // show a log box - _query2.default.bind(_query2.default.all('.vc-tab'), 'click', function (e) { - var tabName = e.target.dataset.tab; - if (tabName == that.activedTab) { - return; + _query2.default.bind(_query2.default.one('.vc-tabbar', that.$dom), 'click', function (e) { + if (_query2.default.hasClass(e.target, 'vc-tab')) { + var tabName = e.target.dataset.tab; + if (tabName == that.activedTab) { + return; + } + that.showTab(tabName); } - that.showTab(tabName); }); // log-related actions @@ -275,15 +309,66 @@ return /******/ (function(modules) { // webpackBootstrap */ value: function _autoRun() { this.isReady = true; + + // init plugins + for (var id in this.pluginList) { + this._initPlugin(this.pluginList[id]); + } + + // show first tab + this.showTab(this.tabList[0]); + } + + /** + * init a plugin + * @private + */ + + }, { + key: '_initPlugin', + value: function _initPlugin(plugin) { + var that = this; + plugin.trigger('init'); + // render tab (if it is a tab plugin then it should has tab-related events) + plugin.trigger('renderTab', function (tabboxHTML) { + // add to tabList + that.tabList.push(plugin.id); + // render tabbar + var $tabbar = _query2.default.render(_tabbar2.default, { id: plugin.id, name: plugin.name }); + _query2.default.one('.vc-tabbar', that.$dom).appendChild($tabbar); + // render tabbox + var $tabbox = _query2.default.render(_tabbox2.default, { id: plugin.id }); + if (tool.isString(tabboxHTML)) { + $tabbox.innerHTML += tabboxHTML; + } else if (!!tabboxHTML) { + $tabbox.appendChild(tabboxHTML); + } + _query2.default.one('.vc-content', that.$dom).appendChild($tabbox); + }); + plugin.trigger('finishInit'); } /** - * register a new tab + * add a new plugin + * @public + * @param object VConsolePlugin object */ }, { - key: 'addTab', - value: function addTab(opt) {} + key: 'addPlugin', + value: function addPlugin(plugin) { + // ignore this plugin if it has already been installed + if (this.pluginList[plugin.id] !== undefined) { + return false; + } + // trigger 'add' event + this.pluginList[plugin.id] = plugin; + plugin.trigger('add'); + // init plugin only if vConsole is ready + if (this.isReady) { + this._initPlugin(plugin); + } + } /** * show console panel @@ -306,12 +391,31 @@ return /******/ (function(modules) { // webpackBootstrap value: function hide() { _query2.default.removeClass(this.$dom, 'vc-toggle'); } + + /** + * show a tab + * @public + */ + + }, { + key: 'showTab', + value: function showTab(tabName) { + var $logbox = _query2.default.one('#__vc_log_' + tabName); + // set actived status + _query2.default.removeClass(_query2.default.all('.vc-tab', this.$dom), 'vc-actived'); + _query2.default.addClass(_query2.default.one('#__vc_tab_' + tabName), 'vc-actived'); + _query2.default.removeClass(_query2.default.all('.vc-logbox', this.$dom), 'vc-actived'); + _query2.default.addClass($logbox, 'vc-actived'); + // scroll to bottom + _query2.default.one('.vc-content', this.$dom).scrollTop = _query2.default.one('.vc-content', this.$dom).scrollHeight; + this.activedTab = tabName; + } }]); - return vConsole; + return VConsole; }(); // END class - exports.default = vConsole; + exports.default = VConsole; module.exports = exports['default']; /***/ }, @@ -323,13 +427,21 @@ return /******/ (function(modules) { // webpackBootstrap Object.defineProperty(exports, "__esModule", { value: true }); + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; + exports.getDate = getDate; exports.isNumber = isNumber; exports.isString = isString; exports.isArray = isArray; + exports.isBoolean = isBoolean; + exports.isUndefined = isUndefined; + exports.isNull = isNull; + exports.isSymbol = isSymbol; exports.isObject = isObject; exports.isFunction = isFunction; exports.htmlEncode = htmlEncode; + exports.JSONStringify = JSONStringify; exports.setStorage = setStorage; exports.getStorage = getStorage; /** @@ -381,8 +493,21 @@ return /******/ (function(modules) { // webpackBootstrap function isArray(value) { return Object.prototype.toString.call(value) == '[object Array]'; } + function isBoolean(value) { + return Object.prototype.toString.call(value) == '[object Boolean]'; + } + function isUndefined(value) { + return Object.prototype.toString.call(value) == '[object Undefined]'; + } + function isNull(value) { + return Object.prototype.toString.call(value) == '[object Null]'; + } + function isSymbol(value) { + return Object.prototype.toString.call(value) == '[object Symbol]'; + } function isObject(value) { - return Object.prototype.toString.call(value) == '[object Object]'; + var is = Object.prototype.toString.call(value) == '[object Object]' || value !== null && (typeof value === 'undefined' ? 'undefined' : _typeof(value)) == 'object'; + return is; } function isFunction(value) { return Object.prototype.toString.call(value) == '[object Function]'; @@ -397,6 +522,109 @@ return /******/ (function(modules) { // webpackBootstrap return document.createElement('a').appendChild(document.createTextNode(text)).parentNode.innerHTML; } + /** + * JSON stringify, support circular structure + */ + function JSONStringify(obj) { + var json = '', + lv = 0; + + // use a map to track whether a value has been iterated in previous level + var objMap = []; + function _isIteratedInPreLevel(val, curLV) { + var is = false; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = objMap[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var item = _step.value; + + if (item.obj == val && item.lv < curLV) { + is = true; + break; + } + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return is; + } + + function _iterateObj(val) { + if (isObject(val)) { + // object + if (_isIteratedInPreLevel(val, lv)) { + // this object is circular, skip it + json += "{Circular Object}"; + return; + } + objMap.push({ obj: val, lv: lv }); + + var keys = Object.keys(val); + json += "{"; + lv++; + for (var i = 0; i < keys.length; i++) { + var k = keys[i]; + if (!val.hasOwnProperty(k)) { + continue; + } + json += k + ': '; + _iterateObj(val[k]); + if (i < keys.length - 1) { + json += ', '; + } + } + lv--; + json += '}'; + } else if (isArray(val)) { + // array + json += '['; + lv++; + for (var _i = 0; _i < val.length; _i++) { + _iterateObj(val[_i]); + if (_i < val.length - 1) { + json += ', '; + } + } + lv--; + json += ']'; + } else if (isString(val)) { + json += '"' + val + '"'; + } else if (isNumber(val)) { + json += val; + } else if (isBoolean(val)) { + json += val; + } else if (isNull(val)) { + json += 'null'; + } else if (isUndefined(val)) { + json += 'undefined'; + } else if (isFunction(val)) { + json += 'function()'; + } else if (isSymbol(val)) { + json += 'symbol'; + } else { + json += 'unknown'; + } + } + _iterateObj(obj); + + return json; + } + /** * localStorage methods */ @@ -445,7 +673,7 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ $.all = function (selector, contextElement) { - var nodeList, + var nodeList = void 0, list = []; if (contextElement) { nodeList = contextElement.querySelectorAll(selector); @@ -469,8 +697,29 @@ return /******/ (function(modules) { // webpackBootstrap if (!(0, _tool.isArray)($el)) { $el = [$el]; } - for (var i = 0; i < $el.length; i++) { - $el[i].className += ' ' + className; + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = $el[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var $e = _step.value; + + $e.className += ' ' + className; + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } } }; @@ -485,14 +734,35 @@ return /******/ (function(modules) { // webpackBootstrap if (!(0, _tool.isArray)($el)) { $el = [$el]; } - for (var i = 0; i < $el.length; i++) { - var arr = $el[i].className.split(' '); - for (var j = 0; j < arr.length; j++) { - if (arr[j] == className) { - arr[j] = ''; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = $el[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var $e = _step2.value; + + var arr = $e.className.split(' '); + for (var j = 0; j < arr.length; j++) { + if (arr[j] == className) { + arr[j] = ''; + } + } + $e.className = arr.join(' '); + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; } } - $el[i].className = arr.join(' '); } }; @@ -505,11 +775,33 @@ return /******/ (function(modules) { // webpackBootstrap return false; } var arr = $el.className.split(' '); - for (var i = 0; i < arr.length; i++) { - if (arr[i] == className) { - return true; + var _iteratorNormalCompletion3 = true; + var _didIteratorError3 = false; + var _iteratorError3 = undefined; + + try { + for (var _iterator3 = arr[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) { + var name = _step3.value; + + if (name == className) { + return true; + } + } + } catch (err) { + _didIteratorError3 = true; + _iteratorError3 = err; + } finally { + try { + if (!_iteratorNormalCompletion3 && _iterator3.return) { + _iterator3.return(); + } + } finally { + if (_didIteratorError3) { + throw _iteratorError3; + } } } + return false; }; @@ -531,8 +823,29 @@ return /******/ (function(modules) { // webpackBootstrap if (!(0, _tool.isArray)($el)) { $el = [$el]; } - for (var i = 0; i < $el.length; i++) { - $el[i].addEventListener(eventType, fn, useCapture); + var _iteratorNormalCompletion4 = true; + var _didIteratorError4 = false; + var _iteratorError4 = undefined; + + try { + for (var _iterator4 = $el[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) { + var $e = _step4.value; + + $e.addEventListener(eventType, fn, useCapture); + } + } catch (err) { + _didIteratorError4 = true; + _iteratorError4 = err; + } finally { + try { + if (!_iteratorNormalCompletion4 && _iterator4.return) { + _iterator4.return(); + } + } finally { + if (_didIteratorError4) { + throw _iteratorError4; + } + } } }; @@ -540,14 +853,21 @@ return /******/ (function(modules) { // webpackBootstrap * simply render a HTML template * @param string tpl * @param object key-value data - * @return string + * @param boolean whether to conver to HTML string + * @return object|string */ - $.render = function (tpl, data) { + $.render = function (tpl, data, toString) { var html = tpl; for (var k in data) { - html = html.replace('{' + k + '}', data[k]); + html = html.replace(new RegExp('{' + k + '}', 'g'), data[k]); } - return html; + var dom = html; + if (!toString) { + var e = document.createElement('div'); + e.innerHTML = html; + dom = e.children[0]; + } + return dom; }; /** @@ -591,7 +911,7 @@ return /******/ (function(modules) { // webpackBootstrap // module - exports.push([module.id, "#__vconsole {\n font-size: 13px;\n}\n#__vconsole .vc-switch {\n display: block;\n position: fixed;\n right: 10px;\n bottom: 10px;\n color: #FFF;\n background-color: #04BE02;\n line-height: 1;\n font-size: 14px;\n padding: 8px 16px;\n z-index: 10000;\n border-radius: 4px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);\n}\n#__vconsole .vc-mask {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0);\n z-index: 10001;\n transition: background .3s;\n -webkit-tap-highlight-color: transparent;\n}\n#__vconsole .vc-panel {\n position: fixed;\n min-height: 80%;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10002;\n background-color: #EFEFF4;\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n transition: transform .3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n#__vconsole .vc-tabbar {\n border-bottom: 1px solid #D9D9D9;\n overflow: hidden;\n}\n#__vconsole .vc-tabbar .vc-tab {\n float: left;\n line-height: 39px;\n padding: 0 15px;\n border-right: 1px solid #D9D9D9;\n text-decoration: none;\n color: #000;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-tabbar .vc-tab:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-tabbar .vc-tab.vc-actived {\n background-color: #FFF;\n}\n#__vconsole .vc-content {\n background-color: #FFF;\n overflow-x: hidden;\n overflow-y: scroll;\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n bottom: 40px;\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox {\n display: none;\n position: relative;\n height: 100%;\n}\n#__vconsole .vc-logbox i {\n font-style: normal;\n}\n#__vconsole .vc-logbox .vc-log {\n -webkit-tap-highlight-color: transparent;\n}\n#__vconsole .vc-logbox .vc-log:empty:before {\n content: \"No log\";\n color: #999;\n position: absolute;\n top: 45%;\n left: 0;\n right: 0;\n bottom: 0;\n font-size: 15px;\n text-align: center;\n}\n#__vconsole .vc-logbox .vc-item {\n margin: 0;\n padding: 6px 8px;\n line-height: 1.3;\n border-bottom: 1px solid #EEE;\n word-break: break-word;\n}\n#__vconsole .vc-logbox .vc-item-info {\n color: #6A5ACD;\n}\n#__vconsole .vc-logbox .vc-item-debug {\n color: #DAA520;\n}\n#__vconsole .vc-logbox .vc-item-warn {\n color: #FFA500;\n border-color: #FFB930;\n background-color: #FFFACD;\n}\n#__vconsole .vc-logbox .vc-item-error {\n color: #DC143C;\n border-color: #F4A0AB;\n background-color: #FFE4E1;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold {\n display: block;\n max-height: 300px;\n overflow: scroll;\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer {\n display: block;\n font-style: italic;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer {\n padding-left: 10px;\n position: relative;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:before {\n content: \"\";\n position: absolute;\n top: 4px;\n left: 2px;\n width: 0;\n height: 0;\n border: transparent solid 4px;\n border-left-color: #000;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-inner {\n display: none;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold.vc-toggle .vc-fold-outer:before {\n top: 6px;\n left: 0;\n border-top-color: #000;\n border-left-color: transparent;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold.vc-toggle .vc-fold-inner {\n display: block;\n}\n#__vconsole .vc-logbox .vc-code-key {\n color: #905;\n}\n#__vconsole .vc-logbox .vc-code-number {\n color: #0086B3;\n}\n#__vconsole .vc-logbox .vc-code-string {\n color: #183691;\n}\n#__vconsole .vc-logbox.vc-actived {\n display: block;\n}\n#__vconsole .vc-toolbar {\n border-top: 1px solid #D9D9D9;\n line-height: 39px;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n#__vconsole .vc-toolbar .vc-tool {\n text-decoration: none;\n color: #000;\n width: 50%;\n float: left;\n text-align: center;\n position: relative;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-toolbar .vc-tool:after {\n content: \" \";\n position: absolute;\n top: 7px;\n bottom: 7px;\n right: 0;\n border-left: 1px solid #D9D9D9;\n}\n#__vconsole .vc-toolbar .vc-tool-last:after {\n border: none;\n}\n#__vconsole.vc-toggle .vc-switch {\n display: none;\n}\n#__vconsole.vc-toggle .vc-mask {\n background: rgba(0, 0, 0, 0.6);\n display: block;\n}\n#__vconsole.vc-toggle .vc-panel {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n}\n", ""]); + exports.push([module.id, "#__vconsole {\n font-size: 13px;\n}\n#__vconsole .vc-switch {\n display: block;\n position: fixed;\n right: 10px;\n bottom: 10px;\n color: #FFF;\n background-color: #04BE02;\n line-height: 1;\n font-size: 14px;\n padding: 8px 16px;\n z-index: 10000;\n border-radius: 4px;\n box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);\n}\n#__vconsole .vc-mask {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0);\n z-index: 10001;\n transition: background .3s;\n -webkit-tap-highlight-color: transparent;\n}\n#__vconsole .vc-panel {\n position: fixed;\n min-height: 80%;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10002;\n background-color: #EFEFF4;\n -webkit-transition: -webkit-transform 0.3s;\n transition: -webkit-transform 0.3s;\n transition: transform .3s;\n transition: transform 0.3s, -webkit-transform 0.3s;\n -webkit-transform: translate(0, 100%);\n transform: translate(0, 100%);\n}\n#__vconsole .vc-tabbar {\n border-bottom: 1px solid #D9D9D9;\n overflow: hidden;\n}\n#__vconsole .vc-tabbar .vc-tab {\n float: left;\n line-height: 39px;\n padding: 0 15px;\n border-right: 1px solid #D9D9D9;\n text-decoration: none;\n color: #000;\n -webkit-tap-highlight-color: transparent;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-tabbar .vc-tab:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-tabbar .vc-tab.vc-actived {\n background-color: #FFF;\n}\n#__vconsole .vc-content {\n background-color: #FFF;\n overflow-x: hidden;\n overflow-y: scroll;\n position: absolute;\n top: 40px;\n left: 0;\n right: 0;\n bottom: 40px;\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox {\n display: none;\n position: relative;\n min-height: 100%;\n}\n#__vconsole .vc-logbox i {\n font-style: normal;\n}\n#__vconsole .vc-logbox .vc-log {\n -webkit-tap-highlight-color: transparent;\n}\n#__vconsole .vc-logbox .vc-log:empty:before {\n content: \"Empty\";\n color: #999;\n position: absolute;\n top: 45%;\n left: 0;\n right: 0;\n bottom: 0;\n font-size: 15px;\n text-align: center;\n}\n#__vconsole .vc-logbox .vc-item {\n margin: 0;\n padding: 6px 8px;\n overflow: hidden;\n line-height: 1.3;\n border-bottom: 1px solid #EEE;\n word-break: break-word;\n}\n#__vconsole .vc-logbox .vc-item-info {\n color: #6A5ACD;\n}\n#__vconsole .vc-logbox .vc-item-debug {\n color: #DAA520;\n}\n#__vconsole .vc-logbox .vc-item-warn {\n color: #FFA500;\n border-color: #FFB930;\n background-color: #FFFACD;\n}\n#__vconsole .vc-logbox .vc-item-error {\n color: #DC143C;\n border-color: #F4A0AB;\n background-color: #FFE4E1;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-content {\n margin-right: 60px;\n display: block;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-meta {\n color: #888;\n float: right;\n width: 60px;\n text-align: right;\n}\n#__vconsole .vc-logbox .vc-item.vc-item-nometa .vc-item-content {\n margin-right: 0;\n}\n#__vconsole .vc-logbox .vc-item.vc-item-nometa .vc-item-meta {\n display: none;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code {\n display: block;\n white-space: pre-wrap;\n overflow: scroll;\n position: relative;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-input,\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output {\n padding-left: 12px;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-input:before,\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output:before {\n content: \"\\203A\";\n position: absolute;\n top: -3px;\n left: 0;\n font-size: 16px;\n color: #6A5ACD;\n}\n#__vconsole .vc-logbox .vc-item .vc-item-code.vc-item-code-output:before {\n content: \"\\2039\";\n}\n#__vconsole .vc-logbox .vc-item .vc-fold {\n display: block;\n overflow: scroll;\n -webkit-overflow-scrolling: touch;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer {\n display: block;\n font-style: italic;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer {\n padding-left: 10px;\n position: relative;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-outer:before {\n content: \"\";\n position: absolute;\n top: 4px;\n left: 2px;\n width: 0;\n height: 0;\n border: transparent solid 4px;\n border-left-color: #000;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold .vc-fold-inner {\n display: none;\n white-space: pre-wrap;\n max-height: 250px;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold.vc-toggle .vc-fold-outer:before {\n top: 6px;\n left: 0;\n border-top-color: #000;\n border-left-color: transparent;\n}\n#__vconsole .vc-logbox .vc-item .vc-fold.vc-toggle .vc-fold-inner {\n display: block;\n}\n#__vconsole .vc-logbox .vc-code-key {\n color: #905;\n}\n#__vconsole .vc-logbox .vc-code-function {\n color: #905;\n font-style: italic;\n}\n#__vconsole .vc-logbox .vc-code-number,\n#__vconsole .vc-logbox .vc-code-boolean {\n color: #0086B3;\n}\n#__vconsole .vc-logbox .vc-code-string {\n color: #183691;\n}\n#__vconsole .vc-logbox .vc-code-null,\n#__vconsole .vc-logbox .vc-code-undefined {\n color: #666;\n}\n#__vconsole .vc-logbox .vc-cmd {\n position: absolute;\n height: 40px;\n left: 0;\n right: 0;\n bottom: 0;\n border-top: 1px solid #D9D9D9;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input-wrap {\n display: block;\n height: 28px;\n margin-right: 40px;\n padding: 6px 8px;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input {\n width: 100%;\n border: none;\n resize: none;\n outline: none;\n padding: 0;\n font-size: 12px;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-input::-webkit-input-placeholder {\n line-height: 28px;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-btn {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 40px;\n border: none;\n background-color: #EFEFF4;\n outline: none;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-logbox .vc-cmd .vc-cmd-btn:active {\n background-color: rgba(0, 0, 0, 0.15);\n}\n#__vconsole .vc-logbox.vc-actived {\n display: block;\n}\n#__vconsole .vc-toolbar {\n border-top: 1px solid #D9D9D9;\n line-height: 39px;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n overflow: hidden;\n}\n#__vconsole .vc-toolbar .vc-tool {\n text-decoration: none;\n color: #000;\n width: 50%;\n float: left;\n text-align: center;\n position: relative;\n -webkit-touch-callout: none;\n}\n#__vconsole .vc-toolbar .vc-tool:after {\n content: \" \";\n position: absolute;\n top: 7px;\n bottom: 7px;\n right: 0;\n border-left: 1px solid #D9D9D9;\n}\n#__vconsole .vc-toolbar .vc-tool-last:after {\n border: none;\n}\n#__vconsole.vc-toggle .vc-switch {\n display: none;\n}\n#__vconsole.vc-toggle .vc-mask {\n background: rgba(0, 0, 0, 0.6);\n display: block;\n}\n#__vconsole.vc-toggle .vc-panel {\n -webkit-transform: translate(0, 0);\n transform: translate(0, 0);\n}\n", ""]); // exports @@ -907,7 +1227,881 @@ return /******/ (function(modules) { // webpackBootstrap /* 8 */ /***/ function(module, exports) { - module.exports = "\n
\n
vConsole
\n
\n
\n
\n
\n Log\n System\n Network\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Clear\n Hide\n
\n
\n
\n"; + module.exports = "\n
\n
vConsole
\n
\n
\n
\n
\n
\n
\n
\n
\n Clear\n Hide\n
\n
\n
\n"; + +/***/ }, +/* 9 */ +/***/ function(module, exports) { + + module.exports = "{name}"; + +/***/ }, +/* 10 */ +/***/ 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"); } } + + /** + * vConsole Plugin Class + * + * @author WechatFE + */ + + var VConsolePlugin = function () { + function VConsolePlugin(id) { + var name = arguments.length <= 1 || arguments[1] === undefined ? 'newPlugin' : arguments[1]; + + _classCallCheck(this, VConsolePlugin); + + this.id = id; + this.name = name; + + this.eventList = {}; + } + + _createClass(VConsolePlugin, [{ + key: 'on', + + + /** + * register an event + * @public + * @param string + * @param function + */ + value: function on(eventName, callback) { + this.eventList[eventName] = callback; + return this; + } + + /** + * trigger an event + * @public + * @param string + * @param mixed + */ + + }, { + key: 'trigger', + value: function trigger(eventName, data) { + if (typeof this.eventList[eventName] === 'function') { + // registered by `.on()` method + this.eventList[eventName].call(this, data); + } else { + // registered by `.onXxx()` method + var method = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1); + if (typeof this[method] === 'function') { + this[method].call(this, data); + } + } + return this; + } + }, { + key: 'id', + get: function get() { + return this._id; + }, + set: function set(value) { + if (!value) { + throw 'Plugin ID cannot be empty'; + } + this._id = value.toLowerCase(); + } + }, { + key: 'name', + get: function get() { + return this._name; + }, + set: function set(value) { + if (!value) { + throw 'Plugin name cannot be empty'; + } + this._name = value; + } + }]); + + return VConsolePlugin; + }(); // END class + + exports.default = VConsolePlugin; + module.exports = exports['default']; + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */ +/***/ function(module, exports) { + + module.exports = "
\n \n
"; + +/***/ }, +/* 14 */, +/* 15 */, +/* 16 */, +/* 17 */ +/***/ function(module, exports, __webpack_require__) { + + '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; }; }(); + + var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; + + var _query = __webpack_require__(3); + + var _query2 = _interopRequireDefault(_query); + + var _tool = __webpack_require__(2); + + var tool = _interopRequireWildcard(_tool); + + var _log = __webpack_require__(18); + + var _log2 = _interopRequireDefault(_log); + + var _tabbox_default = __webpack_require__(20); + + var _tabbox_default2 = _interopRequireDefault(_tabbox_default); + + var _item_code = __webpack_require__(25); + + var _item_code2 = _interopRequireDefault(_item_code); + + function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** + * vConsole Default Tab + * + * @author WechatFE + */ + + var VConsoleDefaultTab = function (_VConsoleLogTab) { + _inherits(VConsoleDefaultTab, _VConsoleLogTab); + + function VConsoleDefaultTab() { + var _Object$getPrototypeO; + + _classCallCheck(this, VConsoleDefaultTab); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(VConsoleDefaultTab)).call.apply(_Object$getPrototypeO, [this].concat(args))); + + _this.tplTabbox = _tabbox_default2.default; + return _this; + } + + _createClass(VConsoleDefaultTab, [{ + key: 'onFinishInit', + value: function onFinishInit() { + var that = this; + _get(Object.getPrototypeOf(VConsoleDefaultTab.prototype), 'onFinishInit', this).call(this); + + _query2.default.bind(_query2.default.one('.vc-cmd', this.$tabbox), 'submit', function (e) { + e.preventDefault(); + var $input = _query2.default.one('.vc-cmd-input', e.target), + cmd = $input.value; + $input.value = ''; + if (cmd !== '') { + that.evalCommand(cmd); + } + }); + } + + /** + * + * @private + */ + + }, { + key: 'evalCommand', + value: function evalCommand(cmd) { + // print command to console + var date = tool.getDate(+new Date()); + this.renderLog({ + meta: date.hour + ':' + date.minute + ':' + date.second, + content: _query2.default.render(_item_code2.default, { content: cmd, type: 'input' }, true) + }); + // eval + var result = eval(cmd); + // print result to console + var content = ''; + if (tool.isArray(result) || tool.isObject(result)) { + content = this.getFoldedLine(result); + } else { + content = _query2.default.render(_item_code2.default, { content: result, type: 'output' }, true); + } + this.renderLog({ + meta: '', + content: content, + style: 'vc-item-nometa' + }); + } + }]); + + return VConsoleDefaultTab; + }(_log2.default); // END class + + var tab = new VConsoleDefaultTab('default', 'Log'); + + exports.default = tab; + module.exports = exports['default']; + +/***/ }, +/* 18 */ +/***/ function(module, exports, __webpack_require__) { + + 'use strict'; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; + + 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; }; }(); + + var _tool = __webpack_require__(2); + + var tool = _interopRequireWildcard(_tool); + + var _query = __webpack_require__(3); + + var _query2 = _interopRequireDefault(_query); + + var _plugin = __webpack_require__(10); + + var _plugin2 = _interopRequireDefault(_plugin); + + var _item = __webpack_require__(19); + + var _item2 = _interopRequireDefault(_item); + + var _item_fold = __webpack_require__(23); + + var _item_fold2 = _interopRequireDefault(_item_fold); + + var _item_fold_code = __webpack_require__(24); + + var _item_fold_code2 = _interopRequireDefault(_item_fold_code); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** + * vConsole Basic Log Tab + * + * @author WechatFE + */ + + var VConsoleLogTab = function (_VConsolePlugin) { + _inherits(VConsoleLogTab, _VConsolePlugin); + + function VConsoleLogTab() { + var _Object$getPrototypeO; + + _classCallCheck(this, VConsoleLogTab); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(VConsoleLogTab)).call.apply(_Object$getPrototypeO, [this].concat(args))); + + _this.tplTabbox = ''; // MUST be overwrite in child class + _this.allowUnformattedLog = true; // `[xxx]` format log + + _this.isReady = false; + _this.$tabbox = null; + _this.console = {}; + _this.logList = []; + return _this; + } + + /** + * when plugin is added to vConsole, + * this event will be triggered immediately (but vConsole may be not ready yet) + * @public + */ + + + _createClass(VConsoleLogTab, [{ + key: 'onAdd', + value: function onAdd() { + this.mokeConsole(); + } + + /** + * when vConsole is ready, + * this event will be triggered (after 'add' event) + * @public + */ + + }, { + key: 'onInit', + value: function onInit() { + this.isReady = true; + this.$tabbox = _query2.default.render(this.tplTabbox, {}); + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = this.logList[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var item = _step.value; + + this.printLog(item); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + this.logList = []; + } + + /** + * this event will make this plugin be registered as a tab + * @public + */ + + }, { + key: 'onRenderTab', + value: function onRenderTab(callback) { + callback(this.$tabbox); + } + + /** + * after init + * @public + */ + + }, { + key: 'onFinishInit', + value: function onFinishInit() { + + _query2.default.bind(_query2.default.one('.vc-log', this.$tabbox), 'click', function (e) { + var target = e.target; + // expand a line + if (_query2.default.hasClass(target, 'vc-fold-outer')) { + if (_query2.default.hasClass(target.parentElement, 'vc-toggle')) { + _query2.default.removeClass(target.parentElement, 'vc-toggle'); + } else { + _query2.default.addClass(target.parentElement, 'vc-toggle'); + } + e.preventDefault(); + } + }); + } + + /** + * replace window.console & window.onerror with vConsole method + * @private + */ + + }, { + key: 'mokeConsole', + value: function mokeConsole() { + if (!window.console) { + return; + } + var that = this; + this.console.log = window.console.log; + this.console.info = window.console.info; + this.console.warn = window.console.warn; + this.console.debug = window.console.debug; + this.console.error = window.console.error; + window.console.log = function () { + that.printLog({ logType: 'log', logs: arguments }); + }; + window.console.info = function () { + that.printLog({ logType: 'info', logs: arguments }); + }; + window.console.warn = function () { + that.printLog({ logType: 'warn', logs: arguments }); + }; + window.console.debug = function () { + that.printLog({ logType: 'debug', logs: arguments }); + }; + window.console.error = function () { + that.printLog({ logType: 'error', logs: arguments }); + }; + + window.onerror = function (message, source, lineNo, colNo, error) { + var stack = error.stack.split('at'); + stack = stack[0] + ' ' + stack[1]; + stack = stack.replace(location.origin, ''); + console.error(stack); + }; + } + + /** + * print log to origin console + * @protected + */ + + }, { + key: 'printOriginLog', + value: function printOriginLog(item) { + this.console[item.logType].apply(window.console, item.logs); + } + + /** + * print a log to log box + * @protected + * @param string tabName auto|default|system + * @param string logType log|info|debug|error|warn + * @param array logs + */ + + }, { + key: 'printLog', + value: function printLog(item) { + var logs = item.logs; + if (!logs.length) { + return; + } + + // convert logs to an array + logs = [].slice.call(logs); + + // check `[default]` format + var shouldBeHere = true; + var pattern = /^\[(\w+)\] ?/i; + var targetTabName = ''; + if (tool.isString(logs[0])) { + var match = logs[0].match(pattern); + if (match !== null && match.length > 0) { + targetTabName = match[1].toLowerCase(); + } + } + if (targetTabName) { + shouldBeHere = targetTabName == this.id; + } else if (this.allowUnformattedLog == false) { + shouldBeHere = false; + } + + if (!shouldBeHere) { + // ignore this log and throw it to origin console + this.printOriginLog(item); + return; + } + + // save log date + if (!item.date) { + item.date = +new Date(); + } + + // if vConsole is not ready, save current log to logList + if (!this.isReady) { + this.logList.push(item); + return; + } + + // remove `[xxx]` format + if (tool.isString(logs[0])) { + logs[0] = logs[0].replace(pattern, ''); + if (logs[0] === '') { + logs.shift(); + } + } + + // generate plain text for a line + var line = ''; + for (var i = 0; i < logs.length; i++) { + try { + if (logs[i] === '') { + // ignore empty string + continue; + } else if (tool.isFunction(logs[i])) { + // convert function to string + line += ' ' + logs[i].toString(); + } else if (tool.isObject(logs[i]) || tool.isArray(logs[i])) { + // object or array + line += ' ' + this.getFoldedLine(logs[i]); + } else { + // default + line += ' ' + tool.htmlEncode(logs[i]).replace(/\n/g, '
'); + } + } catch (e) { + line += ' [' + _typeof(logs[i]) + ']'; + } + } + + // render + var date = tool.getDate(item.date); + this.renderLog({ + logType: item.logType, + content: line, + meta: date.hour + ':' + date.minute + ':' + date.second + }); + + // print log to origin console + this.printOriginLog(item); + } + + /** + * render a log + * @protected + */ + + }, { + key: 'renderLog', + value: function renderLog(item) { + var $item = _query2.default.render(_item2.default, item); + _query2.default.one('.vc-log', this.$tabbox).appendChild($item); + _query2.default.one('.vc-content').scrollTop = _query2.default.one('.vc-content').scrollHeight; + } + + /** + * generate the HTML of a folded line + * @protected + */ + + }, { + key: 'getFoldedLine', + value: function getFoldedLine(obj) { + var json = tool.JSONStringify(obj); + var outer = '', + inner = '', + preview = ''; + var lv = 0, + p = ' '; + + preview = json.substr(0, 26); + if (json.length > 26) { + preview += '...'; + } + + outer = Object.prototype.toString.call(obj).replace('[object ', '').replace(']', ''); + outer += ' ' + preview; + + // use a map to track whether a value has been iterated in previous level + var objMap = []; + function _isIteratedInPreLevel(val, curLV) { + var is = false; + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = objMap[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var item = _step2.value; + + if (item.obj == val && item.lv < curLV) { + is = true; + break; + } + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + + return is; + } + + function _iterateObj(val) { + if (tool.isObject(val)) { + // object + if (_isIteratedInPreLevel(val, lv)) { + // this object is circular, skip it + inner += "{Circular Object}"; + return; + } + objMap.push({ obj: val, lv: lv }); + + var keys = Object.keys(val); + inner += "{\n"; + lv++; + for (var i = 0; i < keys.length; i++) { + var k = keys[i]; + if (!val.hasOwnProperty(k)) { + continue; + } + inner += Array(lv + 1).join(p) + _query2.default.render(_item_fold_code2.default, { type: 'key', code: k }, true) + ': '; + _iterateObj(val[k]); + if (i < keys.length - 1) { + inner += ",\n"; + } + } + lv--; + inner += "\n" + Array(lv + 1).join(p) + "}"; + } else if (tool.isArray(val)) { + // array + inner += "[\n"; + lv++; + for (var _i = 0; _i < val.length; _i++) { + inner += Array(lv + 1).join(p) + _query2.default.render(_item_fold_code2.default, { type: 'key', code: _i }, true) + ': '; + _iterateObj(val[_i]); + if (_i < val.length - 1) { + inner += ",\n"; + } + } + lv--; + inner += "\n" + Array(lv + 1).join(p) + "]"; + } else if (tool.isString(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'string', code: '"' + tool.htmlEncode(val) + '"' }, true); + } else if (tool.isNumber(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'number', code: val }, true); + } else if (tool.isBoolean(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'boolean', code: val }, true); + } else if (tool.isNull(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'null', code: 'null' }, true); + } else if (tool.isUndefined(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'undefined', code: 'undefined' }, true); + } else if (tool.isFunction(val)) { + inner += _query2.default.render(_item_fold_code2.default, { type: 'function', code: 'function()' }, true); + } else { + inner += JSON.stringify(val); + } + } + _iterateObj(obj); + + var line = _query2.default.render(_item_fold2.default, { outer: outer, inner: inner }, true); + return line; + } + }]); + + return VConsoleLogTab; + }(_plugin2.default); // END class + + exports.default = VConsoleLogTab; + module.exports = exports['default']; + +/***/ }, +/* 19 */ +/***/ function(module, exports) { + + module.exports = "
\n\t{meta}\n\t
{content}
\n
"; + +/***/ }, +/* 20 */ +/***/ function(module, exports) { + + module.exports = "
\n
\n
\n \n
\n \t\n\t
\n
\n
"; + +/***/ }, +/* 21 */ +/***/ function(module, exports, __webpack_require__) { + + '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; }; }(); + + var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } }; + + var _tool = __webpack_require__(2); + + var tool = _interopRequireWildcard(_tool); + + var _log = __webpack_require__(18); + + var _log2 = _interopRequireDefault(_log); + + var _tabbox_system = __webpack_require__(22); + + var _tabbox_system2 = _interopRequireDefault(_tabbox_system); + + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + + function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** + * vConsole System Tab + * + * @author WechatFE + */ + + var VConsoleDefaultTab = function (_VConsoleLogTab) { + _inherits(VConsoleDefaultTab, _VConsoleLogTab); + + function VConsoleDefaultTab() { + var _Object$getPrototypeO; + + _classCallCheck(this, VConsoleDefaultTab); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(VConsoleDefaultTab)).call.apply(_Object$getPrototypeO, [this].concat(args))); + + _this.tplTabbox = _tabbox_system2.default; + _this.allowUnformattedLog = false; // only logs begin with `[system]` can be displayed + return _this; + } + + _createClass(VConsoleDefaultTab, [{ + key: 'onInit', + value: function onInit() { + _get(Object.getPrototypeOf(VConsoleDefaultTab.prototype), 'onInit', this).call(this); + this.printSystemInfo(); + } + }, { + key: 'printSystemInfo', + value: function printSystemInfo() { + // print system info + var ua = navigator.userAgent, + logMsg = ''; + + // current time + var d = tool.getDate(); + console.info('[system]', 'Now:', d.year + '-' + d.month + '-' + d.day + ' ' + d.hour + ':' + d.minute + ':' + d.second + '.' + d.millisecond); + + // device & system + logMsg = 'Unknown'; + var ipod = ua.match(/(ipod).*\s([\d_]+)/i), + ipad = ua.match(/(ipad).*\s([\d_]+)/i), + iphone = ua.match(/(iphone)\sos\s([\d_]+)/i), + android = ua.match(/(android)\s([\d\.]+)/i); + if (android) { + logMsg = 'Android ' + android[2]; + } else if (iphone) { + logMsg = 'iPhone, iOS ' + iphone[2].replace(/_/g, '.'); + } else if (ipad) { + logMsg = 'iPad, iOS ' + ipad[2].replace(/_/g, '.'); + } else if (ipod) { + logMsg = 'iPod, iOS ' + ipod[2].replace(/_/g, '.'); + } + console.info('[system]', 'System:', logMsg); + + // wechat app version + var version = ua.match(/MicroMessenger\/([\d\.]+)/i); + logMsg = 'Unknown'; + if (version && version[1]) { + logMsg = version[1]; + console.info('[system]', 'WeChat:', logMsg); + } + + // network type + var network = ua.toLowerCase().match(/ nettype\/([^ ]+)/g); + logMsg = 'Unknown'; + if (network && network[0]) { + network = network[0].split('/'); + logMsg = network[1]; + console.info('[system]', 'Network:', logMsg); + } + + // HTTP protocol + logMsg = 'Unknown'; + if (location.protocol == 'https:') { + logMsg = 'HTTPS'; + } else if (location.protocol == 'http:') { + logMsg = 'HTTP'; + } else { + logMsg = location.protocol.replace(':', ''); + } + console.info('[system]', 'Protocol:', logMsg); + + // performance related + var performance = window.performance || window.msPerformance || window.webkitPerformance; + + // timing + if (performance && performance.timing) { + var t = performance.timing, + start = t.navigationStart; + // console.info('[system]', 'debug', 'domainLookupEnd:', (t.domainLookupEnd - start)+'ms'); + console.info('[system]', 'connectEndTime:', t.connectEnd - start + 'ms'); + console.info('[system]', 'responseEndTime:', t.responseEnd - start + 'ms'); + // console.info('[system]', 'domComplete:', (t.domComplete - start)+'ms'); + // console.info('[system]', 'beforeReqTime:', (t.requestStart - start)+'ms'); + if (t.secureConnectionStart > 0) { + console.info('[system]', 'SSL Cost:', t.connectEnd - t.secureConnectionStart + 'ms'); + } + // console.info('system', 'req&RespTime:', (t.responseEnd - t.requestStart)+'ms'); + console.info('[system]', 'DomRenderCost:', t.domComplete - t.domLoading + 'ms'); + } + + // User Agent + console.info('[system]', 'UA:', ua); + } + }]); + + return VConsoleDefaultTab; + }(_log2.default); // END class + + var tab = new VConsoleDefaultTab('system', 'System'); + + exports.default = tab; + module.exports = exports['default']; + +/***/ }, +/* 22 */ +/***/ function(module, exports) { + + module.exports = "
\n
\n
"; + +/***/ }, +/* 23 */ +/***/ function(module, exports) { + + module.exports = "
\n\t{outer}\n\t
{inner}
\n
"; + +/***/ }, +/* 24 */ +/***/ function(module, exports) { + + module.exports = "{code}"; + +/***/ }, +/* 25 */ +/***/ function(module, exports) { + + module.exports = "
{content}
"; /***/ } /******/ ]) diff --git a/example/demo1.html b/example/demo1.html index fbd0e1ba..b0aa9165 100644 --- a/example/demo1.html +++ b/example/demo1.html @@ -43,10 +43,16 @@

Demo 1

showTips(); }); $('.js_btn_log_obj').on('tap', function(e) { - console.log({ + var obj = { 'foo': 'bar', - 'tips': 'JS对象会转为JSON字符串输出' - }); + 'tips': 'JS对象会转为JSON字符串输出', + 'a': function() {}, + 'b': null, + c: true, + d: undefined, + e: 2 + }; + console.log(obj); showTips(); }); $('.js_btn_trigger_error').on('tap', function(e) { diff --git a/src/core/core.less b/src/core/core.less index aa65f888..bbe73675 100644 --- a/src/core/core.less +++ b/src/core/core.less @@ -147,6 +147,18 @@ } + .vc-item.vc-item-nometa { + + .vc-item-content { + margin-right: 0; + } + + .vc-item-meta { + display: none; + } + + } + .vc-item .vc-item-code { display: block; white-space: pre-wrap; @@ -172,7 +184,6 @@ .vc-item .vc-fold { display: block; - max-height: 300px; overflow: scroll; -webkit-overflow-scrolling: touch; @@ -203,6 +214,7 @@ .vc-fold-inner { display: none; white-space: pre-wrap; + max-height: 250px; } } @@ -223,12 +235,21 @@ .vc-code-key { color: #905; } - .vc-code-number { + .vc-code-function { + color: #905; + font-style: italic; + } + .vc-code-number, + .vc-code-boolean { color: #0086B3; } .vc-code-string { color: #183691; } + .vc-code-null, + .vc-code-undefined { + color: #666; + } .vc-cmd { position: absolute; diff --git a/src/lib/tool.js b/src/lib/tool.js index 8ea37a46..0ddf4223 100644 --- a/src/lib/tool.js +++ b/src/lib/tool.js @@ -45,8 +45,25 @@ export function isString(value) { export function isArray(value) { return Object.prototype.toString.call(value) == '[object Array]'; } +export function isBoolean(value) { + return Object.prototype.toString.call(value) == '[object Boolean]'; +} +export function isUndefined(value) { + return Object.prototype.toString.call(value) == '[object Undefined]'; +} +export function isNull(value) { + return Object.prototype.toString.call(value) == '[object Null]'; +} +export function isSymbol(value) { + return Object.prototype.toString.call(value) == '[object Symbol]'; +} export function isObject(value) { - return Object.prototype.toString.call(value) == '[object Object]'; + let is = ( + Object.prototype.toString.call(value) == '[object Object]' + || + (value !== null && typeof value == 'object') + ); + return is; } export function isFunction(value) { return Object.prototype.toString.call(value) == '[object Function]'; @@ -61,6 +78,85 @@ export function htmlEncode(text) { return document.createElement('a').appendChild( document.createTextNode(text) ).parentNode.innerHTML; } +/** + * JSON stringify, support circular structure + */ +export function JSONStringify(obj) { + let json = '', + lv = 0; + + // use a map to track whether a value has been iterated in previous level + let objMap = []; + function _isIteratedInPreLevel(val, curLV) { + let is = false; + for (let item of objMap) { + if (item.obj == val && item.lv < curLV) { + is = true; + break; + } + } + return is; + } + + function _iterateObj(val) { + if (isObject(val)) { + // object + if (_isIteratedInPreLevel(val, lv)) { + // this object is circular, skip it + json += "{Circular Object}"; + return; + } + objMap.push({obj: val, lv: lv}); + + let keys = Object.keys(val); + json += "{"; + lv++; + for (let i=0; i +
{meta}
{content}
\ No newline at end of file diff --git a/src/log/log.js b/src/log/log.js index 9d7edd7f..8dc59b94 100644 --- a/src/log/log.js +++ b/src/log/log.js @@ -132,15 +132,18 @@ class VConsoleLogTab extends VConsolePlugin { // check `[default]` format let shouldBeHere = true; let pattern = /^\[(\w+)\] ?/i; + let targetTabName = ''; if (tool.isString(logs[0])) { let match = logs[0].match(pattern); if (match !== null && match.length > 0) { - let tabName = match[1].toLowerCase(); - shouldBeHere = (tabName == this.id); - } else if (this.allowUnformattedLog == false) { - shouldBeHere = false; + targetTabName = match[1].toLowerCase(); } } + if (targetTabName) { + shouldBeHere = (targetTabName == this.id); + } else if (this.allowUnformattedLog == false) { + shouldBeHere = false; + } if (!shouldBeHere) { // ignore this log and throw it to origin console @@ -171,7 +174,7 @@ class VConsoleLogTab extends VConsolePlugin { let line = ''; for (let i=0; i