├── .gitignore
├── LICENSE
├── README.md
├── build
    ├── README.md
    ├── build.js
    └── package.json
├── images
    ├── close.png
    └── open.png
├── package.json
├── src
    ├── css
    │   └── style.css
    ├── index.html
    ├── main.js
    └── utils
    │   ├── dom.js
    │   ├── drag.js
    │   ├── fetch.js
    │   ├── type.js
    │   └── xhr.js
├── tests
    ├── index.html
    └── simple.html
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | logs
 5 | *.log
 6 | npm-debug.log*
 7 | .idea
 8 | build
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | 
15 | # Directory for instrumented libs generated by jscoverage/JSCover
16 | lib-cov
17 | 
18 | # Coverage directory used by tools like istanbul
19 | coverage
20 | 
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 | 
24 | # node-waf configuration
25 | .lock-wscript
26 | 
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 | 
30 | # Dependency directories
31 | node_modules
32 | jspm_packages
33 | 
34 | # Optional npm cache directory
35 | .npm
36 | 
37 | # Optional REPL history
38 | .node_repl_history
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 DuJia
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # a better console tool https://github.com/Tencent/vConsole
 2 | 
 3 | # console.js
 4 | 
 5 | [![npm version](https://img.shields.io/npm/v/mobile-console.js.svg?style=flat-square)](https://www.npmjs.com/package/mobile-console.js)
 6 | [![npm downloads](https://img.shields.io/npm/dt/mobile-console.js.svg?style=flat-square)](https://www.npmjs.com/package/mobile-console.js)
 7 | 
 8 | a console panel for mobile phone, replace alert.
 9 | https://www.npmjs.com/package/mobile-console.js
10 | 
11 | Preview
12 | -------
13 | 
14 | ### close status
15 | <div align="center">
16 |     <img src="images/close.png" />
17 | </div>
18 | 
19 | ### open status
20 | <div align="center">
21 |     <img src="images/open.png" />
22 | </div>
23 | 
24 | ### build
25 | 
26 | ``` bash
27 | npm run build
28 | ```
29 | 
30 | ### install
31 | 
32 | ``` bash
33 | npm i mobile-console.js --save-dev
34 | ```
35 | 
36 | ### ES6
37 | 
38 | ```
39 | import 'mobile-console.js';
40 | new MobileConsole();
41 | ```
42 | 
43 | ### demo
44 | 
45 | open `tests/index.html`
46 | 
47 | ### feature
48 | 
49 | - support to show console.log api output. (info, warn, error, debug)
50 | - support to show js error.
51 | - support to show xhr and fetch's request and response information. (default off)
52 | 


--------------------------------------------------------------------------------
/build/README.md:
--------------------------------------------------------------------------------
 1 | # console.js
 2 | 
 3 | a console panel for mobile phone, replace alert.
 4 | https://www.npmjs.com/package/mobile-console.js
 5 | 
 6 | Preview
 7 | -------
 8 | 
 9 | ### close status
10 | <div align="center">
11 |     <img src="images/close.png" />
12 | </div>
13 | 
14 | ### open status
15 | <div align="center">
16 |     <img src="images/open.png" />
17 | </div>
18 | 
19 | ### Build
20 | 
21 | ``` bash
22 | npm run build
23 | ```
24 | 
25 | ### Install
26 | 
27 | ``` bash
28 | npm i mobile-console.js --save-dev
29 | ```
30 | 
31 | ### ES6
32 | 
33 | ```
34 | import 'mobile-console.js';
35 | new MobileConsole();
36 | ```
37 | 
38 | ### Demo
39 | 
40 | open `tests/index.html`
41 | 
42 | ### Feature
43 | 
44 | - Support showing console.log api output. (info, warn, error, debug)
45 | - Support showing js error.
46 | - Support showing xhr and fetch's request and response info. (default off)
47 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
  1 | /******/ (function(modules) { // webpackBootstrap
  2 | /******/ 	// The module cache
  3 | /******/ 	var installedModules = {};
  4 | 
  5 | /******/ 	// The require function
  6 | /******/ 	function __webpack_require__(moduleId) {
  7 | 
  8 | /******/ 		// Check if module is in cache
  9 | /******/ 		if(installedModules[moduleId])
 10 | /******/ 			return installedModules[moduleId].exports;
 11 | 
 12 | /******/ 		// Create a new module (and put it into the cache)
 13 | /******/ 		var module = installedModules[moduleId] = {
 14 | /******/ 			exports: {},
 15 | /******/ 			id: moduleId,
 16 | /******/ 			loaded: false
 17 | /******/ 		};
 18 | 
 19 | /******/ 		// Execute the module function
 20 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 21 | 
 22 | /******/ 		// Flag the module as loaded
 23 | /******/ 		module.loaded = true;
 24 | 
 25 | /******/ 		// Return the exports of the module
 26 | /******/ 		return module.exports;
 27 | /******/ 	}
 28 | 
 29 | 
 30 | /******/ 	// expose the modules object (__webpack_modules__)
 31 | /******/ 	__webpack_require__.m = modules;
 32 | 
 33 | /******/ 	// expose the module cache
 34 | /******/ 	__webpack_require__.c = installedModules;
 35 | 
 36 | /******/ 	// __webpack_public_path__
 37 | /******/ 	__webpack_require__.p = "";
 38 | 
 39 | /******/ 	// Load entry module and return exports
 40 | /******/ 	return __webpack_require__(0);
 41 | /******/ })
 42 | /************************************************************************/
 43 | /******/ ([
 44 | /* 0 */
 45 | /***/ (function(module, exports, __webpack_require__) {
 46 | 
 47 | 	'use strict';
 48 | 
 49 | 	Object.defineProperty(exports, "__esModule", {
 50 | 	    value: true
 51 | 	});
 52 | 
 53 | 	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; }; }();
 54 | 
 55 | 	__webpack_require__(1);
 56 | 
 57 | 	var _index = __webpack_require__(5);
 58 | 
 59 | 	var _index2 = _interopRequireDefault(_index);
 60 | 
 61 | 	var _dom = __webpack_require__(6);
 62 | 
 63 | 	var _dom2 = _interopRequireDefault(_dom);
 64 | 
 65 | 	var _drag = __webpack_require__(7);
 66 | 
 67 | 	var _drag2 = _interopRequireDefault(_drag);
 68 | 
 69 | 	var _xhr = __webpack_require__(8);
 70 | 
 71 | 	var _xhr2 = _interopRequireDefault(_xhr);
 72 | 
 73 | 	var _fetch = __webpack_require__(9);
 74 | 
 75 | 	var _fetch2 = _interopRequireDefault(_fetch);
 76 | 
 77 | 	var _type = __webpack_require__(10);
 78 | 
 79 | 	var _type2 = _interopRequireDefault(_type);
 80 | 
 81 | 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 82 | 
 83 | 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 84 | 
 85 | 	var logBoxSelector = '.-c-content';
 86 | 	var switchBtnSelector = '.-c-switch';
 87 | 	var toolBarSelector = '.-c-toolbar';
 88 | 	var clearClass = '-c-clear';
 89 | 	var hideClass = '-c-hide';
 90 | 	var ajaxClass = '-c-ajax';
 91 | 	var logItemClass = '-c-log';
 92 | 	var consoleMethods = ['debug', 'error', 'info', 'log', 'warn'];
 93 | 
 94 | 	var Console = function () {
 95 | 	    function Console() {
 96 | 	        _classCallCheck(this, Console);
 97 | 
 98 | 	        this.render();
 99 | 	        this.prepareProperty();
100 | 	        this.bindEvent();
101 | 	        this.catchAjax();
102 | 	        this.core();
103 | 	    }
104 | 
105 | 	    _createClass(Console, [{
106 | 	        key: 'render',
107 | 	        value: function render() {
108 | 	            var ele = _dom2.default.createElement('div', null, _index2.default);
109 | 	            _dom2.default.append(_dom2.default.$('body'), ele);
110 | 	        }
111 | 	    }, {
112 | 	        key: 'prepareProperty',
113 | 	        value: function prepareProperty() {
114 | 	            this.ajaxEnable = false;
115 | 	            this.switchBtn = _dom2.default.$(switchBtnSelector);
116 | 	            // 设置 Switch Button 初始位置, 并使其可以 Drag
117 | 	            this.switchBtn.style.left = document.documentElement.clientWidth - this.switchBtn.offsetWidth - 10 + "px";
118 | 	            this.switchBtn.style.top = document.documentElement.clientHeight - this.switchBtn.offsetHeight - 10 + "px";
119 | 	            (0, _drag2.default)(this.switchBtn);
120 | 	            this.toolBar = _dom2.default.$(toolBarSelector);
121 | 	            this.logBox = _dom2.default.$(logBoxSelector);
122 | 	        }
123 | 	    }, {
124 | 	        key: 'bindEvent',
125 | 	        value: function bindEvent() {
126 | 	            var _this2 = this;
127 | 
128 | 	            this.toolBar.addEventListener('click', function (e) {
129 | 	                var target = e.target;
130 | 	                if (target.classList.contains(clearClass)) {
131 | 	                    _dom2.default.html(_this2.logBox, '');
132 | 	                } else if (target.classList.contains(hideClass)) {
133 | 	                    _dom2.default.hide(_this2.logBox, _this2.toolBar).show(_this2.switchBtn);
134 | 	                }
135 | 	                if (target.classList.contains(ajaxClass)) {
136 | 	                    _this2.ajaxEnable = !_this2.ajaxEnable;
137 | 	                    if (_this2.ajaxEnable) {
138 | 	                        target.innerText = 'AJAX(ON)';
139 | 	                    } else {
140 | 	                        target.innerText = 'AJAX(OFF)';
141 | 	                    }
142 | 	                }
143 | 	            });
144 | 
145 | 	            this.switchBtn.addEventListener('click', function () {
146 | 	                _dom2.default.hide(_this2.switchBtn).show(_this2.logBox, _this2.toolBar);
147 | 	            });
148 | 
149 | 	            // 捕获页面错误
150 | 	            var _onerror = window.onerror || function noop() {};
151 | 
152 | 	            window.onerror = function (msg, url, lineNo, columnNo, error) {
153 | 	                _onerror();
154 | 	                var message = ['Message: ' + msg, 'URL: ' + url, 'Line: ' + lineNo, 'Column: ' + columnNo, 'Error object: ' + error].join(' <br/> ');
155 | 
156 | 	                _this2.pushLog([message], 'Exception');
157 | 	            };
158 | 	        }
159 | 	    }, {
160 | 	        key: 'catchAjax',
161 | 	        value: function catchAjax() {
162 | 	            // 捕获 xhr 错误
163 | 	            // TODO 添加 REQUEST BODY 和 RESPONSE DATA
164 | 	            var _this = this;
165 | 	            _xhr2.default.fn = function (xhr) {
166 | 	                if (!_this.ajaxEnable) return;
167 | 	                if (xhr.readyState === XMLHttpRequest.DONE) {
168 | 	                    if (xhr.status >= 200 && xhr.status <= 299) {
169 | 	                        _this.pushLog(['[AJAX] ' + xhr.open_fn_parmas.method + ' ' + xhr.open_fn_parmas.url + ' ' + xhr.status + ' (' + xhr.statusText + ')'], 'AJAXSUCCESS');
170 | 	                        xhr.send_fn_params.data && _this.pushLog(['[REQUEST BODY] ' + xhr.send_fn_params.data], 'AJAXSUCCESS');
171 | 	                        xhr.responseText && _this.pushLog(['[RESPONSE DATA] ' + xhr.responseText], 'AJAXSUCCESS');
172 | 	                    } else {
173 | 	                        _this.pushLog(['[AJAX] ' + xhr.open_fn_parmas.method + ' ' + xhr.open_fn_parmas.url + ' ' + xhr.status + ' (' + xhr.statusText + ')'], 'AJAXFAILURE');
174 | 	                        xhr.send_fn_params.data && _this.pushLog(['[REQUEST BODY] ' + xhr.send_fn_params.data], 'AJAXFAILURE');
175 | 	                        xhr.responseText && _this.pushLog(['[RESPONSE DATA] ' + xhr.responseText], 'AJAXFAILURE');
176 | 	                    }
177 | 	                }
178 | 	            };
179 | 
180 | 	            window.XMLHttpRequest = _xhr2.default;
181 | 	            // 捕获 fetch 错误
182 | 	            var unregister = _fetch2.default.register({
183 | 	                response: function response(_ref) {
184 | 	                    var request = _ref.request,
185 | 	                        _response = _ref.response;
186 | 
187 | 	                    if (_this.ajaxEnable) {
188 | 	                        if (_response.status >= 200 && _response.status <= 299) {
189 | 	                            _this.pushFetchLog(request, _response, 'AJAXSUCCESS');
190 | 	                        } else {
191 | 	                            _this.pushFetchLog(request, _response, 'AJAXFAILURE');
192 | 	                        }
193 | 	                    }
194 | 	                    return _response;
195 | 	                },
196 | 	                responseError: function responseError(_ref2) {
197 | 	                    var request = _ref2.request,
198 | 	                        _responseError = _ref2.responseError;
199 | 
200 | 	                    // TODO 待确定
201 | 	                    if (_this.ajaxEnable) {
202 | 	                        _this.pushLog(['[AJAX] ' + request.method + ' ' + request.url + ' ' + _responseError.status + ' (' + _responseError.statusText + ')'], 'AJAXFAILURE');
203 | 	                    }
204 | 	                    return Promise.reject(_responseError);
205 | 	                }
206 | 	            });
207 | 	        }
208 | 	    }, {
209 | 	        key: 'pushFetchLog',
210 | 	        value: function pushFetchLog(request, response, type) {
211 | 	            var _this3 = this;
212 | 
213 | 	            try {
214 | 	                request = request.clone();
215 | 	                response = response.clone();
216 | 	                Promise.all([request.text(), response.text()]).then(function (data) {
217 | 	                    _this3.pushLog(['[AJAX] ' + request.method + ' ' + request.url + ' ' + response.status + ' (' + response.statusText + ')'], type);
218 | 	                    data[0] && _this3.pushLog(['[REQUEST BODY] ' + data[0]], type);
219 | 	                    data[1] && _this3.pushLog(['[RESPONSE DATA] ' + data[1]], type);
220 | 	                }).catch(function (err) {
221 | 	                    _this3.pushLog(['[AJAX] ' + request.method + ' ' + request.url + ' ' + response.status + ' (' + response.statusText + ')'], type);
222 | 	                });
223 | 	            } catch (err) {
224 | 	                this.pushLog(['[AJAX] ' + request.method + ' ' + request.url + ' ' + response.status + ' (' + response.statusText + ')'], type);
225 | 	            }
226 | 	        }
227 | 	    }, {
228 | 	        key: 'pushLog',
229 | 	        value: function pushLog(msg, type) {
230 | 	            var text = msg.map(function (val) {
231 | 	                return (0, _type2.default)(val) ? '' + val.stack : JSON.stringify(val);
232 | 	            }).join(' '),
233 | 	                log = _dom2.default.createElement('div', { class: logItemClass + ' ' + type }, text);
234 | 	            _dom2.default.append(this.logBox, log);
235 | 	            this.logBox.scrollTop = this.logBox.scrollHeight;
236 | 	        }
237 | 	    }, {
238 | 	        key: 'core',
239 | 	        value: function core() {
240 | 	            var _this4 = this;
241 | 
242 | 	            consoleMethods.forEach(function (method) {
243 | 	                var original = window.console[method];
244 | 	                window.console[method] = function () {
245 | 	                    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
246 | 	                        args[_key] = arguments[_key];
247 | 	                    }
248 | 
249 | 	                    _this4.pushLog(args, method);
250 | 	                    original.apply(console, args);
251 | 	                };
252 | 	            });
253 | 	        }
254 | 	    }]);
255 | 
256 | 	    return Console;
257 | 	}();
258 | 
259 | 	exports.default = Console;
260 | 
261 | 
262 | 	window.MobileConsole = Console;
263 | 
264 | /***/ }),
265 | /* 1 */
266 | /***/ (function(module, exports, __webpack_require__) {
267 | 
268 | 	// style-loader: Adds some css to the DOM by adding a <style> tag
269 | 
270 | 	// load the styles
271 | 	var content = __webpack_require__(2);
272 | 	if(typeof content === 'string') content = [[module.id, content, '']];
273 | 	// add the styles to the DOM
274 | 	var update = __webpack_require__(4)(content, {});
275 | 	if(content.locals) module.exports = content.locals;
276 | 	// Hot Module Replacement
277 | 	if(false) {
278 | 		// When the styles change, update the <style> tags
279 | 		if(!content.locals) {
280 | 			module.hot.accept("!!../../node_modules/css-loader/index.js!./style.css", function() {
281 | 				var newContent = require("!!../../node_modules/css-loader/index.js!./style.css");
282 | 				if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
283 | 				update(newContent);
284 | 			});
285 | 		}
286 | 		// When the module is disposed, remove the <style> tags
287 | 		module.hot.dispose(function() { update(); });
288 | 	}
289 | 
290 | /***/ }),
291 | /* 2 */
292 | /***/ (function(module, exports, __webpack_require__) {
293 | 
294 | 	exports = module.exports = __webpack_require__(3)();
295 | 	// imports
296 | 
297 | 
298 | 	// module
299 | 	exports.push([module.id, "#__console{\n    position: relative;\n    z-index: 2147483647;\n}\n\n#__console .debug {\n    color: #465ed1;\n}\n\n#__console .error {\n    color: #465ed1;\n    background: #ffe6e3;\n}\n\n#__console .Exception {\n    color: #d10a0d;\n    background: #ffe6e3;\n}\n\n#__console .AJAXSUCCESS {\n    color: #20d10d;\n    background: #ddffc8;\n}\n\n#__console .AJAXFAILURE {\n    color: #d10a0d;\n    background: #ffe6e3;\n}\n\n#__console .info {\n    color: #465ed1;\n    background: #ffffff;\n}\n\n#__console .log {\n    color: #000000;\n    background: #ffffff;\n}\n\n#__console .warn {\n    color: #465ed1;\n    background: #fff7db;\n}\n\n.-c-switch{\n    display: block;\n    position: fixed;\n    border-radius: 4px;\n    box-shadow: 0 0 8px rgba( 0, 0, 0, .4);\n    padding: 8px 16px;\n    line-height: 1;\n    font-size: 14px;\n    color: #fff;\n    background-color: #04be02;\n}\n\n.-c-content{\n    display: none;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 40px;\n    border-top: 1px solid #eee;\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 50%;\n    background-color: #fff;\n    -webkit-overflow-scrolling: touch;\n}\n\n.-c-log{\n    margin: 0;\n    border-bottom: 1px solid #eee;\n    padding: 6px 8px;\n    overflow: hidden;\n    line-height: 1.3;\n    -webkit-user-select: text;\n    word-break: break-word;\n}\n\n.-c-toolbar{\n    display: none;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    line-height: 40px;\n    background-color: #fff;\n}\n\n.-c-tool{\n    position: relative;\n    float: left;\n    width: 33.33333%;\n    text-align: center;\n    text-decoration: none;\n    color: #000;\n}\n\n.-c-clear::before{\n    content: \"\";\n    position: absolute;\n    top: 7px;\n    bottom: 7px;\n    right: 0;\n    border-left: 1px solid #d9d9d9;\n}\n\n.-c-ajax::before{\n    content: \"\";\n    position: absolute;\n    top: 7px;\n    bottom: 7px;\n    right: 0;\n    border-left: 1px solid #d9d9d9;\n}", ""]);
300 | 
301 | 	// exports
302 | 
303 | 
304 | /***/ }),
305 | /* 3 */
306 | /***/ (function(module, exports) {
307 | 
308 | 	"use strict";
309 | 
310 | 	/*
311 | 		MIT License http://www.opensource.org/licenses/mit-license.php
312 | 		Author Tobias Koppers @sokra
313 | 	*/
314 | 	// css base code, injected by the css-loader
315 | 	module.exports = function () {
316 | 		var list = [];
317 | 
318 | 		// return the list of modules as css string
319 | 		list.toString = function toString() {
320 | 			var result = [];
321 | 			for (var i = 0; i < this.length; i++) {
322 | 				var item = this[i];
323 | 				if (item[2]) {
324 | 					result.push("@media " + item[2] + "{" + item[1] + "}");
325 | 				} else {
326 | 					result.push(item[1]);
327 | 				}
328 | 			}
329 | 			return result.join("");
330 | 		};
331 | 
332 | 		// import a list of modules into the list
333 | 		list.i = function (modules, mediaQuery) {
334 | 			if (typeof modules === "string") modules = [[null, modules, ""]];
335 | 			var alreadyImportedModules = {};
336 | 			for (var i = 0; i < this.length; i++) {
337 | 				var id = this[i][0];
338 | 				if (typeof id === "number") alreadyImportedModules[id] = true;
339 | 			}
340 | 			for (i = 0; i < modules.length; i++) {
341 | 				var item = modules[i];
342 | 				// skip already imported module
343 | 				// this implementation is not 100% perfect for weird media query combinations
344 | 				//  when a module is imported multiple times with different media queries.
345 | 				//  I hope this will never occur (Hey this way we have smaller bundles)
346 | 				if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
347 | 					if (mediaQuery && !item[2]) {
348 | 						item[2] = mediaQuery;
349 | 					} else if (mediaQuery) {
350 | 						item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
351 | 					}
352 | 					list.push(item);
353 | 				}
354 | 			}
355 | 		};
356 | 		return list;
357 | 	};
358 | 
359 | /***/ }),
360 | /* 4 */
361 | /***/ (function(module, exports, __webpack_require__) {
362 | 
363 | 	/*
364 | 		MIT License http://www.opensource.org/licenses/mit-license.php
365 | 		Author Tobias Koppers @sokra
366 | 	*/
367 | 	var stylesInDom = {},
368 | 		memoize = function(fn) {
369 | 			var memo;
370 | 			return function () {
371 | 				if (typeof memo === "undefined") memo = fn.apply(this, arguments);
372 | 				return memo;
373 | 			};
374 | 		},
375 | 		isOldIE = memoize(function() {
376 | 			return /msie [6-9]\b/.test(self.navigator.userAgent.toLowerCase());
377 | 		}),
378 | 		getHeadElement = memoize(function () {
379 | 			return document.head || document.getElementsByTagName("head")[0];
380 | 		}),
381 | 		singletonElement = null,
382 | 		singletonCounter = 0,
383 | 		styleElementsInsertedAtTop = [];
384 | 
385 | 	module.exports = function(list, options) {
386 | 		if(false) {
387 | 			if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
388 | 		}
389 | 
390 | 		options = options || {};
391 | 		// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
392 | 		// tags it will allow on a page
393 | 		if (typeof options.singleton === "undefined") options.singleton = isOldIE();
394 | 
395 | 		// By default, add <style> tags to the bottom of <head>.
396 | 		if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
397 | 
398 | 		var styles = listToStyles(list);
399 | 		addStylesToDom(styles, options);
400 | 
401 | 		return function update(newList) {
402 | 			var mayRemove = [];
403 | 			for(var i = 0; i < styles.length; i++) {
404 | 				var item = styles[i];
405 | 				var domStyle = stylesInDom[item.id];
406 | 				domStyle.refs--;
407 | 				mayRemove.push(domStyle);
408 | 			}
409 | 			if(newList) {
410 | 				var newStyles = listToStyles(newList);
411 | 				addStylesToDom(newStyles, options);
412 | 			}
413 | 			for(var i = 0; i < mayRemove.length; i++) {
414 | 				var domStyle = mayRemove[i];
415 | 				if(domStyle.refs === 0) {
416 | 					for(var j = 0; j < domStyle.parts.length; j++)
417 | 						domStyle.parts[j]();
418 | 					delete stylesInDom[domStyle.id];
419 | 				}
420 | 			}
421 | 		};
422 | 	}
423 | 
424 | 	function addStylesToDom(styles, options) {
425 | 		for(var i = 0; i < styles.length; i++) {
426 | 			var item = styles[i];
427 | 			var domStyle = stylesInDom[item.id];
428 | 			if(domStyle) {
429 | 				domStyle.refs++;
430 | 				for(var j = 0; j < domStyle.parts.length; j++) {
431 | 					domStyle.parts[j](item.parts[j]);
432 | 				}
433 | 				for(; j < item.parts.length; j++) {
434 | 					domStyle.parts.push(addStyle(item.parts[j], options));
435 | 				}
436 | 			} else {
437 | 				var parts = [];
438 | 				for(var j = 0; j < item.parts.length; j++) {
439 | 					parts.push(addStyle(item.parts[j], options));
440 | 				}
441 | 				stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
442 | 			}
443 | 		}
444 | 	}
445 | 
446 | 	function listToStyles(list) {
447 | 		var styles = [];
448 | 		var newStyles = {};
449 | 		for(var i = 0; i < list.length; i++) {
450 | 			var item = list[i];
451 | 			var id = item[0];
452 | 			var css = item[1];
453 | 			var media = item[2];
454 | 			var sourceMap = item[3];
455 | 			var part = {css: css, media: media, sourceMap: sourceMap};
456 | 			if(!newStyles[id])
457 | 				styles.push(newStyles[id] = {id: id, parts: [part]});
458 | 			else
459 | 				newStyles[id].parts.push(part);
460 | 		}
461 | 		return styles;
462 | 	}
463 | 
464 | 	function insertStyleElement(options, styleElement) {
465 | 		var head = getHeadElement();
466 | 		var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
467 | 		if (options.insertAt === "top") {
468 | 			if(!lastStyleElementInsertedAtTop) {
469 | 				head.insertBefore(styleElement, head.firstChild);
470 | 			} else if(lastStyleElementInsertedAtTop.nextSibling) {
471 | 				head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
472 | 			} else {
473 | 				head.appendChild(styleElement);
474 | 			}
475 | 			styleElementsInsertedAtTop.push(styleElement);
476 | 		} else if (options.insertAt === "bottom") {
477 | 			head.appendChild(styleElement);
478 | 		} else {
479 | 			throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
480 | 		}
481 | 	}
482 | 
483 | 	function removeStyleElement(styleElement) {
484 | 		styleElement.parentNode.removeChild(styleElement);
485 | 		var idx = styleElementsInsertedAtTop.indexOf(styleElement);
486 | 		if(idx >= 0) {
487 | 			styleElementsInsertedAtTop.splice(idx, 1);
488 | 		}
489 | 	}
490 | 
491 | 	function createStyleElement(options) {
492 | 		var styleElement = document.createElement("style");
493 | 		styleElement.type = "text/css";
494 | 		insertStyleElement(options, styleElement);
495 | 		return styleElement;
496 | 	}
497 | 
498 | 	function createLinkElement(options) {
499 | 		var linkElement = document.createElement("link");
500 | 		linkElement.rel = "stylesheet";
501 | 		insertStyleElement(options, linkElement);
502 | 		return linkElement;
503 | 	}
504 | 
505 | 	function addStyle(obj, options) {
506 | 		var styleElement, update, remove;
507 | 
508 | 		if (options.singleton) {
509 | 			var styleIndex = singletonCounter++;
510 | 			styleElement = singletonElement || (singletonElement = createStyleElement(options));
511 | 			update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
512 | 			remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
513 | 		} else if(obj.sourceMap &&
514 | 			typeof URL === "function" &&
515 | 			typeof URL.createObjectURL === "function" &&
516 | 			typeof URL.revokeObjectURL === "function" &&
517 | 			typeof Blob === "function" &&
518 | 			typeof btoa === "function") {
519 | 			styleElement = createLinkElement(options);
520 | 			update = updateLink.bind(null, styleElement);
521 | 			remove = function() {
522 | 				removeStyleElement(styleElement);
523 | 				if(styleElement.href)
524 | 					URL.revokeObjectURL(styleElement.href);
525 | 			};
526 | 		} else {
527 | 			styleElement = createStyleElement(options);
528 | 			update = applyToTag.bind(null, styleElement);
529 | 			remove = function() {
530 | 				removeStyleElement(styleElement);
531 | 			};
532 | 		}
533 | 
534 | 		update(obj);
535 | 
536 | 		return function updateStyle(newObj) {
537 | 			if(newObj) {
538 | 				if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
539 | 					return;
540 | 				update(obj = newObj);
541 | 			} else {
542 | 				remove();
543 | 			}
544 | 		};
545 | 	}
546 | 
547 | 	var replaceText = (function () {
548 | 		var textStore = [];
549 | 
550 | 		return function (index, replacement) {
551 | 			textStore[index] = replacement;
552 | 			return textStore.filter(Boolean).join('\n');
553 | 		};
554 | 	})();
555 | 
556 | 	function applyToSingletonTag(styleElement, index, remove, obj) {
557 | 		var css = remove ? "" : obj.css;
558 | 
559 | 		if (styleElement.styleSheet) {
560 | 			styleElement.styleSheet.cssText = replaceText(index, css);
561 | 		} else {
562 | 			var cssNode = document.createTextNode(css);
563 | 			var childNodes = styleElement.childNodes;
564 | 			if (childNodes[index]) styleElement.removeChild(childNodes[index]);
565 | 			if (childNodes.length) {
566 | 				styleElement.insertBefore(cssNode, childNodes[index]);
567 | 			} else {
568 | 				styleElement.appendChild(cssNode);
569 | 			}
570 | 		}
571 | 	}
572 | 
573 | 	function applyToTag(styleElement, obj) {
574 | 		var css = obj.css;
575 | 		var media = obj.media;
576 | 
577 | 		if(media) {
578 | 			styleElement.setAttribute("media", media)
579 | 		}
580 | 
581 | 		if(styleElement.styleSheet) {
582 | 			styleElement.styleSheet.cssText = css;
583 | 		} else {
584 | 			while(styleElement.firstChild) {
585 | 				styleElement.removeChild(styleElement.firstChild);
586 | 			}
587 | 			styleElement.appendChild(document.createTextNode(css));
588 | 		}
589 | 	}
590 | 
591 | 	function updateLink(linkElement, obj) {
592 | 		var css = obj.css;
593 | 		var sourceMap = obj.sourceMap;
594 | 
595 | 		if(sourceMap) {
596 | 			// http://stackoverflow.com/a/26603875
597 | 			css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
598 | 		}
599 | 
600 | 		var blob = new Blob([css], { type: "text/css" });
601 | 
602 | 		var oldSrc = linkElement.href;
603 | 
604 | 		linkElement.href = URL.createObjectURL(blob);
605 | 
606 | 		if(oldSrc)
607 | 			URL.revokeObjectURL(oldSrc);
608 | 	}
609 | 
610 | 
611 | /***/ }),
612 | /* 5 */
613 | /***/ (function(module, exports) {
614 | 
615 | 	module.exports = "<div id=\"__console\">\n    <div class=\"-c-switch\">Console</div>\n    <div class=\"-c-content\"></div>\n    <div class=\"-c-toolbar\">\n        <div class=\"-c-tool -c-clear\">Clear</div>\n        <div class=\"-c-tool -c-ajax\">AJAX(OFF)</div>\n        <div class=\"-c-tool -c-hide\">Hide</div>\n    </div>\n</div>\n";
616 | 
617 | /***/ }),
618 | /* 6 */
619 | /***/ (function(module, exports) {
620 | 
621 | 	'use strict';
622 | 
623 | 	Object.defineProperty(exports, "__esModule", {
624 | 	    value: true
625 | 	});
626 | 	exports.default = {
627 | 	    $: function $(selector) {
628 | 	        return document.querySelector(selector);
629 | 	    },
630 | 	    createElement: function createElement(tag, attrs, content) {
631 | 	        var el = document.createElement(tag),
632 | 	            i = void 0;
633 | 	        for (i in attrs) {
634 | 	            if (attrs.hasOwnProperty(i)) {
635 | 	                el.setAttribute(i, attrs[i]);
636 | 	            }
637 | 	        }
638 | 	        if (content) {
639 | 	            el.innerHTML = content;
640 | 	        }
641 | 	        return el;
642 | 	    },
643 | 	    show: function show() {
644 | 	        for (var _len = arguments.length, els = Array(_len), _key = 0; _key < _len; _key++) {
645 | 	            els[_key] = arguments[_key];
646 | 	        }
647 | 
648 | 	        els.forEach(function (el) {
649 | 	            el.style.display = 'block';
650 | 	        });
651 | 	        return this;
652 | 	    },
653 | 	    hide: function hide() {
654 | 	        for (var _len2 = arguments.length, els = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
655 | 	            els[_key2] = arguments[_key2];
656 | 	        }
657 | 
658 | 	        els.forEach(function (el) {
659 | 	            el.style.display = 'none';
660 | 	        });
661 | 	        return this;
662 | 	    },
663 | 	    append: function append(parent) {
664 | 	        for (var _len3 = arguments.length, els = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
665 | 	            els[_key3 - 1] = arguments[_key3];
666 | 	        }
667 | 
668 | 	        els.forEach(function (el) {
669 | 	            parent.appendChild(el);
670 | 	        });
671 | 	        return this;
672 | 	    },
673 | 	    html: function html(el, content) {
674 | 	        el.innerHTML = content;
675 | 	    }
676 | 	};
677 | 
678 | /***/ }),
679 | /* 7 */
680 | /***/ (function(module, exports) {
681 | 
682 | 	"use strict";
683 | 
684 | 	Object.defineProperty(exports, "__esModule", {
685 | 		value: true
686 | 	});
687 | 	exports.default = drag;
688 | 	function drag(obj) {
689 | 
690 | 		obj.ontouchstart = function (evt) {
691 | 
692 | 			var e = evt.targetTouches[0];
693 | 			var disX = e.clientX - this.offsetLeft;
694 | 			var disY = e.clientY - this.offsetTop;
695 | 
696 | 			var handleMove = function handleMove(evt) {
697 | 				evt.preventDefault();
698 | 				var e = evt.targetTouches[0];
699 | 
700 | 				var L = e.clientX - disX;
701 | 				var T = e.clientY - disY;
702 | 
703 | 				if (T < 0) {
704 | 					T = 0;
705 | 				} else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
706 | 					T = document.documentElement.clientHeight - obj.offsetHeight;
707 | 				}
708 | 
709 | 				if (L < 0) {
710 | 					L = 0;
711 | 				} else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
712 | 					L = document.documentElement.clientWidth - obj.offsetWidth;
713 | 				}
714 | 
715 | 				obj.style.left = L + "px";
716 | 				obj.style.top = T + "px";
717 | 			};
718 | 
719 | 			document.addEventListener("touchmove", handleMove, false);
720 | 
721 | 			var handleEnd = function handleEnd() {
722 | 				document.removeEventListener("touchmove", handleMove, false);
723 | 				document.removeEventListener("touchend", handleEnd, false);
724 | 			};
725 | 
726 | 			document.addEventListener("touchend", handleEnd, false);
727 | 		};
728 | 	}
729 | 
730 | /***/ }),
731 | /* 8 */
732 | /***/ (function(module, exports) {
733 | 
734 | 	'use strict';
735 | 
736 | 	Object.defineProperty(exports, "__esModule", {
737 | 		value: true
738 | 	});
739 | 	exports.default = ProxyXMLHttpRequest;
740 | 	var originXMLHttpRequest = window.XMLHttpRequest;
741 | 	var getOwnPropertyNames = Object.getOwnPropertyNames,
742 | 	    getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
743 | 
744 | 	/*
745 | 	* polyfill for Object.getOwnPropertyDescriptors 未考虑 symbol 属性
746 | 	* */
747 | 
748 | 	function getOwnPropertyDescriptors(obj) {
749 | 		var descs = {};
750 | 
751 | 		getOwnPropertyNames(obj).forEach(function (key) {
752 | 			descs[key] = getOwnPropertyDescriptor(obj, key);
753 | 		});
754 | 
755 | 		return descs;
756 | 	}
757 | 
758 | 	var propertyDescriptors = Object.getOwnPropertyDescriptors ? Object.getOwnPropertyDescriptors(originXMLHttpRequest) : getOwnPropertyDescriptors(originXMLHttpRequest);
759 | 
760 | 	function ProxyXMLHttpRequest() {
761 | 		var xhr = new originXMLHttpRequest();
762 | 
763 | 		xhr.onreadystatechange = function () {
764 | 			xhr.originOnreadystatechange && xhr.originOnreadystatechange();
765 | 			ProxyXMLHttpRequest.fn.call(null, xhr);
766 | 		};
767 | 
768 | 		Object.defineProperty(xhr, 'onreadystatechange', {
769 | 			set: function set(value) {
770 | 				xhr.originOnreadystatechange = value;
771 | 			}
772 | 		});
773 | 
774 | 		var originOpen = xhr.open.bind(xhr);
775 | 		var originSend = xhr.send.bind(xhr);
776 | 
777 | 		xhr.open = function (method, url, asynchronous, username, password) {
778 | 			xhr.open_fn_parmas = {
779 | 				method: method,
780 | 				url: url,
781 | 				asynchronous: asynchronous
782 | 			};
783 | 			originOpen(method, url, asynchronous, username, password);
784 | 		};
785 | 
786 | 		xhr.send = function (data) {
787 | 			xhr.send_fn_params = {
788 | 				data: data
789 | 			};
790 | 			originSend(data);
791 | 		};
792 | 
793 | 		return xhr;
794 | 	}
795 | 
796 | 	for (var key in propertyDescriptors) {
797 | 		Object.defineProperty(ProxyXMLHttpRequest, key, propertyDescriptors[key]);
798 | 	}
799 | 
800 | 	ProxyXMLHttpRequest.fn = function () {};
801 | 
802 | /***/ }),
803 | /* 9 */
804 | /***/ (function(module, exports) {
805 | 
806 | 	"use strict";
807 | 
808 | 	Object.defineProperty(exports, "__esModule", {
809 | 		value: true
810 | 	});
811 | 	/*
812 | 	* https://github.com/werk85/fetch-intercept/blob/develop/src/index.js
813 | 	* 对改代码进行修改, 用以支持拦截 fetch 请求, 记录请求
814 | 	* */
815 | 	attach(window);
816 | 
817 | 	function attach(env) {
818 | 		env.fetch = function (fetch) {
819 | 			return function () {
820 | 				for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
821 | 					args[_key] = arguments[_key];
822 | 				}
823 | 
824 | 				var req = new (Function.prototype.bind.apply(Request, [null].concat(args)))();
825 | 				return interceptor(fetch, req);
826 | 			};
827 | 		}(env.fetch);
828 | 	}
829 | 
830 | 	var interceptors = [];
831 | 
832 | 	function interceptor(fetch, req) {
833 | 		var cloneReq = req.clone();
834 | 		var reversedInterceptors = interceptors.reduce(function (array, interceptor) {
835 | 			return [interceptor].concat(array);
836 | 		}, []);
837 | 		var promise = Promise.resolve(req);
838 | 
839 | 		// Register request interceptors
840 | 		reversedInterceptors.forEach(function (_ref) {
841 | 			var request = _ref.request,
842 | 			    requestError = _ref.requestError;
843 | 
844 | 			if (request || requestError) {
845 | 				promise = promise.then(function (req) {
846 | 					return request(req);
847 | 				}, requestError);
848 | 			}
849 | 		});
850 | 
851 | 		// Register fetch call
852 | 		promise = promise.then(function (req) {
853 | 			return new Promise(function (resolve, reject) {
854 | 				fetch(req).then(function (res) {
855 | 					resolve({ request: cloneReq, response: res });
856 | 				}).catch(function (err) {
857 | 					reject({ request: cloneReq, responseError: err });
858 | 				});
859 | 			});
860 | 		});
861 | 
862 | 		// Register response interceptors
863 | 		reversedInterceptors.forEach(function (_ref2) {
864 | 			var response = _ref2.response,
865 | 			    responseError = _ref2.responseError;
866 | 
867 | 			if (response || responseError) {
868 | 				promise = promise.then(response, responseError);
869 | 			}
870 | 		});
871 | 
872 | 		return promise;
873 | 	}
874 | 
875 | 	exports.default = {
876 | 		register: function register(interceptor) {
877 | 			interceptors.push(interceptor);
878 | 			return function () {
879 | 				var index = interceptors.indexOf(interceptor);
880 | 				if (index >= 0) {
881 | 					interceptors.splice(index, 1);
882 | 				}
883 | 			};
884 | 		},
885 | 		clear: function clear() {
886 | 			interceptors = [];
887 | 		}
888 | 	};
889 | 
890 | /***/ }),
891 | /* 10 */
892 | /***/ (function(module, exports) {
893 | 
894 | 	'use strict';
895 | 
896 | 	Object.defineProperty(exports, "__esModule", {
897 | 		value: true
898 | 	});
899 | 	exports.default = isError;
900 | 	function isError(value) {
901 | 		return Object.prototype.toString.call(value) === '[object Error]';
902 | 	}
903 | 
904 | /***/ })
905 | /******/ ]);


