v1.2.0 released

joykuang · May 11, 2016 · 48d6edc · 48d6edc
1 parent ef21ca9
commit 48d6edc
Show file tree

Hide file tree

Showing 9 changed files with 257 additions and 59 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,21 +1,33 @@
+English | [简体中文](./CHANGELOG_CN.md)
+
+
+#### v1.2.0 (2016-05-11)
+
+- [ADD] Add network panel
+- [DELELE] Deprecate `vConsole.ready()` method
+- [IMPROVE] Display formatted Object & Array variable
+- [IMPROVE] Add English README and CHANGELOG
+- [IMPROVE] Improve UI
+
+
 #### v1.1.0 (2016-05-06)
 
-- 【特性】支持 window.onerror() 的异常信息捕获
-- 【特性】支持 [default|system|...] 日志格式，将 log 输出到指定面板
+- [ADD] Support `window.onerror()` to catch exceptions and errors
+- [ADD] Support `[default|system|...]` string to print logs to specific panel
 
 
 #### v1.0.5 (2016-04-29)
 
-- 【修复】修复 webpack 编译失败的问题
-- 【修复】修复打印 HTML 字符串可能导致的 XSS 问题
+- [FIX] Fix webpack compilation
+- [FIX] Fix XSS when printing HTML string
 
 
 #### v1.0.4 (2016-04-28)
 
-- 【修复】修复 package.json 的 main 路径
-- 【优化】优化 example 的 demo 页面
+- [FIX] Fix the `main` path in `package.json`
+- [IMPROVE] Update demo pages
 
 
 #### v1.0.2 (2016-04-27)
 
