Merge pull request Tencent#47 from Maizify/dev

v2.2.1

CHANGELOG.md

@@ -1,5 +1,11 @@
 English | [简体中文](./CHANGELOG_CN.md)
 
+#### V2.2.1 (2016-08-08)
+
+- [IMPROVE] Add complete performance timing log to System tab.
+- [ADD] Add third-party plugin list to README.
+
+
 #### V2.2.0 (2016-07-13)
 
 - [FEATURE] Add `vConsole.version` property.
@@ -16,66 +22,66 @@ English | [简体中文](./CHANGELOG_CN.md)
 
 #### v2.0.1 (2016-06-16)
 
-- [FIX] Fix error that vConsole may not work at X5 browser engine
-- [FIX] Fix error that `localStorage` is null in some kind of devices
-- [FIX] Fix boolean display error in Log tab
-- [IMPROVE] Improve UI in Android
+- [FIX] Fix error that vConsole may not work at X5 browser engine.
+- [FIX] Fix error that `localStorage` is null in some kind of devices.
+- [FIX] Fix boolean display error in Log tab.
+- [IMPROVE] Improve UI in Android.
 
 
 #### v2.0.0 (2016-06-05)
 
 - [FEATURE] Rebuild completely, support custom plugin, see [Plugin: Getting Started](./doc/plugin_getting_started.md).
-- [FEATURE] Support execute JS command line in Log tab
-- [FEATURE] Support circular structure object in Log and System tab
-- [FEATURE] Support viewing request headers and response in Network tab
-- [IMPROVE] Switch button will not be dragged out of screen
-- [IMPROVE] Auto print User Agent in System tab
-- [IMPROVE] Show log's time in Log and System tab
-- [FIX] Fix issue that getDate() returns a wrong date
-- [FIX] Fix issue that sync AJAX becomes async AJAX
+- [FEATURE] Support execute JS command line in Log tab.
+- [FEATURE] Support circular structure object in Log and System tab.
+- [FEATURE] Support viewing request headers and response in Network tab.
+- [IMPROVE] Switch button will not be dragged out of screen.
+- [IMPROVE] Auto print User Agent in System tab.
+- [IMPROVE] Show log's time in Log and System tab.
+- [FIX] Fix issue that getDate() returns a wrong date.
+- [FIX] Fix issue that sync AJAX becomes async AJAX.
 
 
 
 # v1.x.x
 
 #### v1.3.0 (2016-05-20)
 
-- [ADD] Support Drag and Drop switch button
-- [FIX] Fix initialization failure when loaded asynchronously
+- [ADD] Support Drag and Drop switch button.
+- [FIX] Fix initialization failure when loaded asynchronously.
 
 
 #### v1.2.1 (2016-05-16)
 
-- [FIX] Fix data lost when sending a POST request
+- [FIX] Fix data lost when sending a POST request.
 
 
 #### 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
+- [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)
 
-- [ADD] Support `window.onerror()` to catch exceptions and errors
-- [ADD] Support `[default|system|...]` string to print logs to specific panel
+- [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)
 
-- [FIX] Fix webpack compilation
-- [FIX] Fix XSS when printing HTML string
+- [FIX] Fix webpack compilation.
+- [FIX] Fix XSS when printing HTML string.
 
 
 #### v1.0.4 (2016-04-28)
 
-- [FIX] Fix the `main` path in `package.json`
-- [IMPROVE] Update demo pages
+- [FIX] Fix the `main` path in `package.json`.
+- [IMPROVE] Update demo pages.
 
 
 #### v1.0.2 (2016-04-27)
 
-- Initial release
+- Initial release.

CHANGELOG_CN.md

@@ -1,5 +1,11 @@
 [English](./CHANGELOG.md) | 简体中文
 
+#### V2.2.1 (2016-08-08)
+
+- 【特性】在 System 面板中添加完整的 performance timing 测速点。
+- 【新增】在 README 中新增第三方插件列表。
+
+
 #### V2.2.0 (2016-07-13)
 
 - 【特性】新增 `vConsole.version` 属性，以获取当前版本号。
@@ -16,65 +22,65 @@
 
 #### v2.0.1 (2016-06-16)
 