--------------------------------------------------------------------------------
/build/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mobile-console.js",
 3 |   "version": "0.1.10",
 4 |   "description": "a console panel for mobile phone, replace alert",
 5 |   "main": "build.js",
 6 |   "scripts": {
 7 |     "build": "rm -rf build && webpack && cp package.json build/package.json && cp README.md build/README.md",
 8 |     "pub": "npm run build && npm publish build"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/santinoDu/console.git"
13 |   },
14 |   "author": "dujia",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/santinoDu/console/issues"
18 |   },
19 |   "homepage": "https://github.com/santinoDu/console#readme",
20 |   "devDependencies": {
21 |     "babel-core": "^6.1.21",
22 |     "babel-loader": "^6.1.0",
23 |     "babel-preset-es2015": "^6.1.18",
24 |     "css-loader": "^0.21.0",
25 |     "html-loader": "^0.4.4",
26 |     "style-loader": "^0.13.1",
27 |     "url-loader": "^0.5.7",
28 |     "webpack": "^1.12.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/images/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santinoDu/console/552bc4cedb04bf7a5fb17ddd1ed72ca153f1a63c/images/close.png


--------------------------------------------------------------------------------
/images/open.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/santinoDu/console/552bc4cedb04bf7a5fb17ddd1ed72ca153f1a63c/images/open.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mobile-console.js",
 3 |   "version": "0.1.11",
 4 |   "description": "a console panel for mobile phone, replace alert",
 5 |   "main": "build.js",
 6 |   "scripts": {
 7 |     "build": "rm -rf build && webpack && cp package.json build/package.json && cp README.md build/README.md",
 8 |     "pub": "npm run build && npm publish build"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/hjzheng/console.git"
13 |   },
14 |   "author": "dujia",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/hjzheng/console"
18 |   },
19 |   "homepage": "https://github.com/hjzheng/console",
20 |   "devDependencies": {
21 |     "babel-core": "^6.1.21",
22 |     "babel-loader": "^6.1.0",
23 |     "babel-preset-es2015": "^6.1.18",
24 |     "css-loader": "^0.21.0",
25 |     "html-loader": "^0.4.4",
26 |     "style-loader": "^0.13.1",
27 |     "url-loader": "^0.5.7",
28 |     "webpack": "^1.12.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/css/style.css:
--------------------------------------------------------------------------------
  1 | #__console{
  2 |     position: relative;
  3 |     z-index: 2147483647;
  4 | }
  5 | 
  6 | #__console .debug {
  7 |     color: #465ed1;
  8 | }
  9 | 
 10 | #__console .error {
 11 |     color: #465ed1;
 12 |     background: #ffe6e3;
 13 | }
 14 | 
 15 | #__console .Exception {
 16 |     color: #d10a0d;
 17 |     background: #ffe6e3;
 18 | }
 19 | 
 20 | #__console .AJAXSUCCESS {
 21 |     color: #20d10d;
 22 |     background: #ddffc8;
 23 | }
 24 | 
 25 | #__console .AJAXFAILURE {
 26 |     color: #d10a0d;
 27 |     background: #ffe6e3;
 28 | }
 29 | 
 30 | #__console .info {
 31 |     color: #465ed1;
 32 |     background: #ffffff;
 33 | }
 34 | 
 35 | #__console .log {
 36 |     color: #000000;
 37 |     background: #ffffff;
 38 | }
 39 | 
 40 | #__console .warn {
 41 |     color: #465ed1;
 42 |     background: #fff7db;
 43 | }
 44 | 
 45 | .-c-switch{
 46 |     display: block;
 47 |     position: fixed;
 48 |     border-radius: 4px;
 49 |     box-shadow: 0 0 8px rgba( 0, 0, 0, .4);
 50 |     padding: 8px 16px;
 51 |     line-height: 1;
 52 |     font-size: 14px;
 53 |     color: #fff;
 54 |     background-color: #04be02;
 55 | }
 56 | 
 57 | .-c-content{
 58 |     display: none;
 59 |     position: fixed;
 60 |     left: 0;
 61 |     right: 0;
 62 |     bottom: 40px;
 63 |     border-top: 1px solid #eee;
 64 |     overflow-x: hidden;
 65 |     overflow-y: auto;
 66 |     max-height: 50%;
 67 |     background-color: #fff;
 68 |     -webkit-overflow-scrolling: touch;
 69 | }
 70 | 
 71 | .-c-log{
 72 |     margin: 0;
 73 |     border-bottom: 1px solid #eee;
 74 |     padding: 6px 8px;
 75 |     overflow: hidden;
 76 |     line-height: 1.3;
 77 |     -webkit-user-select: text;
 78 |     word-break: break-word;
 79 | }
 80 | 
 81 | .-c-toolbar{
 82 |     display: none;
 83 |     position: fixed;
 84 |     left: 0;
 85 |     right: 0;
 86 |     bottom: 0;
 87 |     line-height: 40px;
 88 |     background-color: #fff;
 89 | }
 90 | 
 91 | .-c-tool{
 92 |     position: relative;
 93 |     float: left;
 94 |     width: 33.33333%;
 95 |     text-align: center;
 96 |     text-decoration: none;
 97 |     color: #000;
 98 | }
 99 | 