-初始发布
+- Initial release
diff --git a/CHANGLOG_CN.md b/CHANGLOG_CN.md
@@ -0,0 +1,33 @@
+[English](./CHANGELOG.md) | 简体中文
+
+
+#### v1.2.0 (2016-05-11)
+
+- 【新增】新增网络面板，可展示 AJAX 请求
+- 【删减】废弃 `vConsole.ready()` 方法
+- 【优化】支持 Object/Array 结构化展示，不再以 JSON 字符串输出
+- 【优化】新增英文 README 及 CHANGELOG 文档
+- 【优化】优化 UI 体验
+
+
+#### v1.1.0 (2016-05-06)
+
+- 【新增】支持 `window.onerror()` 的异常信息捕获
+- 【新增】支持 `[default|system|...]` 日志格式，将 log 输出到指定面板
+
+
+#### v1.0.5 (2016-04-29)
+
+- 【修复】修复 webpack 编译失败的问题
+- 【修复】修复打印 HTML 字符串可能导致的 XSS 问题
+
+
+#### v1.0.4 (2016-04-28)
+
+- 【修复】修复 `package.json` 的 main 路径
+- 【优化】优化 example 的 demo 页面
+
+
+#### v1.0.2 (2016-04-27)
+
+- 初始发布
diff --git a/README.md b/README.md
@@ -1,16 +1,18 @@
+English | [简体中文](./README_CN.md)
+
 vConsole
 ==============================
 [![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole) 
 
-一个针对手机网页的前端 console 调试面板。
+A front-end developer tool for mobile web page.
 
 
-## 简介
+## Introduction
 
-vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。
+vConsole is a mobile front-end developer tool which can be very helpful for debug and development.
 
 
-## 手机预览
+## Preview
 
 ![](./example/snapshot/qrcode.png)
 
@@ -19,100 +21,108 @@ vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计
 ![](./example/snapshot/log_panel.png)
 
 
-## 使用方法
+## Installation
+
+### 1. Download
 
-### 1.下载模块
+Download file `dist/vconsole.min.js` to your project's directory.
 
-checkout 文件 `dist/vconsole.min.js` 到本地。
+Or, install via `npm` :
 
+```
+npm install vconsole
+```
 
-### 2.引入模块
+### 2. Import
 
-(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 `<head>` 中引入：
+(1) Under non-AMD/CMD rule, insert vConsole into `<head>`. To support further features, insert vConsole into `<head>` rather than `</body>` is a better choice.
 
 ```html
 <head>
 	<script src="path/to/vconsole.min.js"></script>
 </head>
 ```
 
-(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 `require()` 引入模块：
+(2) Under AMD/CMD rule, use `require()` to import vConsole.
 
 ```javascript
 var vConsole = require('path/to/vconsole.min.js');
 ```
 
 
-### 3.打印 log 日志
+### 3. Usage
 
-(1) 与 PC 端打印 log 一致，可直接使用 `console.log()` 等方法直接打印日志：
+(1) Use the methods of `console` to print logs, just like what you do at desktop browsers:
 
 ```javascript
 console.log('Hello World');
 ```
 
-未加载 vConsole 模块时，`console.log()` 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。
+When vConsole is not loaded, logs will be printed to native console. After importing vConsole, logs will be printed to both front-end console and native console.
 
-(2) 引入模块后，vConsole 会有一段很小的延迟来用于初始化工作。此时若需打印日志，请使用 `vConsole.ready()` 方法：
 
-```javascript
-// 若未通过 AMD/CMD 方式加载模块，
-// vConsole 会自动挂载在全局 window 对象中，即 window.vConsole
-vConsole.ready(function() {
-	console.log('Hello World');
-});
-```
-
-(3) 支持 4 种不同类型的日志，会以不同的颜色输出到前端面板：
+(2) 5 types of log method are supported, with different styles:
 
 ```javascript
-console.log('foo'); // 白底黑字
-console.info('bar'); // 白底紫字
-console.debug('oh'); // 白底黄字
-console.warn('foo'); // 黄底黄字
-console.error('bar'); // 红底红字
+console.log('foo');   // black word, white bakcground
+console.info('bar');  // purple word, white background
+console.debug('oh');  // orange word, white background
+console.warn('foo');  // orange word, yellow background
+console.error('bar'); // red word, pink background
 ```
 
-(4) 支持打印 Object 对象，会以 JSON 字符串格式输出：
+
+(3) Object or Array variable will be printed as formatted JSON:
 
 ```javascript
 var obj = {};
 obj.foo = 'bar';
-console.log(obj); // 打印出 {foo: 'bar'}
+console.log(obj);
+/*
+Object
+{
+  foo: "bar"
+}
+*/
 ```
 
-(5) 支持传入多个参数，会以空格隔开：
+
+(4) Multiple arguments are supported, each variable will be divided by a space:
 
 ```javascript
 var uid = 233;
-console.log('UserID:', uid); // 打印出 UserID: 233
+console.log('UserID:', uid); // UserID: 233
 ```
 
-(6) 支持使用 `[default|system|...]` 的格式将 log 输出到指定面板：
+
+(5) Use `[default|system|...]` string to print logs to specific panel:
 
 ```javascript
-// [xxx] 须写在 log 的最开始
+// [xxx] must be at the beginning of a log
 console.log('[system]', 'foo');
 console.log('[system] bar');
-// 系统面板将打印出两行，分别为 foo 和 bar
+// foo & bar will be printed to system panel
 ```
 
-目前支持的面板有：
+Supported panels:
 
 ```
-[default] 日志（默认）
-[system]  系统
+[default] Log panel (default)
+[system]  System panel
+[network] Network panel
 ```
 
 
-## 注意事项
+## Notice
+
+(1) After importing vConsole, a button, which can show/hide panel, will be displayed at the right bottom of the page.
 
-引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。
+Under production environment, DO NOT import vConsole to your page, unless you want to let your users help you to debug. Demo `example/demo2.php` shows how to import vConsole dynamicly.
 
-若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。动态引入模块的方法可参考 `example/demo2.php` 示例。
+(2) After v1.2.0, `vConsole.ready()` is deprecated. You can directly use `console.log()` after importing vConsole without waiting for its ready. This method will be removed at v2.0.0 and later.
 
 
-## 更新记录
+## Changelog
 
 [CHANGELOG.md](./CHANGELOG.md)
 

diff --git a/README_CN.md b/README_CN.md
@@ -0,0 +1,128 @@
+[English](./README.md) | 简体中文
+
+vConsole
+==============================
+[![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole) 
+
+一个针对手机网页的前端 console 调试面板。
+
+
+## 简介
+
+vConsole 是一个网页前端调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作。
+
+
+## 手机预览
+
+![](./example/snapshot/qrcode.png)
+
+[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)
+
+![](./example/snapshot/log_panel.png)
+
+
+## 安装
+
+### 1.下载模块
+
+下载文件 `dist/vconsole.min.js` 到本地。
+
+或者使用 `npm` 安装：
+
+```
+npm install vconsole
+```
+
+### 2.引入模块
+
+(1) 如果未使用 AMD/CMD 规范，可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展，建议在 `<head>` 中引入：
+
+```html
+<head>
+	<script src="path/to/vconsole.min.js"></script>
+</head>
+```
+
+(2) 如果使用了 AMD/CMD 规范，可在 module 内使用 `require()` 引入模块：
+
+```javascript
+var vConsole = require('path/to/vconsole.min.js');
+```
+
+
+### 使用方法
+
+(1) 与 PC 端打印 log 一致，可直接使用 `console.log()` 等方法直接打印日志：
+
+```javascript
+console.log('Hello World');
+```
+
+未加载 vConsole 模块时，`console.log()` 会直接打印到原生控制台中；加载 vConsole 后，日志会打印到页面前端+原生控制台。
+
+(2) 支持 5 种不同类型的日志，会以不同的颜色输出到前端面板：
+
+```javascript
+console.log('foo');   // 白底黑字
+console.info('bar');  // 白底紫字
+console.debug('oh');  // 白底黄字
+console.warn('foo');  // 黄底黄字
+console.error('bar'); // 红底红字
+```
+
+(3) 支持打印 Object 或 Array 变量，会以结构化 JSON 形式输出（并折叠）：
+
+```javascript
+var obj = {};
+obj.foo = 'bar';
+console.log(obj);
+/*
+Object
+{
+  foo: "bar"
+}
+*/
+```
+
+(4) 支持传入多个参数，会以空格隔开：
+
+```javascript
+var uid = 233;
+console.log('UserID:', uid); // 打印出 UserID: 233
+```
+
+(5) 支持使用 `[default|system|...]` 的格式将 log 输出到指定面板：
+
+```javascript
+// [xxx] 须写在 log 的最开始
+console.log('[system]', 'foo');
+console.log('[system] bar');
+// 系统面板将打印出两行，分别为 foo 和 bar
+```
+
+目前支持的面板有：
+
+```
+[default] Log 日志（默认）
+[system]  System 系统
+[network] Network 网络
+```
+
+
+## 注意事项
+
+(1) 引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。
+
+若不希望普通用户看到面板，请不要在生产环境中引入 vConsole 模块。动态引入模块的方法可参考 `example/demo2.php` 示例。
+
+(2) 从 v1.2.0 开始，弃用 `vConsole.ready()` 接口。引入 vConsole 后，无须等待即可立即使用 `console.log()` 等方法输出日志。
+
+
+## 更新记录
+
+[CHANGELOG.md](./CHANGELOG_CN.md)
+
+
+## License
+
+The MIT License (http://opensource.org/licenses/MIT)
diff --git a/dist/vconsole.min.js b/dist/vconsole.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A virtual console panel for mobile page",
   "homepage": "https://github.com/WechatFE/vConsole",
   "main": "dist/vconsole.min.js",