-- 【修复】修复 vConsole 可能无法运行在 X5 内核浏览器的问题
-- 【修复】修复某些设备不支持 `localStorage` 的问题
-- 【修复】修复布尔值在 Log 面板展示不正确的问题
-- 【优化】优化在 Android 设备下的 UI 表现
+- 【修复】修复 vConsole 可能无法运行在 X5 内核浏览器的问题。
+- 【修复】修复某些设备不支持 `localStorage` 的问题。
+- 【修复】修复布尔值在 Log 面板展示不正确的问题。
+- 【优化】优化在 Android 设备下的 UI 表现。
 
 
 #### v2.0.0 (2016-06-05)
 
 - 【特性】完全重构，支持自定义插件，请查阅[插件：入门](./doc/plugin_getting_started_CN.md)。
-- 【特性】支持手动输入、执行命令行
-- 【特性】支持打印循环引用的对象
-- 【特性】支持在 Network 面板查看请求的 headers 和 response
-- 【优化】开关按钮不会再被拖出屏幕外部
-- 【优化】自动在 System 面板打印 User Agent
-- 【优化】打印 log 时会显示时间
-- 【修复】修复 getDate() 返回错误时间的问题
-- 【修复】修复同步 AJAX 变异步 AJAX 的问题
+- 【特性】支持手动输入、执行命令行。
+- 【特性】支持打印循环引用的对象。
+- 【特性】支持在 Network 面板查看请求的 headers 和 response。
+- 【优化】开关按钮不会再被拖出屏幕外部。
+- 【优化】自动在 System 面板打印 User Agent。
+- 【优化】打印 log 时会显示时间。
+- 【修复】修复 getDate() 返回错误时间的问题。
+- 【修复】修复同步 AJAX 变异步 AJAX 的问题。
 
 
 
 # v1.x.x
 
 #### v1.3.0 (2016-05-20)
 
-- 【新增】支持拖拽右下角开关
-- 【修复】修复异步加载导致初始化失败的问题
+- 【新增】支持拖拽右下角开关。
+- 【修复】修复异步加载导致初始化失败的问题。
 
 #### v1.2.1 (2016-05-16)
 
-- 【修复】修复发送 POST 请求时丢失数据的问题
+- 【修复】修复发送 POST 请求时丢失数据的问题。
 
 
 #### v1.2.0 (2016-05-11)
 
-- 【新增】新增网络面板，可展示 AJAX 请求
-- 【删减】废弃 `vConsole.ready()` 方法
-- 【优化】支持 Object/Array 结构化展示，不再以 JSON 字符串输出
-- 【优化】新增英文 README 及 CHANGELOG 文档
-- 【优化】优化 UI 体验
+- 【新增】新增网络面板，可展示 AJAX 请求。
+- 【删减】废弃 `vConsole.ready()` 方法。
+- 【优化】支持 Object/Array 结构化展示，不再以 JSON 字符串输出。
+- 【优化】新增英文 README 及 CHANGELOG 文档。
+- 【优化】优化 UI 体验。
 
 
 #### v1.1.0 (2016-05-06)
 
-- 【新增】支持 `window.onerror()` 的异常信息捕获
-- 【新增】支持 `[default|system|...]` 日志格式，将 log 输出到指定面板
+- 【新增】支持 `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)
 
-- 初始发布
+- 初始发布。

README.md

@@ -62,6 +62,12 @@ Plugin:
  - [Plugin: Event List](./doc/plugin_event_list.md)
 
 
+## Plugins
+
+ - [vConsole-resources](https://github.com/WechatFE/vConsole-resources)
+ - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
+
+
 ## Changelog
 
 [CHANGELOG.md](./CHANGELOG.md)

README_CN.md

@@ -65,6 +65,13 @@ vConsole 本体：
 
 
 
+## 插件列表
+
+ - [vConsole-resources](https://github.com/WechatFE/vConsole-resources)
+ - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
+
+
+
 ## 更新记录
 
 [CHANGELOG_CN.md](./CHANGELOG_CN.md)

doc/plugin_getting_started.md

@@ -14,7 +14,7 @@ You can customize the functions of the tab and buttons.
 Two lines to create a vConsole plugin:
 
 ```javascript