100 | .-c-clear::before{
101 |     content: "";
102 |     position: absolute;
103 |     top: 7px;
104 |     bottom: 7px;
105 |     right: 0;
106 |     border-left: 1px solid #d9d9d9;
107 | }
108 | 
109 | .-c-ajax::before{
110 |     content: "";
111 |     position: absolute;
112 |     top: 7px;
113 |     bottom: 7px;
114 |     right: 0;
115 |     border-left: 1px solid #d9d9d9;
116 | }


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <div id="__console">
 2 |     <div class="-c-switch">Console</div>
 3 |     <div class="-c-content"></div>
 4 |     <div class="-c-toolbar">
 5 |         <div class="-c-tool -c-clear">Clear</div>
 6 |         <div class="-c-tool -c-ajax">AJAX(ON)</div>
 7 |         <div class="-c-tool -c-hide">Hide</div>
 8 |     </div>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | import './css/style.css'
  2 | import html from './index.html'
  3 | import dom from './utils/dom.js'
  4 | import drag from './utils/drag.js'
  5 | import ProxyXMLHttpRequest from './utils/xhr.js'
  6 | import fetchIntercept from './utils/fetch.js'
  7 | import isError from './utils/type';
  8 | 
  9 | const logBoxSelector = '.-c-content'
 10 | const switchBtnSelector = '.-c-switch'
 11 | const toolBarSelector = '.-c-toolbar'
 12 | const clearClass = '-c-clear'
 13 | const hideClass = '-c-hide'
 14 | const ajaxClass = '-c-ajax'
 15 | const logItemClass = '-c-log'
 16 | const consoleMethods = ['debug', 'error', 'info', 'log', 'warn']
 17 | 
 18 | export default class Console {
 19 |     constructor () {
 20 |         this.render()
 21 |         this.prepareProperty()
 22 |         this.bindEvent()
 23 |         this.catchAjax()
 24 |         this.core()
 25 |     }
 26 |     render () {
 27 |         const ele = dom.createElement('div', null, html);
 28 |         dom.append(dom.$('body'), ele);
 29 |     }
 30 |     prepareProperty () {
 31 |         this.ajaxEnable = true;
 32 |         this.switchBtn = dom.$(switchBtnSelector);
 33 |         // 设置 Switch Button 初始位置, 并使其可以 Drag
 34 |         this.switchBtn.style.left = document.documentElement.clientWidth - this.switchBtn.offsetWidth - 10 + "px";
 35 |         this.switchBtn.style.top = document.documentElement.clientHeight - this.switchBtn.offsetHeight - 10 + "px";
 36 |         drag(this.switchBtn);
 37 |         this.toolBar = dom.$(toolBarSelector)
 38 |         this.logBox = dom.$(logBoxSelector)
 39 |     }
 40 |     bindEvent () {
 41 |         this.toolBar.addEventListener('click', (e) => {
 42 |             let target = e.target
 43 |             if(target.classList.contains(clearClass)){
 44 |                 dom.html(this.logBox, '')
 45 |             }else if(target.classList.contains(hideClass)){
 46 |                 dom.hide(this.logBox, this.toolBar).show(this.switchBtn)
 47 |             }
 48 |             if(target.classList.contains(ajaxClass)){
 49 |                 this.ajaxEnable = !this.ajaxEnable;
 50 |                 if (this.ajaxEnable) {
 51 |                     target.innerText = 'AJAX(ON)'
 52 |                 } else {
 53 |                     target.innerText = 'AJAX(OFF)'
 54 |                 }
 55 |             }
 56 |         })
 57 | 
 58 |         this.switchBtn.addEventListener('click', () => {
 59 |             dom.hide(this.switchBtn).show(this.logBox, this.toolBar)
 60 |         })
 61 | 
 62 |         // 捕获页面错误
 63 |         const _onerror = window.onerror || function noop(){};
 64 | 
 65 |         window.onerror = (msg, url, lineNo, columnNo, error) => {
 66 |             _onerror();
 67 |             const message = [
 68 |                 'Message: ' + msg,
 69 |                 'URL: ' + url,
 70 |                 'Line: ' + lineNo,
 71 |                 'Column: ' + columnNo,
 72 |                 'Error object: ' + error
 73 |             ].join(' <br/> ');
 74 | 
 75 |             this.pushLog([message], 'Exception');
 76 |         };
 77 |     }
 78 | 
 79 |     catchAjax() {
 80 |         // 捕获 xhr 错误
 81 |         // TODO 添加 REQUEST BODY 和 RESPONSE DATA
 82 |         const _this = this;
 83 |         ProxyXMLHttpRequest.fn = function (xhr) {
 84 |             if (!_this.ajaxEnable) return;
 85 |             if (xhr.readyState === XMLHttpRequest.DONE) {
 86 |                 if (xhr.status >= 200 && xhr.status <= 299) {
 87 |                     _this.pushLog([`[AJAX] ${xhr.open_fn_parmas.method} ${xhr.open_fn_parmas.url} ${xhr.status} (${xhr.statusText})`], 'AJAXSUCCESS');
 88 |                     xhr.send_fn_params.data && _this.pushLog([`[REQUEST BODY] ${xhr.send_fn_params.data}`], 'AJAXSUCCESS');
 89 |                     xhr.responseText && _this.pushLog([`[RESPONSE DATA] ${xhr.responseText}`], 'AJAXSUCCESS');
 90 |                 } else {
 91 |                     _this.pushLog([`[AJAX] ${xhr.open_fn_parmas.method} ${xhr.open_fn_parmas.url} ${xhr.status} (${xhr.statusText})`], 'AJAXFAILURE');
 92 |                     xhr.send_fn_params.data && _this.pushLog([`[REQUEST BODY] ${xhr.send_fn_params.data}`], 'AJAXFAILURE');
 93 |                     xhr.responseText && _this.pushLog([`[RESPONSE DATA] ${xhr.responseText}`], 'AJAXFAILURE');
 94 |                 }
 95 |             }
 96 |         };
 97 |         
 98 |         window.XMLHttpRequest = ProxyXMLHttpRequest;
 99 |         // 捕获 fetch 错误
100 |         const unregister = fetchIntercept.register({
101 |             response: function ({request, response}) {
102 |                 if (_this.ajaxEnable) {
103 |                     if (response.status >= 200 && response.status <= 299) {
104 |                         _this.pushFetchLog(request, response, 'AJAXSUCCESS');
105 |                     } else {
106 |                         _this.pushFetchLog(request, response, 'AJAXFAILURE');
107 |                     }
108 |                 }
109 |                 return response;
110 |             },
111 |             responseError: function ({request, responseError}) {
112 |                 // TODO 待确定
113 |                 if (_this.ajaxEnable) {
114 |                     _this.pushLog([`[AJAX] ${request.method} ${request.url} ${responseError.status} (${responseError.statusText})`], 'AJAXFAILURE');
115 |                 }
116 |                 return Promise.reject(responseError);
117 |             }
118 |         });
119 |     }
120 | 
121 |     pushFetchLog(request, response, type) {
122 |         try {
123 |             request = request.clone();
124 |             response = response.clone();
125 |             Promise.all([request.text(), response.text()]).then(data => {
126 |                 this.pushLog([`[AJAX] ${request.method} ${request.url} ${response.status} (${response.statusText})`], type);
127 |                 data[0] && this.pushLog([`[REQUEST BODY] ${data[0]}`], type);
128 |                 data[1] && this.pushLog([`[RESPONSE DATA] ${data[1]}`], type);
129 |             }).catch(err => {
130 |                 this.pushLog([`[AJAX] ${request.method} ${request.url} ${response.status} (${response.statusText})`], type);
131 |             });
132 |         } catch(err) {
133 |             this.pushLog([`[AJAX] ${request.method} ${request.url} ${response.status} (${response.statusText})`], type);
134 |         }
135 |     }
136 | 
137 |     pushLog (msg, type) {
138 |         let text = msg.map(val => {
139 |             return isError(val) ? `${val.stack}` : JSON.stringify(val);
140 |         }).join(' '),
141 |             log = dom.createElement('div', {class: `${logItemClass} ${type}`}, text)
142 |         dom.append(this.logBox, log)
143 |         this.logBox.scrollTop = this.logBox.scrollHeight
144 |     }
145 |     core () {
146 |         consoleMethods.forEach((method) => {
147 |             let original = window.console[method]
148 |             window.console[method] = (...args) => {
149 |                 this.pushLog(args, method)
150 |                 original.apply(console, args)
151 |             }
152 |         })
153 |     }
154 | }
155 | 
156 | window.MobileConsole = Console;
157 | 


