diff --git a/CHANGELOG.md b/CHANGELOG.md index c8bab14f..d248d2f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,19 @@ +#### v1.1.0 (2016-05-06) + +- 【特性】支持 window.onerror() 的异常信息捕获 +- 【特性】支持 [default|system|...] 日志格式，将 log 输出到指定面板 + + #### v1.0.5 (2016-04-29) -- 【修复】修复webpack编译失败的问题 -- 【修复】修复打印HTML字符串可能导致的XSS问题 +- 【修复】修复 webpack 编译失败的问题 +- 【修复】修复打印 HTML 字符串可能导致的 XSS 问题 #### v1.0.4 (2016-04-28) -- 【修复】修复package.json的main路径 -- 【优化】优化example的demo页面 +- 【修复】修复 package.json 的 main 路径 +- 【优化】优化 example 的 demo 页面 #### v1.0.2 (2016-04-27) diff --git a/README.md b/README.md index a9ed1b2b..5f0135ca 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ vConsole vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。 + ## 手机预览 ![](./example/snapshot/qrcode.png) @@ -17,12 +18,14 @@ vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计 ![](./example/snapshot/log_panel.png) + ## 使用方法 ### 1.下载模块 checkout 文件 `dist/vconsole.min.js` 到本地。 + ### 2.引入模块 (1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 `` 中引入： @@ -39,6 +42,7 @@ checkout 文件 `dist/vconsole.min.js` 到本地。 var vConsole = require('path/to/vconsole.min.js'); ``` + ### 3.打印 log 日志 (1) 与 PC 端打印 log 一致，可直接使用 `console.log()` 等方法直接打印日志： @@ -49,7 +53,17 @@ console.log('Hello World'); 未加载 vConsole 模块时，`console.log()` 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。 -(2) 支持 4 种不同类型的日志，会以不同的颜色输出到前端面板： +(2) 引入模块后，vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志，请使用 `vConsole.ready()` 方法： + +```javascript +// 若未通过 AMD/CMD 方式加载模块， +// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole +vConsole.ready(function() { + console.log('Hello World'); +}); +``` + +(3) 支持 4 种不同类型的日志，会以不同的颜色输出到前端面板： ```javascript console.log('foo'); // 白底黑字 @@ -59,7 +73,7 @@ console.warn('foo'); // 黄底黄字 console.error('bar'); // 红底红字 ``` -(3) 支持打印 Object 对象，会以 JSON 字符串格式输出： +(4) 支持打印 Object 对象，会以 JSON 字符串格式输出： ```javascript var obj = {}; @@ -67,33 +81,42 @@ obj.foo = 'bar'; console.log(obj); // 打印出 {foo: 'bar'} ``` -(4) 支持传入多个参数，会以空格隔开： +(5) 支持传入多个参数，会以空格隔开： ```javascript var uid = 233; console.log('UserID:', uid); // 打印出 UserID: 233 ``` -(5) 引入模块后，vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志，请使用 `vConsole.ready()` 方法： +(6) 支持使用 `[default|system|...]` 的格式将 log 输出到指定面板： ```javascript -// 若未通过 AMD/CMD 方式加载模块， -// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole -vConsole.ready(function() { - console.log('Hello World'); -}); +// [xxx] 须写在 log 的最开始 +console.log('[system]', 'foo'); +console.log('[system] bar'); +// 系统面板将打印出两行，分别为 foo 和 bar +``` + +目前支持的面板有： + +``` +[default] 日志（默认） +[system] 系统 ``` + ## 注意事项 引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。 若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。动态引入模块的方法可参考 `example/demo2.php` 示例。 + ## 更新记录 [CHANGELOG.md](./CHANGELOG.md) + ## License -The MIT License (http://opensource.org/licenses/MIT) \ No newline at end of file +The MIT License (http://opensource.org/licenses/MIT) diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js index 4371ac59..13779dc0 100644 --- a/dist/vconsole.min.js +++ b/dist/vconsole.min.js @@ -1,5 +1,5 @@ /*! - * vconsole v1.0.5 (https://github.com/WechatFE/vConsole) + * vconsole v1.1.0 (https://github.com/WechatFE/vConsole) * Copyright 2016, WechatFE Team * MIT license */ diff --git a/example/demo1.html b/example/demo1.html index 31236ea8..f8b7d6f2 100644 --- a/example/demo1.html +++ b/example/demo1.html @@ -57,7 +57,8 @@

Demo 1

err.a = 1; }); $('.js_btn_log_sys').on('tap', function(e) { - console.log('[system] 当前时间戳:', (+new Date())); + // 输出到系统面板 + console.log('[system]', '当前时间戳:', (+new Date())); showTips(); }); diff --git a/package.json b/package.json index 5c9070db..2b68c0ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vconsole", - "version": "1.0.5", + "version": "1.1.0", "description": "A virtual console panel for mobile page", "homepage": "https://github.com/WechatFE/vConsole", "main": "dist/vconsole.min.js",