-var myPlugin = new VConsolePlugin('my_plugin', 'My Plugin');
+var myPlugin = new vConsole.VConsolePlugin('my_plugin', 'My Plugin');
 vConsole.addPlugin(myPlugin);
 ```
 

doc/plugin_getting_started_CN.md

@@ -14,7 +14,7 @@
 两行创建一个 vConsole 插件：
 
 ```javascript
-var myPlugin = new VConsolePlugin('my_plugin', 'My Plugin');
+var myPlugin = new vConsole.VConsolePlugin('my_plugin', 'My Plugin');
 vConsole.addPlugin(myPlugin);
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vconsole",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "A lightweight, extendable front-end developer tool for mobile web page.",
   "homepage": "https://github.com/WechatFE/vConsole",
   "main": "dist/vconsole.min.js",

src/log/system.js

@@ -75,27 +75,50 @@ class VConsoleDefaultTab extends VConsoleLogTab {
     }
     console.info('[system]', 'Protocol:', logMsg);
 
-    // performance related
-    let performance = window.performance || window.msPerformance || window.webkitPerformance;
-
-    // timing
-    if (performance && performance.timing) {
-      let t = performance.timing,
-        start = t.navigationStart;
-      // console.info('[system]', 'debug', 'domainLookupEnd:', (t.domainLookupEnd - start)+'ms');
-      console.info('[system]', 'connectEndTime:', (t.connectEnd - start)+'ms');
-      console.info('[system]', 'responseEndTime:', (t.responseEnd - start)+'ms');
-      // console.info('[system]', 'domComplete:', (t.domComplete - start)+'ms');
-      // console.info('[system]', 'beforeReqTime:', (t.requestStart - start)+'ms');
-      if (t.secureConnectionStart > 0) {
-        console.info('[system]', 'SSL Cost:', (t.connectEnd - t.secureConnectionStart)+'ms');
-      }
-      // console.info('system', 'req&RespTime:', (t.responseEnd - t.requestStart)+'ms');
-      console.info('[system]', 'DomRenderCost:', (t.domComplete - t.domLoading)+'ms');
-    }
-
     // User Agent
     console.info('[system]', 'UA:', ua);
+
+    // performance related
+    // use `setTimeout` to make sure all timing points are available
+    setTimeout(function() {
+      let performance = window.performance || window.msPerformance || window.webkitPerformance;
+
+      // timing
+      if (performance && performance.timing) {
+        let t = performance.timing;
+
+        if (t.navigationStart && t.domainLookupStart) {
+          console.info('[system]', 'navigationCost:', (t.domainLookupStart - t.navigationStart)+'ms');
+        }
+        if (t.domainLookupEnd && t.domainLookupStart) {
+          console.info('[system]', 'dnsCost:', (t.domainLookupEnd - t.domainLookupStart)+'ms');
+        }
+        if (t.connectEnd && t.connectStart) {
+          console.info('[system]', 'tcpCost:', (t.connectEnd - t.connectStart)+'ms');
+        }
+        if (t.connectEnd && t.secureConnectionStart) {
+          console.info('[system]', 'sslCost:', (t.connectEnd - t.secureConnectionStart)+'ms');
+        }
+        if (t.responseStart && t.requestStart) {
+          console.info('[system]', 'requestCost:', (t.responseStart - t.requestStart)+'ms');
+        }
+        if (t.responseEnd && t.responseStart) {
+          console.info('[system]', 'responseCost:', (t.responseEnd - t.responseStart)+'ms');
+        }
+        if (t.domContentLoadedEventStart && t.domLoading) {
+          console.info('[system]', 'domContentCost:', (t.domContentLoadedEventStart - t.domLoading)+'ms');
+        }
+        if (t.domComplete && t.domLoading) {
+          console.info('[system]', 'domCompleteCost:', (t.domComplete - t.domLoading)+'ms');
+        }
+        if (t.loadEventEnd && t.loadEventStart) {
+          console.info('[system]', 'onLoadCost:', (t.loadEventEnd - t.loadEventStart)+'ms');
+        }
+        if (t.navigationStart && t.loadEventEnd) {
+          console.info('[system]', 'totalCost:', (t.loadEventEnd - t.navigationStart)+'ms');
+        }
+      }
+    }, 0);
   }
 
 } // END class