--------------------------------------------------------------------------------
/src/utils/dom.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     $ (selector) {
 3 |         return document.querySelector(selector)
 4 |     },
 5 |     createElement (tag, attrs, content) {
 6 |         let el = document.createElement(tag),
 7 |             i;
 8 |         for( i in attrs ){
 9 |             if(attrs.hasOwnProperty(i)){
10 |                 el.setAttribute(i, attrs[i])
11 |             }
12 |         }
13 |         if(content){
14 |             el.innerHTML = content
15 |         }
16 |         return el
17 |     },
18 |     show (...els) {
19 |         els.forEach(el => {
20 |             el.style.display = 'block'
21 |         })
22 |         return this
23 |     },
24 |     hide (...els) {
25 |         els.forEach(el => {
26 |             el.style.display = 'none'
27 |         })
28 |         return this
29 |     },
30 |     append (parent, ...els) {
31 |         els.forEach(el => {
32 |             parent.appendChild(el)
33 |         })
34 |         return this
35 |     },
36 |     html (el, content) {
37 |         el.innerHTML = content
38 |     }
39 | }


--------------------------------------------------------------------------------
/src/utils/drag.js:
--------------------------------------------------------------------------------
 1 | export default function drag(obj) {
 2 | 
 3 | 	obj.ontouchstart = function (evt) {
 4 | 
 5 | 		const e = evt.targetTouches[0];
 6 | 		const disX = e.clientX - this.offsetLeft;
 7 | 		const disY = e.clientY - this.offsetTop;
 8 | 
 9 | 		const handleMove = function (evt) {
10 | 			evt.preventDefault();
11 | 			const e = evt.targetTouches[0];
12 | 
13 | 			let L = e.clientX - disX;
14 | 			let T = e.clientY - disY;
15 | 
16 | 			if (T < 0) {
17 | 				T = 0;
18 | 			} else if (T > document.documentElement.clientHeight - obj.offsetHeight) {
19 | 				T = document.documentElement.clientHeight - obj.offsetHeight;
20 | 			}
21 | 
22 | 			if (L < 0) {
23 | 				L = 0;
24 | 			} else if (L > document.documentElement.clientWidth - obj.offsetWidth) {
25 | 				L = document.documentElement.clientWidth - obj.offsetWidth;
26 | 			}
27 | 
28 | 			obj.style.left = L + "px";
29 | 			obj.style.top = T + "px";
30 | 		};
31 | 
32 | 		document.addEventListener("touchmove", handleMove, false);
33 | 
34 | 		const handleEnd = function () {
35 | 			document.removeEventListener("touchmove", handleMove, false);
36 | 			document.removeEventListener("touchend", handleEnd, false);
37 | 		};
38 | 
39 | 		document.addEventListener("touchend", handleEnd, false);
40 | 
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/src/utils/fetch.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | * https://github.com/werk85/fetch-intercept/blob/develop/src/index.js
 3 | * 对改代码进行修改, 用以支持拦截 fetch 请求, 记录请求
 4 | * */
 5 | attach(window);
 6 | 
 7 | function attach(env) {
 8 | 	env.fetch = (function (fetch) {
 9 | 		return function (...args) {
10 | 			let req = new Request(...args);
11 | 			return interceptor(fetch, req);
12 | 		};
13 | 	})(env.fetch);
14 | }
15 | 
16 | let interceptors = [];
17 | 
18 | function interceptor(fetch, req) {
19 | 	const cloneReq = req.clone();
20 | 	const reversedInterceptors = interceptors.reduce((array, interceptor) => [interceptor].concat(array), []);
21 | 	let promise = Promise.resolve(req);
22 | 
23 | 	// Register request interceptors
24 | 	reversedInterceptors.forEach(({ request, requestError }) => {
25 | 		if (request || requestError) {
26 | 			promise = promise.then(req => request(req), requestError);
27 | 		}
28 | 	});
29 | 
30 | 	// Register fetch call
31 | 	promise = promise.then(req => {
32 | 		return new Promise((resolve, reject) => {
33 | 			fetch(req).then(res => {
34 | 				resolve({request: cloneReq, response: res});
35 | 			}).catch(err => {
36 | 				reject({request: cloneReq, responseError: err});
37 | 			});
38 | 		});
39 | 	});
40 | 
41 | 	// Register response interceptors
42 | 	reversedInterceptors.forEach(({ response, responseError }) => {
43 | 		if (response || responseError) {
44 | 			promise = promise.then(response, responseError);
45 | 		}
46 | 	});
47 | 
48 | 	return promise;
49 | }
50 | 
51 | export default {
52 | 	register: function (interceptor) {
53 | 		interceptors.push(interceptor);
54 | 		return () => {
55 | 			const index = interceptors.indexOf(interceptor);
56 | 			if (index >= 0) {
57 | 				interceptors.splice(index, 1);
58 | 			}
59 | 		};
60 | 	},
61 | 	clear: function () {
62 | 		interceptors = [];
63 | 	}
64 | };
65 | 


--------------------------------------------------------------------------------
/src/utils/type.js:
--------------------------------------------------------------------------------
1 | export default function isError(value) {
2 | 	return Object.prototype.toString.call(value) === '[object Error]';
3 | }


--------------------------------------------------------------------------------
/src/utils/xhr.js:
--------------------------------------------------------------------------------
 1 | const originXMLHttpRequest = window.XMLHttpRequest;
 2 | const { getOwnPropertyNames, getOwnPropertyDescriptor } = Object;
 3 | 
 4 | /*
 5 | * polyfill for Object.getOwnPropertyDescriptors 未考虑 symbol 属性
 6 | * */
 7 | function getOwnPropertyDescriptors(obj) {
 8 | 	const descs = {};
 9 | 
10 | 	getOwnPropertyNames(obj).forEach(key => {
11 | 		descs[key] = getOwnPropertyDescriptor(obj, key);
12 | 	});
13 | 
14 | 	return descs;
15 | }
16 | 
17 | const propertyDescriptors = Object.getOwnPropertyDescriptors ?  Object.getOwnPropertyDescriptors(originXMLHttpRequest) : getOwnPropertyDescriptors(originXMLHttpRequest);
18 | 
19 | export default function ProxyXMLHttpRequest() {
20 |     const xhr = new originXMLHttpRequest();
21 | 
22 | 	xhr.onreadystatechange = () => {
23 | 		xhr.originOnreadystatechange && xhr.originOnreadystatechange();
24 | 		ProxyXMLHttpRequest.fn.call(null, xhr);
25 | 	};
26 | 
27 | 	Object.defineProperty(xhr, 'onreadystatechange', {
28 | 		set: function (value) {
29 | 			xhr.originOnreadystatechange = value;
30 | 		}
31 | 	});
32 | 
33 | 	const originOpen = xhr.open.bind(xhr);
34 | 	const originSend = xhr.send.bind(xhr);
35 | 
36 | 	xhr.open = function (method, url, asynchronous, username, password) {
37 | 		xhr.open_fn_parmas = {
38 | 			method,
39 | 			url,
40 | 			asynchronous
41 | 		};
42 | 		originOpen(method, url, asynchronous, username, password);
43 | 	};
44 | 	
45 | 	xhr.send = function (data) {
46 | 		xhr.send_fn_params = {
47 | 			data
48 | 		};
49 | 		originSend(data);
50 | 	};
51 | 
52 | 	return xhr;
53 | }
54 | 
55 | for(let key in propertyDescriptors) {
56 | 	Object.defineProperty(ProxyXMLHttpRequest, key, propertyDescriptors[key]);
57 | }
58 | 
59 | ProxyXMLHttpRequest.fn = function () {};
60 | 


--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title></title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 7 | </head>
 8 | <body>
 9 | <a href="#" id="link">just a link</a>
10 | <script src="../build/build.js"></script>
11 | <script>
12 |     new MobileConsole();
13 |     document.getElementById('link').onclick = function(){
14 |         var httpRequest = new XMLHttpRequest();
15 |         httpRequest.onreadystatechange = function () {
16 |             console.log('--->', httpRequest.readyState);
17 |         };
18 |         httpRequest.open('POST', 'http://localhost:3000/posts', true);
19 |         httpRequest.send(JSON.stringify( {title:'hjzheng'} ));
20 | 
21 |         fetch('http://localhost:3000/posts', {method:'POST', body: JSON.stringify( {title:'hjzheng'} )}).then(function () {
22 | 
23 |         }).catch(function (err) {
24 |             console.log(err);
25 |         });
26 |     }
27 | </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/tests/simple.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title></title>
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  7 |     <!--<style>-->
  8 |         <!--.-c-switch{-->
  9 |             <!--display: block;-->
 10 |             <!--position: fixed;-->
 11 |             <!--right: 10px;-->
 12 |             <!--bottom: 10px;-->
 13 |             <!--z-index: 2147483647;-->
 14 |             <!--border-radius: 4px;-->
 15 |             <!--box-shadow: 0 0 8px rgba( 0, 0, 0, .4);-->
 16 |             <!--padding: 8px 16px;-->
 17 |             <!--line-height: 1;-->
 18 |             <!--font-size: 14px;-->
 19 |             <!--color: #fff;-->
 20 |             <!--background-color: #04be02;-->
 21 |         <!--}-->
 22 | 
 23 |         <!--.-c-content{-->
 24 |             <!--display: none;-->
 25 |             <!--position: fixed;-->
 26 |             <!--left: 0;-->
 27 |             <!--right: 0;-->
 28 |             <!--bottom: 40px;-->
 29 |             <!--z-index: 2147483647;-->
 30 |             <!--border-top: 1px solid #eee;-->
 31 |             <!--overflow-x: hidden;-->
 32 |             <!--overflow-y: auto;-->
 33 |             <!--max-height: 50%;-->
 34 |             <!--background-color: #fff;-->
 35 |             <!-&#45;&#45;webkit-overflow-scrolling: touch;-->
 36 |         <!--}-->
 37 | 
 38 |         <!--.-c-log{-->
 39 |             <!--margin: 0;-->
 40 |             <!--border-bottom: 1px solid #eee;-->
 41 |             <!--padding: 6px 8px;-->
 42 |             <!--overflow: hidden;-->
 43 |             <!--line-height: 1.3;-->
 44 |             <!--word-break: break-word;-->
 45 |         <!--}-->
 46 | 
 47 |         <!--.-c-toolbar{-->
 48 |             <!--display: none;-->
 49 |             <!--position: fixed;-->
 50 |             <!--left: 0;-->
 51 |             <!--right: 0;-->
 52 |             <!--bottom: 0;-->
 53 |             <!--z-index: 2147483647;-->
 54 |             <!--line-height: 40px;-->
 55 |             <!--background-color: #fff;-->
 56 |         <!--}-->
 57 | 
 58 |         <!--.-c-tool{-->
 59 |             <!--position: relative;-->
 60 |             <!--float: left;-->
 61 |             <!--width: 50%;-->
 62 |             <!--text-align: center;-->
 63 |             <!--text-decoration: none;-->
 64 |             <!--color: #000;-->
 65 |         <!--}-->
 66 | 
 67 |         <!--.-c-clear::before{-->
 68 |             <!--content: "";-->
 69 |             <!--position: absolute;-->
 70 |             <!--top: 7px;-->
 71 |             <!--bottom: 7px;-->
 72 |             <!--right: 0;-->
 73 |             <!--border-left: 1px solid #d9d9d9;-->
 74 |         <!--}-->
 75 |     <!--</style>-->
 76 | </head>
 77 | <body>
 78 |     <!--<div id="__console">-->
 79 |         <!--<div class="-c-switch">Console</div>-->
 80 |         <!--<div class="-c-content"></div>-->
 81 |         <!--<div class="-c-toolbar">-->
 82 |             <!--<div class="-c-tool -c-clear">Clear</div>-->
 83 |             <!--<div class="-c-tool -c-hide">Hide</div>-->
 84 |         <!--</div>-->
 85 |     <!--</div>-->
 86 | 
 87 |     <script>
 88 |         ;(function (window) {
 89 |             'use strict';
 90 |             var logBox
 91 |             var toolBar
 92 |             var switchBtn
 93 | 
 94 |             var html = '<div id="__console">' +
 95 |                     '<div class="-c-switch">Console</div>' +
 96 |                     '<div class="-c-content"></div>' +
 97 |                     '<div class="-c-toolbar">' +
 98 |                     '<div class="-c-tool -c-clear">Clear</div>' +
 99 |                     '<div class="-c-tool -c-hide">Hide</div>' +
100 |                     '</div>' +
101 |                     '</div>';
102 | 
103 |             var css = '.-c-switch{display:block;position:fixed;right:10px;bottom:10px;z-index:2147483647;border-radius:4px;box-shadow:0 0 8px rgba(0,0,0,.4);padding:8px 16px;line-height:1;font-size:14px;color:#fff;background-color:#04be02}.-c-content,.-c-toolbar{display:none;position:fixed;left:0;z-index:2147483647;background-color:#fff;right:0}.-c-content{bottom:40px;border-top:1px solid #eee;overflow-x:hidden;overflow-y:auto;max-height:50%;-webkit-overflow-scrolling:touch}.-c-log{margin:0;border-bottom:1px solid #eee;padding:6px 8px;overflow:hidden;line-height:1.3;word-break:break-word}.-c-toolbar{bottom:0;line-height:40px}.-c-tool{position:relative;float:left;width:50%;text-align:center;text-decoration:none;color:#000}.-c-clear::before{content:"";position:absolute;top:7px;bottom:7px;right:0;border-left:1px solid #d9d9d9}';
104 | 
105 |             var createElement = function (tag, attrs, content) {
106 |                 var el = document.createElement(tag),
107 |                         i;
108 |                 for( i in attrs){
109 |                     if(attrs.hasOwnProperty(i)){
110 |                         el.setAttribute(i, attrs[i])
111 |                     }
112 |                 }
113 | 
114 |                 if(content){
115 |                     el.innerHTML = content
116 |                 }
117 | 
118 |                 return el
119 |             }
120 | 
121 |             var pushLog = function (msg) {
122 |                 var log = createElement('div', {class: '-c-log'}, JSON.stringify(msg.join(' ')).slice(1, -1))
123 |                 logBox.appendChild(log)
124 |                 logBox.scrollTop = logBox.scrollHeight
125 |             }
126 | 
127 |             var init = function () {
128 |                 var el = createElement('div', {}, html)
129 |                 var style = createElement('style', {}, css)
130 |                 document.head.appendChild(style)
131 |                 document.body.appendChild(el)
132 |             }
133 | 
134 |             init()
135 | 
136 |             logBox = document.querySelector('.-c-content')
137 |             toolBar = document.querySelector('.-c-toolbar')
138 |             switchBtn = document.querySelector('.-c-switch')
139 | 
140 |             switchBtn.addEventListener('click', function () {
141 |                 logBox.style.display = 'block'
142 |                 toolBar.style.display = 'block'
143 |                 switchBtn.style.display = 'none'
144 |             })
145 | 
146 |             toolBar.addEventListener('click', function (e) {
147 |                 var target = e.target
148 |                 if(target.classList.contains('-c-clear')){
149 |                     logBox.innerHTML = ''
150 |                 }else if(target.classList.contains('-c-hide')){
151 |                     logBox.style.display = 'none'
152 |                     toolBar.style.display = 'none'
153 |                     switchBtn.style.display = 'block'
154 |                 }
155 |             })
156 | 
157 |             ;['debug', 'error', 'info', 'log', 'warn'].forEach(function(method){
158 |                 var original = window.console[method]
159 |                 window.console[method] = function () {
160 |                     pushLog(Array.prototype.slice.call(arguments))
161 |                     original.apply(console, arguments)
162 |                 }
163 |             })
164 |         }(window));
165 |     </script>
166 | </body>
167 | </html>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var webpack = require('webpack')
 2 | 
 3 | module.exports = {
 4 |     entry: './src/main.js',
 5 |     output: {
 6 |         path: './build',
 7 |         filename: 'build.js'
 8 |     },
 9 |     module: {
10 |         loaders: [
11 |             {
12 |                 test: /\.html$/,
13 |                 loader: "html"
14 |             },
15 |             {
16 |                 test: /\.js$/,
17 |                 loader: 'babel',
18 |                 query: {
19 |                     presets: ['es2015']
20 |                 }
21 |             },
22 |             {
23 |                 test: /\.css$/,
24 |                 loader: 'style!css'
25 |             }
26 |         ]
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------