├── img └── demo.gif ├── package.json ├── LICENSE ├── README.md ├── index.html └── index.js /img/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pangxieju/consoleshow/HEAD/img/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "consoleshow", 3 | "version": "1.4.0", 4 | "main": "index.js", 5 | "description": "Easy debugging in development.", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/pangxieju/consoleshow" 12 | }, 13 | "keywords": [ 14 | "console", 15 | "consoleShow" 16 | ], 17 | "dependencies": {}, 18 | "devDependencies": {}, 19 | "author": "pangxieju", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/pangxieju/consoleshow/issues/new" 23 | } 24 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 consoleshow 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | consoleshow 2 | ============================== 3 | [![npm version](https://badge.fury.io/js/consoleshow.svg)](https://badge.fury.io/js/consoleshow) 4 | 5 | 快捷管理 console，自定义命令，url 过滤命令 6 | 7 | 8 | ![](./img/demo.gif) 9 | 10 | ## 使用指南 11 | 12 | 安装： 13 | 14 | ```js 15 | npm install consoleshow 16 | ``` 17 | 18 | 演示地址: 19 | 20 | [http://pangxieju.github.io/consoleshow/index.html](http://pangxieju.github.io/consoleshow/index.html) 21 | 22 | 扩展命令： 23 | 24 | * console.color ：修改打印颜色 25 | * console.api ：输出接口相关信息 26 | * console.block ：输出块，组件相关信息 27 | * console.event ：输出事件相关信息 28 | * console.data ：输出数据信息 29 | * console.tag ：输出标签 30 | * console.test ：普通输出 31 | * console.plus ：自定义输出信息 32 | 33 | ```js 34 | // 默认初始化 35 | window.consoleshow.config(); 36 | 37 | // 清除控制台信息 38 | window.consoleshow.config({ 39 | clear: true // url 改变时清除控制台信息 40 | }); 41 | 42 | // 是否折叠控制台信息 43 | window.consoleshow.config({ 44 | collapsed: false // 默认值为 true ，折叠显示控制台信息 45 | }); 46 | 47 | // 显示指定 console 48 | window.consoleshow.config({ 49 | show: [name_1, name_2] 50 | }); 51 | 52 | // 隐藏指定 console 53 | window.consoleshow.config({ 54 | hide: [name_1, name_2] 55 | }); 56 | 57 | // 扩展命令 58 | window.consoleshow.config({ 59 | extend: [{ 60 | name: "api", // 用于控制过滤 console 标记，默认为 test 61 | type: "table", // console 默认命令名，默认为 log 62 | color: "#fff3cf", // 标题颜色，默认色 #ddd 63 | group: true, // 是否使用组显示 console 日志， 默认 false 64 | code: false // 是否支持 function，默认false 65 | }] 66 | }); 67 | 68 | ``` 69 | #### 注意： 70 | 71 | 1、扩展 name 参数不允许与 console 命令和扩展命令名相同； 72 | 73 | - console 命令："debug", "error", "info", "log", "warn", "dir", "dirxml", "table", "trace", "group", "groupCollapsed", "groupEnd", "clear", "count", "assert", "markTimeline", "profile", "profileEnd", "timeline", "timelineEnd", "time", "timeEnd", "timeStamp", "memory"；（Chrom 浏览器） 74 | 75 | - 扩展命令： "color", "api", "block", "event", "data", "tag","test", "plus"； 76 | 77 | - 如果与 console 命令名相同，name 会取默认参数 test；如果与扩展命令名相同，会覆盖重名扩展设置； 78 | 79 | 2、扩展 color 属性只支持 16 进制颜色； 80 | 81 | 3、扩展 type 参数主要设置输出的控制台命令名，例如：table 等于 console.table； 82 | 83 | 4、扩展 group 参数设置显示 console 是否为 group，用于折叠显示日志； 84 | 85 | url 过滤 console： 86 | 87 | ``` 88 | // 显示当前页面指定 console 89 | http://xxx.com?console.show=name_1,name_2 90 | 91 | // 隐藏当前页面指定 console 92 | http://xxx.com?console.hide=name_1,name_2 93 | ``` 94 | 95 | url 展开/折叠 console 96 | ``` 97 | // 展开group console 98 | http://xxx.com?console.collapsed=false 99 | 100 | // 折叠group console 101 | http://xxx.com?console.collapsed=true 102 | 103 | // 组合过滤 104 | http://xxx.com?console.collapsed=false&console.show=name_1,name_2 105 | http://xxx.com?console.collapsed=true&console.hide=name_1,name_2 106 | ``` 107 | 108 | url 过滤参数会覆盖初始化参数里的过滤信息。 109 | 110 | ### 扩展命令 111 | 112 | 1、api, block, event, data, tag, test, plus 命令; 113 | 114 | ```js 115 | // test 为扩展命令名 116 | console.test('This is test 1.'); 117 | 118 | console.test('This is test 1.', 'This is test 1.1.', 'This is test 1.2.'); 119 | 120 | // 内联配置 121 | console.test('This is test 2.', { 122 | config: { 123 | "name": "@test1", // 用于控制过滤 console 标记，默认为 test 124 | "type": "log", // console 默认命令名，默认为 log 125 | "color": "#f50" // 标题颜色，默认色 #ddd 126 | } 127 | }); 128 | 129 | console.plus("This is demo 1."); 130 | 131 | console.plus([ 132 | {a: 1, b: 1}, 133 | {a: 2, b: 2}, 134 | {a: 3, b: 3}, 135 | {a: 4, b: 4} 136 | ], { 137 | config: { 138 | "name": "demo2", 139 | "type": "table", 140 | } 141 | }); 142 | 143 | console.plus(function () { 144 | console.log("This is demo 3"); 145 | console.color('This is color.'); 146 | console.color('This is color.', "#f00"); 147 | console.event('This is event 1.'); 148 | }, 149 | { 150 | config: { 151 | "name": "demo3" 152 | } 153 | }) 154 | ``` 155 | 156 | 2、color 命令：console.color(string, color); 157 | 158 | ```js 159 | console.color('This is color.'); 160 | 161 | console.color('This is color.', "#f00"); 162 | ``` 163 | 164 | #### 注意： 165 | 166 | 在 webpack 中可以配置是否在正式代码中过滤 console ；一般开发环境是要显示 console 方便调试，正式不显示；相关配置如下： 167 | 168 | ```js 169 | 170 | // webpack2-3x 入口配置 171 | entry: { 172 | index: [ 173 | '../src/index.js', 174 | '../node_modules/consoleshow/index.js' // 可以通过 process.env.NODE_ENV 来控制是否输出 175 | ] 176 | } 177 | 178 | // webpack2-3x UglifyJsPlugin 配置 179 | compressor: { 180 | drop_console: true, // 清除 console 181 | pure_funcs: ['window.consoleshow.config'] // 打包过滤 182 | } 183 | ``` 184 | 185 | ## License 186 | This content is released under the [MIT](http://opensource.org/licenses/MIT) License. -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | consoleShow - demo 9 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 89 | 90 | 92 | 93 | 94 | 95 |
96 |

打开浏览器控制台

97 | 98 |
99 | 100 | 249 | 250 | 251 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * consoleShow v1.4.0 By pangxieju 3 | * Github: https://github.com/pangxieju/consoleshow 4 | * MIT Licensed. 5 | */ 6 | var consoleshow = { 7 | settings: { 8 | hide: [], 9 | show: [], 10 | collapsed: true, 11 | extend: [], 12 | clear: false 13 | }, 14 | config: function(config) { 15 | if (!(window.console && window.console.log)) return; 16 | 17 | // Default extended data. 18 | var defaultExtend = [ 19 | { 20 | name: "api", 21 | color: "#ccffcc", 22 | group: true, 23 | code: false 24 | }, 25 | { 26 | name: "block", 27 | color: "#ffcccc", 28 | group: true, 29 | code: false 30 | }, 31 | { 32 | name: "event", 33 | color: "#ffffcc", 34 | group: true, 35 | code: false 36 | }, 37 | { 38 | name: "data", 39 | color: "#ccccff", 40 | group: true, 41 | code: false 42 | }, 43 | { 44 | name: "tag", 45 | type: "trace", 46 | color: "#66cccc", 47 | group: false, 48 | code: false 49 | }, 50 | { 51 | name: "test", 52 | color: "#ddd", 53 | group: true, 54 | code: false 55 | }, 56 | { 57 | name: "plus", 58 | type: "log", 59 | color: "#d2eafb", 60 | group: true, 61 | code: true 62 | } 63 | ]; 64 | 65 | // Processing settings information. 66 | var settings = this.settings; 67 | 68 | for (var i in config) { 69 | if (config.hasOwnProperty(i)) { 70 | settings[i] = config[i]; 71 | } 72 | } 73 | 74 | // Get Url parameters. 75 | var getUrlVal = this.methods.getUrlVal; 76 | var urlShow = getUrlVal("console.show"); 77 | var urlHide = getUrlVal("console.hide"); 78 | 79 | if (urlShow || urlHide) { 80 | settings.show = urlShow && urlShow.split(",") || []; 81 | settings.hide = urlHide && urlHide.split(",") || []; 82 | } 83 | 84 | var urlCollapsed = getUrlVal("console.collapsed"); 85 | 86 | if (urlCollapsed === "false") { 87 | settings.collapsed = false; 88 | } else { 89 | settings.collapsed = true; 90 | } 91 | 92 | // Processing extended information. 93 | if (!settings.extend && settings.extend.length === 0) { 94 | settings.extend = defaultExtend; 95 | } else { 96 | settings.extend = defaultExtend.concat(settings.extend); 97 | } 98 | 99 | !settings.clear || console.clear(); 100 | 101 | // Listen for Url changes. 102 | window.onhashchange = function() { 103 | var hash = window.location.hash; 104 | !settings.clear || console.clear(); 105 | 106 | if ( 107 | hash.indexOf("console.show") !== -1 || 108 | hash.indexOf("console.hide") !== -1 || 109 | hash.indexOf("console.collapsed") !== -1 110 | ) { 111 | window.location.reload(); 112 | } 113 | }; 114 | 115 | // Initialization. 116 | this.init(); 117 | }, 118 | init: function () { 119 | var methods = this.methods; 120 | var settings = this.settings; 121 | var consoleKey = methods.getConsoleKey(); 122 | 123 | try { 124 | console["color"] = function (content, color) { 125 | if (methods.filterConsole(settings, "color")) return; 126 | 127 | if (content === "") return; 128 | 129 | this.log("%c" + content, "color:" + (color || "#f60")); 130 | }; 131 | 132 | ////////////////////////////////////////////////////////////////////////// 133 | 134 | var extend = this.settings.extend; 135 | var member = {}; 136 | 137 | for (var i = 0; i < extend.length; i++) { 138 | var member = extend[i]; 139 | 140 | member = { 141 | name: consoleKey.indexOf(member.name) !== -1 ? "test" : member.name, 142 | type: consoleKey.indexOf(member.type) !== -1 ? member.type : "log", 143 | color: member.color || "#ddd", 144 | group: member.group ? true : false, 145 | code: member.code ? true : false 146 | }; 147 | 148 | (function (defaultConfig) { 149 | console[defaultConfig.name] = function () { 150 | // Get inline config. 151 | var getConfig = methods.getConfig(arguments); 152 | 153 | if (methods.isEmptyObject(getConfig)) { 154 | arguments.length = arguments.length - 1; 155 | } 156 | 157 | // Get config name; 158 | var name = defaultConfig.name; 159 | if (getConfig.name !== undefined) { 160 | name += " " + getConfig.name; 161 | } 162 | 163 | // Filter name. 164 | if (methods.filterConsole(settings, name)) return; 165 | 166 | var type = defaultConfig.type; 167 | if (getConfig.type !== undefined) { 168 | type = getConfig.type; 169 | } 170 | 171 | var color = defaultConfig.color; 172 | if (getConfig.color !== undefined) { 173 | color = getConfig.color; 174 | } 175 | 176 | var group = defaultConfig.group; 177 | if (getConfig.group !== undefined) { 178 | group = getConfig.group; 179 | } 180 | 181 | var code = defaultConfig.code; 182 | if (getConfig.code !== undefined) { 183 | code = getConfig.code; 184 | } 185 | 186 | var outputStyle = methods.outputStyle(color); 187 | 188 | if (group) { 189 | var isCollapsed = settings.collapsed ? "groupCollapsed" : "group"; 190 | this[isCollapsed]("%c" + name, outputStyle); 191 | 192 | if (code) { 193 | methods.runCode(arguments, type, this); 194 | } else { 195 | this[type].apply(this, arguments); 196 | } 197 | 198 | this.groupEnd(); 199 | 200 | } else { 201 | var param = arguments; 202 | var outparam = ["%c" + name, outputStyle]; 203 | 204 | for (var key in param) { 205 | if ( 206 | param.hasOwnProperty(key) && 207 | !methods.isEmptyObject(param[key].config) 208 | ) { 209 | outparam.push(param[key]); 210 | } 211 | } 212 | 213 | for (var i = 0; i < outparam.length; i++) { 214 | param[i] = outparam[i]; 215 | } 216 | 217 | param.length = outparam.length; 218 | 219 | this[type].apply(this, param); 220 | 221 | } 222 | }; 223 | })(member); 224 | } 225 | } catch (err) { 226 | console.warn(err); 227 | } 228 | }, 229 | methods: { 230 | runCode: function (param, type, This) { 231 | for (var key in param) { 232 | 233 | if (param.hasOwnProperty(key) && !this.isEmptyObject(param[key].config)) { 234 | var codeBlock = param[key]; 235 | 236 | switch (typeof codeBlock) { 237 | case "function": 238 | codeBlock(); 239 | break; 240 | 241 | case "object": 242 | This[type](codeBlock); 243 | break; 244 | 245 | case "string": 246 | if (type === "table") { 247 | This.log(codeBlock); 248 | } else { 249 | This[type](codeBlock); 250 | } 251 | break; 252 | 253 | default: 254 | This.log(codeBlock); 255 | break; 256 | 257 | } 258 | } 259 | } 260 | }, 261 | getConfig: function (param) { 262 | var paramLength = param.length; 263 | 264 | if (paramLength > 1 && param[paramLength - 1].config !== undefined) { 265 | var paramConfig = param[paramLength - 1].config; 266 | return paramConfig; 267 | } 268 | return {}; 269 | }, 270 | getConsoleKey: function () { 271 | var consoleKey = []; 272 | 273 | for (var key in console) { 274 | consoleKey.push(key); 275 | } 276 | 277 | return consoleKey || []; 278 | }, 279 | isEmptyObject: function (obj) { 280 | for(var i in obj){ 281 | return true; 282 | } 283 | return false; 284 | }, 285 | filterConsole: function (settings, name) { 286 | var show = settings.show; 287 | var hide = settings.hide; 288 | var showNum = show ? show.length : 0; 289 | 290 | function isName(data, name) { 291 | if (data.indexOf(name) !== -1) return true; 292 | for (var i = 0; i < data.length; i++) { 293 | if (data[i] !== "" && name.toString().indexOf(data[i]) !== -1) return true; 294 | } 295 | return false; 296 | }; 297 | 298 | if (showNum === 0) { 299 | if (isName(hide, name)) return true; 300 | } else { 301 | if (!isName(show, name)) return true; 302 | } 303 | 304 | }, 305 | setColorRgb: function (sColor) { 306 | var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; 307 | sColor = sColor ? sColor.toLowerCase() : "#fff"; 308 | 309 | if (sColor && reg.test(sColor)) { 310 | if (sColor.length === 4) { 311 | var sColorNew = "#"; 312 | 313 | for (var i = 1; i < 4; i += 1) { 314 | sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); 315 | } 316 | sColor = sColorNew; 317 | } 318 | var sColorChange = []; 319 | 320 | for (var ii = 1; ii < 7; ii += 2) { 321 | sColorChange.push(parseInt("0x" + sColor.slice(ii, ii + 2))); 322 | } 323 | return sColorChange.join(","); 324 | } else { 325 | return sColor; 326 | } 327 | }, 328 | outputStyle: function (color) { 329 | return 'margin: 0 0 0 -24px;' + 330 | 'padding: 3px 30px 1px 24px;' + 331 | 'border: 1px solid ' + color + ';' + 332 | 'background-color: rgba(' + this.setColorRgb(color) + ', 0.45);' + 333 | 'border-radius: 0 10px 10px 0;' + 334 | 'font-weight: 600;color: #666;' + 335 | 'text-transform: capitalize'; 336 | }, 337 | getUrlVal: function (name, url) { 338 | if (!url) url = window.location.href; 339 | name = name.replace(/[\[\]]/g, "\\$&"); 340 | 341 | var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"); 342 | var results = regex.exec(url); 343 | 344 | if (!results) return null; 345 | if (!results[2]) return ''; 346 | return decodeURIComponent(results[2].replace(/\+/g, " ")); 347 | } 348 | } 349 | }; 350 | window.consoleshow = consoleshow; --------------------------------------------------------------------------------