Commit 6c1997f5 authored by sam.x.wang's avatar sam.x.wang

桔子堆页面和bug修改

parent 19c33697
......@@ -32,7 +32,7 @@
AND tms_period <= #{tbCondition.periodEnd,jdbcType=INTEGER}
</if>
<if test="tbCondition.containsAdjustmentTable!=null">
AND contains_adjustment_table = #{tbCondition.containsAdjustmentTable,jdbcType=BYTE}
AND contains_adjustment_table = #{tbCondition.containsAdjustmentTable}
</if>
</sql>
......
......@@ -4,9 +4,11 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="vConsole-3.3.0/dist/vconsole.min.js"></script>
<script>
//获取地址栏参数,name:参数名称
var vConsole = new VConsole();
console.log('Hello world');
window.str="";
var z =function getUrlParms(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
......@@ -28,7 +30,8 @@
sc("ddTicket",ddTicket);
var ReUrl="https://me.xiaojukeji.com/project/stargate-auth/html/login.html?redirect_uri=http%3A%2F%2Fmis.diditaxi.com.cn%2Fauth%3Fapp_id%3D2500%26version%3D1.0%26jumpto%3Dhttp://dts-test.erp.didichuxing.com/orangeweb/index.html%26callback_index%3D0"
var ReUrl ="http://mis.diditaxi.com.cn/auth/sso/login?app_id=2500&jumpto=http://dts-test.erp.didichuxing.com/orangeweb/index.html";
if(ddTicket==undefined || ddTicket=="" || ddTicket == null){
document.location=ReUrl;
......
node_modules
*.DS_Store
*.log
.idea/
English | [简体中文](./CHANGELOG_CN.md)
#### V3.3.0 (2019-02-02)
- [FEATURE] Add the ability to collapse the same log.
- [FIX] Fix issue which formatted log (like `console.log('[foo]', 'bar')`) will not display in Log tab.
#### V3.2.2 (2019-01-17)
- [FEATURE] Add console command prompt. (by @65147400)
- [FEATURE] Add SessionStorage support in Storage tab. (by @hkc452)
- [FIX] Fix `JSON.stringify` function which was incorrectly rewritten.
- [FIX] Fix `logNumber` bug which was not reset when clear logs. (by @liuyuekeng)
- [FIX] Fix unencoded HTML tag in Network tab. (by @mokang)
- [FIX] Fix possible crash when decode content in Storage tab. (by @wolfsilver)
- [FIX] Fix CSP buy cause by `nonce` attribute. (by @scotthuang)
- [IMPROVE] Add bottom safe area to adapt to full screen such as iPhone X. (by @dingyi1993)
#### V3.2.0 (2018-04-10)
- [FEATURE] Support `console.time()` and `console.timeEnd()`.
- [FEATRUE] Add `disableLogScrolling` (in `vConsole.option`).
- [FIX] Fix `setOption()` error.
- [FIX] Fix cookies' value wrong display.
- [FIX] Fix "Uncaught InvalidStateError". (by @fireyy)
#### V3.1.0 (2017-12-27)
- [FEATURE] Add `vConsole.showSwitch()` and `vConsole.hideSwitch()` methods, see [Public Properties & Methods](./doc/public_properties_methods.md).
- [FEATURE] Add `onReady` and `onClearLog` callback function to `vConsole.option`.
- [FEATURE] Auto clear logs when `console.clear()` is called.
- [FIX] Fix `\r` error when build in Windows.
- [FIX] Fix `Symbol` error in iOS8 or other old OS.
#### V3.0.0 (2017-09-27)
Basic:
- [FEATRUE] Require manual init vConsole `var vConsole = new VConsole(option)`.
- [FEATRUE] Add configuaration `vConsole.option`, which can be set when `new VConsole` or `setOption(key, value)`.
- [FEATURE] Support for custom loading of default built-in plugins by using `defaultPlugins` in the above option.
- [FEATURE] Add `setOption(key, value)` method.
- [IMPROVE] Support CSP rule `unsafe-eval` and `unsafe-inline`.
- [IMPROVE] Optimize `font-size` when `initial-scale < 1`.
Log plugin:
- [FEATURE] Support `maxLogNumber` option to limit maximum log number.
- [FIX] Fix the crash caused by printing large objects.
- [IMPROVE] Only the logs written as `console.log('[system]', xxx)` will be shown in System tab, so `console.log('[system] xxx')` will be shown in default log tab.
Network plugin:
- [FEATURE] Support `Query String Parameters` and `Form Data`.
- [IMPROVE] Auto format JSON response.
- [FIX] Fix bug that XHR status is always "Pending" when using 3rd HTTP libraries.
Plugins:
- [FEATURE] Plugins can get vConsole instance by `this.vConsole` on/after `init` event is called.
- [FEATURE] Add `updateOption` event to detect `vConsole.option` changes.
- [FEATURE] Add Element tab as a built-in plugin.
- [FEATURE] Add Storage tab as a built-in plugin.
## V2.x.x
#### V2.5.2 (2016-12-27)
- [FIX] Catch errors when eval custom commands in Log tab.
#### V2.5.1 (2016-10-18)
- [FIX] Fix `scrollHeight` error in some cases.
- [FIX] Fix flex layout in iOS 8 devices.
- [IMPROVE] Performance enhancement.
#### V2.5.0 (2016-09-28)
- [FEATURE] Add `vConsole.removePlugin()` method, see [Public Properties & Methods](./doc/public_properties_methods.md).
- [FEATURE] Add `remove` plugin event, see [Plugin: Event List](./doc/plugin_event_list.md).
- [IMPROVE] Disable page scrolling while vConsole is scrolling.
- [FIX] Fix `window.onerror()` typo.
#### V2.4.0 (2016-08-31)
- [FEATURE] Add `addTopBar` plugin event, see [Plugin: Event List](./doc/plugin_event_list.md).
- [FEATURE] Add log type filter to Log & System tab.
- [IMPROVE] Log list will not automatically scroll to bottom while printing new logs if the viewport is not at the end of list.
- [IMPROVE] Fix UI bugs.
- [FIX] Fix XSS issue when print object logs.
- [FIX] Switch button will not be positioned out of edges in some special cases.
#### V2.3.1 (2016-08-16)
- [FIX] Replace custom `tap` event (in V2.3.0) with `click` event (still support fast response) to prevent conflicts.
- [IMPROVE] Remove `now` item and add `navigationStart` time in System tab.
#### V2.3.0 (2016-08-15)
- [FEATURE] Objects or Arrays can be expended layer by layer.
- [FEATURE] All object's properties, including private properties, can be enumerable now.
- [IMPROVE] Support `tap` event within vConsole's DOM container to speed up `click` event.
#### 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.
- [FEATURE] Add `xhr._noVConsole` property to `XMLHttpRequest` objects to customize whether a XHR should display in Network tab.
#### V2.1.0 (2016-06-29)
- [FEATURE] Add `vConsole.tool` & `vConsole.$` helper functions, see [Helper Functions](./doc/helper_functions.md).
- [FEATURE] Public properties & methods of vConsole are available, see [Public Properties & Methods](./doc/public_properties_methods.md).
- [FIX] Fix issue that `error` in `window.onerror()` may be undefined.
- [FIX] Fix error that `xhr.status` may be unavailable when `xhr.readyState < 4`.
#### 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.
#### 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.
# v1.x.x
#### v1.3.0 (2016-05-20)
- [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.
#### 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)
- [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.
#### v1.0.4 (2016-04-28)
- [FIX] Fix the `main` path in `package.json`.
- [IMPROVE] Update demo pages.
#### v1.0.2 (2016-04-27)
- Initial release.
\ No newline at end of file
[English](./CHANGELOG.md) | 简体中文
#### V3.3.0 (2019-02-02)
- 【特效】新增自动合并相同日志的能力。频繁输出相同日志时不再会被刷屏。
- 【修复】修复格式化日志(如 `console.log('[foo]', 'bar')`)无法显示到 Log 面板的问题。
#### V3.2.2 (2019-01-17)
- 【特性】新增控制台输入提示。 (by @65147400)
- 【特性】支持 SessionStorage。 (by @hkc452)
- 【修复】修复 `JSON.stringify` 函数被错误地改写的问题。
- 【修复】修复清空日志时没有重置 `logNumber` 的问题。 (by @liuyuekeng)
- 【修复】修复 Network 面板中 HTML 标签未被 encode 的问题。 (by @mokang)
- 【修复】修复 Storage 面板 decode 内容时可能会导致崩溃的问题。 (by @wolfsilver)
- 【修复】修复 CSP 签名获取失败问题。 (by @scotthuang)
- 【优化】增加底部安全区域,适配 iPhone X 等全面屏。 (by @dingyi1993)
#### V3.2.0 (2018-04-10)
- 【特性】支持 `console.time()``console.timeEnd()`
- 【特性】新增 `disableLogScrolling` 配置项(`vConsole.option`),用于禁止新日志引起的自动滚动到底部。
- 【修复】修复初始化后立即调用 `setOption` 引起的错误。
- 【修复】修复 cookies 显示错误的问题。
- 【修复】修复 "Uncaught InvalidStateError" 错误。 (by @fireyy)
#### V3.1.0 (2017-12-27)
- 【特性】新增 `vConsole.showSwitch()``vConsole.hideSwitch()` 方法,请查阅[公共属性及方法](./doc/public_properties_methods_CN.md)
- 【特性】新增 `onReady``onClearLog` 回调方法,位于 `vConsole.option`
- 【特性】调用 `console.clear` 时将自动清除面板中的日志。
- 【修复】修复 Windows 下构建引起的 `\r` 转义问题。
- 【修复】修复 iOS8 或其它低版本系统中的 `Symbol` 错误。
#### V3.0.0 (2017-09-27)
基础:
- 【特性】需要手动初始化 vConsole:`var vConsole = new VConsole(option)`
- 【特性】新增 `vConsole.option` 配置项,配置项可在实例化时传入,也可通过 `vConsole.setOption(key, value)` 更新。
- 【特性】支持自定义按需加载内置插件,配置项为 `option` 里的 `defaultPlugins` 字段。
- 【优化】支持 CSP 规则 `unsafe-eval``unsafe-inline`
- 【优化】优化 `initial-scale < 1` 时的 `font-size`
Log 插件:
- 【特性】支持 `maxLogNumber` 配置项,以控制面板内展示的最多日志数量。
- 【修复】修复打印大型复杂 object 时引起的崩溃问题。
- 【优化】只有 `console.log('[system]', xxx)` 这种将 `[system]` 放在第一位参数的写法,才会输出到 System 面板。因此可以规避 `[foo] bar` 这类格式无法正确打印到 Log 面板的问题。
Network 插件:
- 【特性】新增 `Query String Parameters``Form Data` 两栏,以展示 GET 和 POST 的参数。
- 【优化】自动格式化展示 JSON 类型的回包。
- 【修复】修复 status 一直为 "Pending" 的问题。这种问题一般是引入了第三方的 HTTP 库而引起的。
插件模块:
- 【特性】在 `init` 事件触发时/之后,插件实例内可以通过 `this.vConsole` 来获取到 vConsole 的对象实例。
- 【特性】新增 `updateOption` 事件,以监测 `vConsole.option` 的更新。
- 【特性】新增 Element 面板作为默认的内置插件。
- 【特性】新增 Storage 面板作为默认的内置插件。
## V2.x.x
#### V2.5.2 (2016-12-27)
- 【修复】捕获执行自定义命令行时发生的错误。
#### V2.5.1 (2016-10-18)
- 【修复】修复一些情况下的 `scrollHeight` 错误。
- 【修复】修正 iOS 8 下的 flex 布局问题。
- 【优化】性能增强。
#### V2.5.0 (2016-09-28)
- 【特性】新增 `vConsole.removePlugin()` 方法,请查阅[公共属性及方法](./doc/public_properties_methods_CN.md)
- 【特性】新增 `remove` 插件事件,请查阅[插件:Event 事件列表](./doc/plugin_event_list_CN.md)
- 【优化】页面不会随着 vConsole 的滚动而滚动。
- 【修复】修正 `window.onerror()` 内的函数调用笔误。
#### V2.4.0 (2016-08-31)
- 【特性】新增 `addTopBar` 插件事件,请查阅[插件:Event 事件列表](./doc/plugin_event_list_CN.md)
- 【特性】新增日志类型筛选功能。
- 【优化】若 log 列表不处于最底部,当打印新 log 时,列表则不会自动滚动到最新 log 处。
- 【优化】优化了一些 UI 样式问题。
- 【修复】修正打印 object 类型 log 时的 XSS 问题。
- 【修复】在某些特殊情况中,开关按钮将不会再被定位出页面外。
#### V2.3.1 (2016-08-16)
- 【修复】删除 V2.3.0 中的 `tap` 事件,恢复为 `click` 事件(依旧支持快速响应),以避免冲突。
- 【优化】删除 System tab 中的 `now` 项目并新增 `navigationStart` 时间戳。
#### V2.3.0 (2016-08-15)
- 【特性】支持逐级展开 Object 或 Array 的子元素。
- 【特性】支持显示 Object 内的不可枚举属性。
- 【优化】支持在 vConsole 的 DOM 容器内使用 `tap` 事件以代替 `click` 事件。
#### V2.2.1 (2016-08-08)
- 【特性】在 System 面板中添加完整的 performance timing 测速点。
- 【新增】在 README 中新增第三方插件列表。
#### V2.2.0 (2016-07-13)
- 【特性】新增 `vConsole.version` 属性,以获取当前版本号。
- 【特性】新增 `XMLHttpRequest``xhr._noVConsole` 属性,以控制一个网络请求是否显示在 Network tab 中。
#### v2.1.0 (2016-06-29)
- 【特性】新增 `vConsole.tool``vConsole.$` 辅助函数,请查阅[辅助函数](./doc/helper_functions_CN.md)
- 【特性】公开部分 vConsole 的属性及方法,请查阅[公共属性及方法](./doc/public_properties_methods_CN.md)
- 【修复】修复 `window.onerror()``error` 可能为空而导致堆栈读取错误的问题。
- 【修复】修复当 `xhr.readyState < 4` 时读取 `xhr.status` 可能导致错误的问题。
#### v2.0.1 (2016-06-16)
- 【修复】修复 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 的问题。
# v1.x.x
#### v1.3.0 (2016-05-20)
- 【新增】支持拖拽右下角开关。
- 【修复】修复异步加载导致初始化失败的问题。
#### v1.2.1 (2016-05-16)
- 【修复】修复发送 POST 请求时丢失数据的问题。
#### 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)
- 初始发布。
\ No newline at end of file
Tencent is pleased to support the open source community by making vConsole available.
Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
If you have downloaded a copy of the vConsole binary from Tencent, please note that the vConsole binary is licensed under the MIT License.
If you have downloaded a copy of the vConsole source code from Tencent, please note that vConsole source code is licensed under the MIT License, except for the third-party components listed below which are subject to different license terms. Your integration of vConsole into your own projects may require compliance with the MIT License, as well as the other licenses applicable to the third-party components included within vConsole.
A copy of the MIT License is included in this file.
\ No newline at end of file
English | [简体中文](./README_CN.md)
vConsole
==============================
[![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole)
A lightweight, extendable front-end developer tool for mobile web page.
## Features
- View console logs
- View network requests
- View document elements
- View Cookies, LocalStorage and SessionStorage
- Execute JS command manually
- Custom plugin
## Usage
Download the [latest release](https://github.com/Tencent/vConsole/releases/latest). (DO NOT copy `dist/vconsole.min.js` in the dev branch)
Or, install via npm:
```
npm install vconsole
```
Import `dist/vconsole.min.js` to your project:
```html
<script src="path/to/vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
```
See [Tutorial](./doc/tutorial.md) for more details.
## Preview
![](./example/snapshot/qrcode.png)
[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)
![](./example/snapshot/log_panel.png)
## Documentation
vConsole:
- [Tutorial](./doc/tutorial.md)
- [Public Properties & Methods](./doc/public_properties_methods.md)
- [Helper Functions](./doc/helper_functions.md)
Plugin:
- [Plugin: Getting Started](./doc/plugin_getting_started.md)
- [Plugin: Building a Plugin](./doc/plugin_building_a_plugin.md)
- [Plugin: Event List](./doc/plugin_event_list.md)
## Plugins
- [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
- [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)
## Changelog
[CHANGELOG.md](./CHANGELOG.md)
## Feedback
QQ Group: 497430533
![](./example/snapshot/qq_group.png)
## License
[The MIT License](./LICENSE)
[English](./README.md) | 简体中文
vConsole
==============================
[![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole)
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
## 特性
- 查看 console 日志
- 查看网络请求
- 查看页面 element 结构
- 查看 Cookies、localStorage 和 SessionStorage
- 手动执行 JS 命令行
- 自定义插件
## 上手
下载 vConsole 的[最新版本](https://github.com/Tencent/vConsole/releases/latest)。(不要直接下载 dev 分支下的 `dist/vconsole.min.js`
或者使用 npm 安装:
```
npm install vconsole
```
引入 `dist/vconsole.min.js` 到项目中:
```html
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
```
详细使用方法请参阅[使用教程](./doc/tutorial_CN.md)
## 手机预览
![](./example/snapshot/qrcode.png)
[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)
![](./example/snapshot/log_panel.png)
## 文档
vConsole 本体:
- [使用教程](./doc/tutorial_CN.md)
- [公共属性及方法](./doc/public_properties_methods_CN.md)
- [辅助函数](./doc/helper_functions_CN.md)
插件:
- [插件:入门](./doc/plugin_getting_started_CN.md)
- [插件:编写插件](./doc/plugin_building_a_plugin_CN.md)
- [插件:Event 事件列表](./doc/plugin_event_list_CN.md)
## 插件列表
- [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
- [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)
## 更新记录
[CHANGELOG_CN.md](./CHANGELOG_CN.md)
## 交流反馈
QQ 群:497430533
![](./example/snapshot/qq_group.png)
## License
[The MIT License](./LICENSE)
This diff is collapsed.
English | [简体中文](./a_doc_index_CN.md)
Documentation Index
==============================
## vConsole
- [Tutorial](./tutorial.md)
- [Public Properties & Methods](./public_properties_methods.md)
- [Helper Functions](./helper_functions.md)
## Plugin
- [Plugin: Getting Started](./plugin_getting_started.md)
- [Plugin: Building a Plugin](./plugin_building_a_plugin.md)
- [Plugin: Event List](./plugin_event_list.md)
\ No newline at end of file
[English](./a_doc_index.md) | 简体中文
文档索引
==============================
## vConsole 本体
- [使用教程](./tutorial_CN.md)
- [公共属性及方法](./public_properties_methods_CN.md)
- [辅助函数](./helper_functions_CN.md)
## Plugin 插件
- [插件:入门](./plugin_getting_started_CN.md)
- [插件:编写插件](./plugin_building_a_plugin_CN.md)
- [插件:Event 事件列表](./plugin_event_list_CN.md)
\ No newline at end of file
Helper Functions
==============================
vConsole provides some useful helper functions for efficient plugin development.
Helper functions are mounted in different vConsole properties according to their usage:
- `vConsole.tool`: Helper functions.
- `vConsole.$`: DOM-related functions.
## vConsole.tool
### vConsole.tool.isString(value)
### vConsole.tool.isArray(value)
### vConsole.tool.isBoolean(value)
### vConsole.tool.isElement(value)
### vConsole.tool.isFunction(value)
### vConsole.tool.isNull(value)
### vConsole.tool.isNumber(value)
### vConsole.tool.isObject(value)
### vConsole.tool.isSymbol(value)
### vConsole.tool.isUndefined(value)
Check whether a value is a certain type.
##### Return:
- Boolean
### vConsole.tool.htmlEncode(text)
Encode a text into a HTML non-sensitive string.
##### Parameters:
- (required) text: A string to be encoded.
##### Return:
- String
### vConsole.tool.setStorage(key, value)
Set data to `localStorage`. A prefix `vConsole_` will be added to `key` automatically.
Note that some devices may not have `localStorage` and then `value` would not be saved under this situation, so DO NOT use this method to save permanent data.
##### Parameters:
- (required) key: A string, the name of data.
- (required) value: A string, the value of data.
##### Return:
- None
##### Example:
```javascript
vConsole.tool.setStorage('count', 1);
```
### vConsole.tool.getStorage(key)
Get data from `localStorage`. A prefix `vConsole_` will be added to `key` automatically.
##### Parameters:
- (required) key: A string, the name of data.
##### Return:
- String, the value of data.
##### Example:
```javascript
var num = vConsole.tool.setStorage('count'); // => 1
```
## vConsole.$
### vConsole.$.one(selectors, baseElement)
Returns the first element within the document or baseElement that matches the specified group of selectors.
##### Parameters:
- (required) selectors: A string containing one or more CSS selectors separated by commas.
- (optional) baseElement: An element object, default to be `document`.
##### Return:
- Element object
##### Example:
```javascript
var $page = vConsole.$.one('#my_page');
var $item = vConsole.$.one('.item', $page);
```
### vConsole.$.all(selectors, baseElement)
Returns a list of elements within the document or baseElement that matches the specified group of selectors.
##### Parameters:
- (required) selectors: A string containing one or more CSS selectors separated by commas.
- (optional) baseElement: An element object, default to be `document`.
##### Return:
- Element object
##### Example:
```javascript
var $page = vConsole.$.one('#my_page');
var $items = vConsole.$.all('.item', $page);
```
### vConsole.$.addClass(elements, className)
Add the specified class(es) to element(s).
##### Parameters:
- (required) elements: A single or a list of element object(s).
- (required) className: A string of one or more space-separated classes.
##### Return:
- None
##### Example:
```javascript
var $items = vConsole.$.all('.item');
vConsole.$.addClass($items, 'selected');
```
### vConsole.$.removeClass(elements, className)
Remove the specified class(es) of element(s).
##### Parameters:
- (required) elements: A single or a list of element object(s).
- (required) className: A string of one or more space-separated classes.
##### Return:
- None
##### Example:
```javascript
var $items = vConsole.$.all('.item');
vConsole.$.removeClass($items, 'selected');
```
### vConsole.$.hasClass(element, className)
Check whether an element is assigned the given class.
##### Parameters:
- (required) element: An element object.
- (required) className: A string.
##### Return:
- Boolean
##### Example:
```javascript
var $page = vConsole.$.one('#my_page');
if (vConsole.$.hasClass($page, 'actived')) {
// do something
}
```
### vConsole.$.bind(elements, eventType, fn, useCapture)
Bind an event to element(s).
##### Parameters:
- (required) elements: A single or a list of element object(s).
- (required) eventType: A string of event's type.
- (required) fn: A function to execute when the event is triggered.
- (optional) useCapture: A boolean that indicates the event uses capturing or bubbling, default to be `false`.
##### Return:
- None
##### Example:
```javascript
var $btn = vConsole.$.one('#submit');
vConsole.$.bind($btn, 'click', function(event) {
event.preventDefault();
alert('submit!');
});
```
### vConsole.$.delegate(element, eventType, selectors, fn)
Bind an event to an element, and only this element's descendants which match the selectors can trigger the event.
##### Parameters:
- (required) element: An element object.
- (required) eventType: A string of event's type.
- (required) selectors: A string containing one or more CSS selectors separated by commas.
- (required) fn: A function to execute when the event is triggered.
##### Return:
- None
##### Example:
```javascript
var $page = vConsole.$.one('#my_page');
vConsole.$.delegate($page, 'click', '.item', function(event) {
vConsole.$.addClass(this, 'selected'); // this => '.item'
});
```
### vConsole.$.render(tpl, data, toString)
Compile a template into an element object or a HTML string with given data.
##### Parameters:
- (required) tpl: A template string.
- (required) data: A key-value data which is used to render the template.
- (optional) toString: A boolean that indicates whether returns an element object or a HTML string, default to be `false`.
##### Return:
- Element object or HTML string
##### Syntax:
If:
```html
{{if}}
...
{{else}}
...
{{/if}}
```
For:
```html
{{for (var i=0; i<10; i++)}}
...
{{continue}}
{{break}}
{{/for}}
```
Switch:
```html
{{switch (flag)}}
{{case 1}}
...
{{break}}
{{default}}
...
{{/switch}}
```
Print:
```html
{{flag}}
```
###### Example:
```javascript
var tpl = '<ul>' +
'{{for (var i = 0; i < list.length; i++)}}' +
'<li>' + '{{list[i]}}' + '</li>' +
'{{/for}}' +
'</ul>';
var data = {
list: ['Red', 'Blue', 'Yellow']
};
var html = vConsole.$.render(tpl, data, true);
document.body.innerHTML += html;
```
Output:
```html
<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
```
[Back to Index](./a_doc_index.md)
\ No newline at end of file
辅助函数
==============================
vConsole 提供一些辅助函数以便开发插件。
辅助函数会按照类型,挂载到 vConsole 的不同属性中:
- `vConsole.tool`:辅助函数。
- `vConsole.$`:DOM 操作相关函数。
## vConsole.tool
### vConsole.tool.isString(value)
### vConsole.tool.isArray(value)
### vConsole.tool.isBoolean(value)
### vConsole.tool.isElement(value)
### vConsole.tool.isFunction(value)
### vConsole.tool.isNull(value)
### vConsole.tool.isNumber(value)
### vConsole.tool.isObject(value)
### vConsole.tool.isSymbol(value)
### vConsole.tool.isUndefined(value)
判断变量是否为指定的类型。
##### 返回:
- Boolean
### vConsole.tool.htmlEncode(text)
将文本转为 HTML 安全的字符串。
##### 参数:
- (required) text: 字符串。
##### 返回:
- String
### vConsole.tool.setStorage(key, value)
将数据写入 `localStorage`。前缀 `vConsole_` 会自动加到 `key` 之前。
在一些设备中,`localStorage` 可能不存在,因此 `value` 将无法正常存储。所以不要使用此方法来保存持久性数据。
##### 参数:
- (required) key: 字符串,数据的键名。
- (required) value: 字符串,数据的键值。
##### 返回:
-
##### 例子:
```javascript
vConsole.tool.setStorage('count', 1);
```
### vConsole.tool.getStorage(key)
获取 `localStorage` 的数据。前缀 `vConsole_` 会自动加到 `key` 之前。
##### 参数:
- (required) key: A string, the name of data.
##### 返回:
- String
##### 例子:
```javascript
var num = vConsole.tool.setStorage('count'); // => 1
```
## vConsole.$
### vConsole.$.one(selectors, baseElement)
获取在 `document``baseElement` 中匹配 `selectors` 的首个 element 元素。
##### 参数:
- (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
- (optional) baseElement: Element 对象,默认为 `document`.
##### 返回:
- Element object
##### 例子:
```javascript
var $page = vConsole.$.one('#my_page');
var $item = vConsole.$.one('.item', $page);
```
### vConsole.$.all(selectors, baseElement)
获取在 `document``baseElement` 中匹配 `selectors` 的所有 element 元素。
##### 参数:
- (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
- (optional) baseElement: Element 对象,默认为 `document`.
##### 返回:
- Element object
##### 例子:
```javascript
var $page = vConsole.$.one('#my_page');
var $items = vConsole.$.all('.item', $page);
```
### vConsole.$.addClass(elements, className)
为一个或一组 element 添加 class 样式名。
##### 参数:
- (required) elements: 单个或一个数组的 element 对象。
- (required) className: 字符串,多个样式名以空格隔开。
##### 返回:
-
##### 例子:
```javascript
var $items = vConsole.$.all('.item');
vConsole.$.addClass($items, 'selected');
```
### vConsole.$.removeClass(elements, className)
为一个或一组 element 删除 class 样式名。
##### 参数:
- (required) elements: 单个或一个数组的 element 对象。
- (required) className: 字符串,多个样式名以空格隔开。
##### 返回:
-
##### 例子:
```javascript
var $items = vConsole.$.all('.item');
vConsole.$.removeClass($items, 'selected');
```
### vConsole.$.hasClass(element, className)
判断一个 element 对象是否有指定的样式名。
##### 参数:
- (required) element: Element 对象。
- (required) className: 字符串。
##### 返回:
- Boolean
##### 例子:
```javascript
var $page = vConsole.$.one('#my_page');
if (vConsole.$.hasClass($page, 'actived')) {
// do something
}
```
### vConsole.$.bind(elements, eventType, fn, useCapture)
绑定一个事件到一个或一组 element。
##### 参数:
- (required) elements: 单个或一个数组的 element 对象。
- (required) eventType: 字符串,事件类型。
- (required) fn: 事件回调函数。
- (optional) useCapture: 布尔值,用于设定是使用 capturing 还是 bubbling。默认为 `false`.
##### 返回:
-
##### 例子:
```javascript
var $btn = vConsole.$.one('#submit');
vConsole.$.bind($btn, 'click', function(event) {
event.preventDefault();
alert('submit!');
});
```
### vConsole.$.delegate(element, eventType, selectors, fn)
绑定一个事件到一个 element 中,只有匹配 selecors 的子元素才会触发事件。
##### 参数:
- (required) element: Element 对象。
- (required) eventType: 字符串,事件类型。
- (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
- (required) fn: 事件回调函数。
##### 返回:
-
##### 例子:
```javascript
var $page = vConsole.$.one('#my_page');
vConsole.$.delegate($page, 'click', '.item', function(event) {
vConsole.$.addClass(this, 'selected'); // this => '.item'
});
```
### vConsole.$.render(tpl, data, toString)
Compile a template into an element object or a HTML string with given data.
使用指定数据将模板文本编译成 element 对象或者 HTML 字符串。
##### 参数:
- (required) tpl: 模板字符串。
- (required) data: 一组 key-value 形式的数据源。
- (optional) toString: 布尔值,用于设定返回值为 element 对象还是 HTML 字符串,默认为 `false`
##### 返回:
- Element 对象或者 HTML 字符串
##### 模板语法:
If:
```html
{{if}}
...
{{else}}
...
{{/if}}
```
For:
```html
{{for (var i=0; i<10; i++)}}
...
{{continue}}
{{break}}
{{/for}}
```
Switch:
```html
{{switch (flag)}}
{{case 1}}
...
{{break}}
{{default}}
...
{{/switch}}
```
Print:
```html
{{flag}}
```
###### 例子:
```javascript
var tpl = '<ul>' +
'{{for (var i = 0; i < list.length; i++)}}' +
'<li>' + '{{list[i]}}' + '</li>' +
'{{/for}}' +
'</ul>';
var data = {
list: ['Red', 'Blue', 'Yellow']
};
var html = vConsole.$.render(tpl, data, true);
document.body.innerHTML += html;
```
输出:
```html
<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>
```
[返回索引](./a_doc_index_CN.md)
\ No newline at end of file
Plugin: Building a Plugin
==============================
3 steps to build a plugin:
- create an vConsole plugin object
- bind plugin events to this object
- add this object to vConsole
## 1. Create plugin object
Make sure you have imported vConsole, then simply `new` an instance of class `VConsolePlugin`:
```javascript
VConsole.VConsolePlugin(id, name)
```
- `id` (required) is an unique string.
- `name` (optional) is a string used for tab's display name.
Example:
```javascript
var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');
```
## 2. Bind plugin events
While installing and running a plugin, vConsole will trigger some events to allow a plugin customizing it's functions.
use `.on()` to bind an event:
```javascript
on(eventName, callback)
```
- `eventName` (required) is a string.
- `callback` (required) is a callback function when an event is triggered.
Example:
```javascript
myPlugin.on('init', function() {
console.log('My plugin init');
});
```
See [Event List](./plugin_event_list.md) to learn more about each event.
In this tutorial, we'd like to build a plugin with a tab and a tool button.
To add a tab, use `renderTab` event:
```javascript
myPlugin.on('renderTab', function(callback) {
var html = '<div>Click the tool button below!</div>';
callback(html);
});
```
`renderTab` will be triggered while a plugin is being initialized. We simply pass a HTML string to `callback`, then this HTML will be rendered as the content of a new tab, which name is `name`.
To add a tool button, use `addTool` event:
```javascript
myPlugin.on('addTool', function(callback) {
var button = {
name: 'Reload',
onClick: function(event) {
location.reload();
}
};
callback([button]);
});
```
Again, `addTool` will be triggered during initialized, after `renderTab`. It's `callback` receives an `array` of tool button list. We make a button which can reload the current page.
## 3. Add to vConsole
The final step is add your new plugin to vConsole:
```javascript
vConsole.addPlugin(pluginObject)
```
`pluginObject` (required) is an `VConsolePlugin` object.
Example:
```javascript
vConsole.addPlugin(myPlugin);
```
Make sure you have finish binding all necessary events to your plugin before adding to vConsole. Some events (related to initialization) would not be trigger for second time after adding.
[Back to Index](./a_doc_index.md)
\ No newline at end of file
插件:编写插件
==============================
3 步即可编写一个 vConsole 插件:
- 实例化 vConsole 插件
- 绑定事件到插件
- 将插件添加到 vConsole
## 1. 实例化插件
插件原型挂载在 `VConsole.VConsolePlugin` 中:
```javascript
VConsole.VConsolePlugin(id, name)
```
- `id` (必填) 字符串,插件的 id,必须保证唯一,不能与其他插件冲突。
- `name` (选填) 字符串,展示为 tab 面板的名字。
所以这一步只需将插件 `new` 出来即可:
```javascript
var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');
```
## 2. 绑定插件事件
在初始化插件、后续运行时,vConsole 会对插件触发一些事件(event)。插件须通过这些事件来完成自定义功能。
使用 `.on()` 方法来绑定一个事件:
```javascript
on(eventName, callback)
```
- `eventName` (必填) 字符串,事件的名字。
- `callback` (必填) 回调函数,事件被触发时执行。
例子:
```javascript
myPlugin.on('init', function() {
console.log('My plugin init');
});
```
关于每个事件的具体功效,请查阅[Event 事件列表](./plugin_event_list_CN.md)
在本教程中,我们准备编写一个既有 tab 面板,又有 tool 按钮(位于面板底部)的插件。
添加新 tab 面板,需要绑定 `renderTab` 事件:
```javascript
myPlugin.on('renderTab', function(callback) {
var html = '<div>Click the tool button below!</div>';
callback(html);
});
```
插件初始化过程中,就会触发 `renderTab` 事件。在这里我们简单地回传了一个 HTML 字符串给 `callback`,然后这段 HTML 就会被选染成新 tab 面板的主体部分。这个新 tab 的名字就是刚才实例化时的 `name`
此外,若不绑定 `renderTab`,那么 vConsole 就不会添加新 tab。
接下来要添加一个底部的 tool 按钮,需要绑定 `addTool` 事件:
```javascript
myPlugin.on('addTool', function(callback) {
var button = {
name: 'Reload',
onClick: function(event) {
location.reload();
}
};
callback([button]);
});
```
同样地,`addTool` 会在插件初始化过程中触发,且在 `renderTab` 之后。回调函数 `callback` 的参数接收一个 `array` 数组,数组元素是用于配置按钮的 `object` 对象。本例中,点击这个按钮会重新加载当前网页。
## 3. 添加到 vConsole
最后一步,就是将写好的插件添加到 vConsole 中:
```javascript
vConsole.addPlugin(pluginObject)
```
`pluginObject` (必填) 必须为 `VConsolePlugin` 实例化的对象。
例子:
```javascript
vConsole.addPlugin(myPlugin);
```
在添加到 vConsole 之前,请确保已经绑定完所有需要用到的事件。一些初始化相关的事件只会在插件被添加时触发一次,并不会在其他时机被触发。
[返回索引](./a_doc_index_CN.md)
\ No newline at end of file
Plugin: Event List
==============================
All events are optional. But some features (like adding tool buttons) are depended on specific events.
Each event has a callback function, which will be called when event is triggered.
## init
Trigger before starting to initialize a plugin. You can configure plugin's properties in this event. This event will only be trigger once.
Note that plugin's DOM is not ready now.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('init', function() {
// do something to init plugin
this.list = []; // `this` == `myPlugin`
});
```
## renderTab
Trigger while vConsole trying to create a new tab for a plugin. This event will only be triggered once.
After binding this event, vConsole will get HTML from your callback to render a tab. A new tab will definitely be added if you bind this event, no matter what tab's HTML you set. Do not bind this event if you don't want to add a new tab.
##### Callback Arguments:
- (required) function(html): a callback function that receives the content HTML of the new tab. `html` can be a HTML `string` or an `HTMLElement` object (Or object which supports `appendTo()` method, like JQuery object).
##### Example:
```javascript
myPlugin.on('renderTab', function(callback) {
var html = '<div>Hello</div>';
callback(html);
});
```
## addTopBar
Trigger while vConsole trying to add new tab buttons which are under the tab bar. This event will only be triggered once.
#### Callback Arguments:
- (required) function(btnList): a callback function that receives an `array` of tab buttons.
A tab button is an object with properties:
Property | | | |
------- | ------- | ------- | -------
name | string | required | The display name of the button.
data | object | optional | The dataset of the button, key-value format.
className | string | optional | The className of the button.
onClick | function | required | A callback function when user click the button. The target button will automatically be added actived style after this callback unless it returns `false`.
##### Example:
```javascript
var type;
myPlugin.on('addTopBar', function(callback) {
var btnList = [];
btnList.push({
name: 'Apple',
className: '',
data: {type: 'apple'},
onClick: function() {
if (type != this.dataset.type) {
// `this` points to current button
type = this.dataset.type;
} else {
return false;
}
}
});
btnList.push({
name: 'Orange',
className: '',
data: {type: 'orange'},
onClick: function() {
type = this.dataset.type;
}
}
});
callback(btnList);
});
```
## addTool
Trigger while vConsole trying to add new tool buttons for a plugin. This event will only be triggered once.
##### Callback Arguments:
- (required) function(toolList): a callback function that receives an `array` of tool buttons.
A tool button is an object with properties:
Property | | | |
------- | ------- | ------- | -------
name | string | required | The display name of the button.
global | boolean | optional, default `false` | When `false`, the button will be hidden while switching to other tab. When `true`, the button will be available to all tabs.
onClick | function | required | A callback function when user click the button.
##### Example:
```javascript
myPlugin.on('addTool', function(callback) {
var toolList = [];
toolList.push({
name: 'Reload',
global: false,
onClick: function(e) {
location.reload();
}
});
callback(toolList);
});
```
## ready
Trigger when all initialization is finished. This event will only be triggered once.
Now plugin is installed and it's DOM is ready.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('ready', function() {
// do something...
});
```
## remove
Trigger before starting to uninitialize a plugin. This event will only be triggered once.
Note that this event may be called before `init` event if you remove a plugin before vConsole is ready.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('remove', function() {
// do something...
});
```
## show
Trigger when a tab is shown. Only the plugin binded with `renderTab` will receive this event.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('show', function() {
// do something
});
```
## Hide
Trigger when a tab is hidden. Only the plugin binded with `renderTab` will receive this event.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('hide', function() {
// do something
});
```
## showConsole
Trigger when vConsole is shown.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('showConsole', function() {
// do something
});
```
## hideConsole
Trigger when vConsole is hidden.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('hideConsole', function() {
// do something
});
```
## updateOption
Trigger when `vConsole.setOption()` is called.
##### Callback Arguments:
- none
##### Example:
```javascript
myPlugin.on('updateOption', function() {
// do something
});
```
[Back to Index](./a_doc_index.md)
\ No newline at end of file
插件:Event 事件列表
==============================
插件的所有事件(event)都是可选的,不强制绑定。但一些特性(比如添加 tool 按钮)依赖于指定的事件,所以若要实现那些特性,就必须绑定指定的事件。
每个事件都会有一个 callback 回调函数,当事件被触发时,就会执行 callback。一些 callback 可能会带有参数。
## init
当插件开始初始化时触发。这个事件触发时,代表 vConsole 开始安装此插件,开发者可以在此时初始化一些配置。
这个事件只会触发一次。
注意,此时插件的 DOM 仍未就绪,插件还未被渲染到页面中。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('init', function() {
// 在这里可以初始化一些自用的配置
this.list = []; // `this` == `myPlugin`
});
```
## renderTab
当 vConsole 尝试为此插件渲染新 tab 时触发。这个事件只会触发一次。
绑定此事件后,vConsole 会认为此插件需要创建新 tab,并会将 callback 中获取的 HTML 用于渲染 tab。因此,只要绑定了此事件,新 tab 肯定会被渲染到页面中,无论 callback 传入的 HTML 是否为空。如果不需要添加新 tab,请不要绑定此事件。
##### Callback 参数
- (必填) function(html): 回调函数,接收一个 HTML 参数用于渲染 tab。`html` 可以为 HTML 字符串,或者 `HTMLElement` 对象(或支持 `appendTo()` 方法的对象,如 jQuery 对象)。
##### 例子:
```javascript
myPlugin.on('renderTab', function(callback) {
var html = '<div>Hello</div>';
callback(html);
});
```
## addTopBar
当 vConsole 尝试为此插件添加新的 topbar 按钮时触发。这个事件只会触发一次。
#### Callback 参数:
- (必填) function(btnList): 回调函数,接收一个带有按钮配置信息的 `array` 数组。
按钮的参数为:
Property | | | |
------- | ------- | ------- | -------
name | string | 必填 | 按钮展示的名字。
data | object | 选填 | 按钮的 dataset,key-value 格式。
className | string | 选填 | 按钮的 className。
onClick | function | 必填 | 点击按钮时的回调函数。触发回调后,除非回调函数返回 `false`,此按钮将自动变为选中的样式。
##### 例子:
```javascript
var type;
myPlugin.on('addTopBar', function(callback) {
var btnList = [];
btnList.push({
name: 'Apple',
className: '',
data: {type: 'apple'},
onClick: function() {
if (type != this.dataset.type) {
// `this` 指向当前按钮
type = this.dataset.type;
} else {
return false;
}
}
});
btnList.push({
name: 'Orange',
className: '',
data: {type: 'orange'},
onClick: function() {
type = this.dataset.type;
}
}
});
callback(btnList);
});
```
## addTool
当 vConsole 尝试为此插件添加新的 tool 按钮时触发。这个事件只会触发一次。
##### Callback 参数:
- (必填) function(toolList): 回调函数,接收一个带有按钮配置信息的 `array` 数组。
tool 按钮的参数为:
Property | | | |
------- | ------- | ------- | -------
name | string | 必填 | 按钮展示的名字。
global | boolean | 选填,默认 `false` | `false` 时,当切换到别的 tab 后,按钮就会被隐藏;`true` 时,按钮变成全局可见。
onClick | function() | 必填 | 点击按钮时的回调函数。
##### 例子:
```javascript
myPlugin.on('addTool', function(callback) {
var toolList = [];
toolList.push({
name: 'Reload',
global: false,
onClick: function(e) {
location.reload();
}
});
callback(toolList);
});
```
## ready
当插件初始化结束后触发。这个事件只会触发一次。此时插件已经成功安装并已渲染到页面。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('ready', function() {
// do something...
});
```
## remove
当插件即将卸载前触发。这个事件只会触发一次。
需要注意的是,如果在 vConsole ready 之前就卸载插件,那么此事件会在 `init` 之前就被调用。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('remove', function() {
// do something...
});
```
## show
当插件的 tab 被显示时触发。只有绑定了 `renderTab` 事件的插件才会收到此事件。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('show', function() {
// do something
});
```
## Hide
当插件的 tab 被隐藏时触发。只有绑定了 `renderTab` 事件的插件才会收到此事件。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('hide', function() {
// do something
});
```
## showConsole
当 vConsole 被显示时触发。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('showConsole', function() {
// do something
});
```
## hideConsole
当 vConsole 被隐藏时触发。
##### Callback 参数:
-
##### 例子:
```javascript
myPlugin.on('hideConsole', function() {
// do something
});
```
## updateOption
`vConsole.setOption()` 被调用时触发
##### Callback 参数:
- none
##### 例子:
```javascript
myPlugin.on('updateOption', function() {
// do something
});
```
[返回索引](./a_doc_index_CN.md)
\ No newline at end of file
Plugin: Getting Started
==============================
A plugin allows you to:
- add a new tab
- add one or more tool button(s)
You can customize the functions of the tab and buttons.
## Quick Start
Two lines to create a vConsole plugin:
```javascript
var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');
vc.addPlugin(myPlugin);
```
The above plugin has no function. See [Building a Plugin](./plugin_building_a_plugin.md) for more details.
[Back to Index](./a_doc_index.md)
\ No newline at end of file
插件:入门
==============================
通过插件,你可以:
- 添加一个新的 tab 面板
- 添加一个或多个 tool 按钮(位于面板底部)
在 tab 和 tool 按钮中,即可添加自定义功能,以满足个性化开发的需要。
## 快速上手
两行创建一个 vConsole 插件:
```javascript
var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin');
vc.addPlugin(myPlugin);
```
当然,上面的插件并无任何功能。请继续阅读[编写插件](./plugin_building_a_plugin_CN.md)来了解细节。
[返回索引](./a_doc_index_CN.md)
\ No newline at end of file
Public Properties & Methods
==============================
Some useful vConsole properties and methods are available for plugin development.
## Properties
### vConsole.version
The current version of vConsole.
- Readonly
- Type: string
Example:
```javascript
vConsole.version // => "3.1.0"
```
### vConsole.option
A configuration object.
- Writable
- Type: object
Key | Type | Optional | Default value | Description
--------------------- | -------- | -------- | ------------------------------------------- | -------------------
defaultPlugins | Array | true | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole.
onReady | Function | true | | Trigger after vConsole is inited and default plugins is loaded.
onClearLog | Function | true | | Trigger after click "Clear" button in Log and System panel.
maxLogNumber | Number | true | 1000 | Overflow logs will be removed from log tabs.
disableLogScrolling | Boolean | true | | If `false`, panel will not scroll to bottom while printing new logs.
Example:
```javascript
// get
vConsole.option // => {...}
// set
vConsole.setOption('maxLogNumber', 5000);
// or:
vConsole.setOption({maxLogNumber: 5000});
```
### vConsole.activedTab
The actived tab's plugin id.
- Readonly
- Type: string
- Default: "default"
Example:
```javascript
vConsole.activedTab // => "system"
```
### vConsole.tabList
A list of installed tabs' plugin id.
- Readonly
- Type: array(string)
Example:
```javascript
vConsole.tabList // => ["default", "system"]
```
### vConsole.$dom
vConsole's HTML element.
- Type: HTMLDivElement
## Methods
### vConsole.setOption(keyOrObj[, value])
Update `vConsole.option`.
##### Parameters:
- (required) keyOrObj: The key of option, or a key-value object.
- (optional) value: The value of an option.
##### Return:
- None
##### Example:
```javascript
vConsole.setOption('maxLogNumber', 5000);
// or:
vConsole.setOption({maxLogNumber: 5000});
```
### vConsole.destroy()
Destroy an vConsole instance object and remove vConsole panel from document.
##### Parameters:
- None
##### Return:
- None
##### Example:
```javascript
var vConsole = new VConsole();
// ... do something
vConsole.destroy();
```
### vConsole.addPlugin(plugin)
Add a new plugin to vConsole. Duplicate plugin will be ignored.
##### Parameters:
- (required) plugin: An VConsolePlugin object.
##### Return:
- Boolean: `true` for success, `false` for failure.
##### Example:
```javascript
var myPlugin = new VConsolePlugin('my_plugin', 'My Plugin');
vConsole.addPlugin(myPlugin);
```
### vConsole.removePlugin(pluginID)
Remove an existing plugin.
##### Parameters:
- (required) pluginID: A string, plugin's id.
##### Return:
- Boolean: `true` for success, `false` for failure.
##### Example:
```javascript
vConsole.removePlugin('my_plugin');
```
### vConsole.showTab(pluginID)
Activating a tab according to its plugin id.
Plugin event `hide` will be triggered for previous actived tab, and `show` for current actived tab.
##### Parameters:
- (required) pluginID: A string, tab's plugin id.
##### Return:
- None
##### Example:
```javascript
vConsole.showTab("system"); // show System tab
```
### vConsole.show()
Show vConsole panel. This method will trigger plugin event `showConsole`.
##### Parameters:
- None
##### Return:
- None
##### Example:
```javascript
vConsole.show();
```
### vConsole.hide()
Hide vConsole panel. This method will trigger plugin event `hideConsole`.
##### Parameters:
- None
##### Return:
- None
##### Example:
```javascript
vConsole.hide();
```
### vConsole.showSwitch()
Show vConsole switch button.
##### Parameters:
- None
##### Return:
- None
##### Example:
```javascript
vConsole.showSwitch();
```
### vConsole.hideSwitch()
Hide vConsole switch button.
After the button is hidden, the user will not be able to call vConsole manually. The button or panel must be shown programmably via `vConsole.showSwitch()` or `vConsole.show()`.
##### Parameters:
- None
##### Return:
- None
##### Example:
```javascript
vConsole.hideSwitch();
```
[Back to Index](./a_doc_index.md)
\ No newline at end of file
公共属性及方法
==============================
vConsole 提供一些公共属性字段、函数方法,以便开发插件。
## 属性
### vConsole.version
当前 vConsole 的版本号。
- 只读
- 类型:string
例子:
```javascript
vConsole.version // => "3.1.0"
```
### vConsole.option
配置项。
- 可写
- 类型:object
键名 | 类型 | 可选 | 默认值 | 描述
--------------------- | -------- | -------- | ------------------------------------------- | -------------------
defaultPlugins | Array | true | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。
onReady | Function | true | | 回调方法,当 vConsole 完成初始化并加载完内置插件后触发。
onClearLog | Function | true | | 回调方法,点击 Log 或 System 面板的 "Clear" 按钮后出发。
maxLogNumber | Number | true | 1000 | 超出上限的日志会被自动清除。
disableLogScrolling | Boolean | true | | 若为 `false`,有新日志时面板将不会自动滚动到底部。
例子:
```javascript
// get
vConsole.option // => {...}
// set
vConsole.setOption('maxLogNumber', 5000);
// 或者:
vConsole.setOption({maxLogNumber: 5000});
```
### vConsole.activedTab
当前激活的 tab 的 plugin id。
- 只读
- 类型:string
- 默认值:"default"
例子:
```javascript
vConsole.activedTab // => "system"
```
### vConsole.tabList
已安装的 tab 的 plugin id 列表。
- 只读
- 类型:array(string)
例子:
```javascript
vConsole.tabList // => ["default", "system"]
```
### vConsole.$dom
vConsole 的 HTML element。
- 类型:HTMLDivElement
## 方法
### vConsole.setOption(keyOrObj[, value])
更新 `vConsole.option` 配置项。
##### 参数:
- (required) keyOrObj: 配置项的 key 值,或直接传入 key-value 格式的 object 对象。
- (optional) value: 配置项的 value 值。
##### 返回:
-
##### 例子:
```javascript
vConsole.setOption('maxLogNumber', 5000);
// 或者:
vConsole.setOption({maxLogNumber: 5000});
```
### vConsole.destroy()
析构一个 vConsole 对象实例,并将 vConsole 面板从页面中移除。
##### 参数:
-
##### 返回:
-
##### 例子:
```javascript
var vConsole = new VConsole();
// ... do something
vConsole.destroy();
```
### vConsole.addPlugin(plugin)
添加一个新插件。重名的插件会被忽略。
##### 参数:
- (required) plugin: 一个 VConsolePlugin 对象。
##### 返回:
- Boolean: 成功为 `true`,失败为 `false`
##### 例子:
```javascript
var myPlugin = new VConsolePlugin('my_plugin', 'My Plugin');
vConsole.addPlugin(myPlugin);
```
### vConsole.removePlugin(pluginID)
卸载一个插件。
##### 参数:
- (required) pluginID: 插件的 plugin id。
##### 返回:
- Boolean: 成功为 `true`,失败为 `false`
##### 例子:
```javascript
vConsole.removePlugin('my_plugin');
```
### vConsole.showTab(pluginID)
根据 plugin id 激活显示一个 tab。
此方法会触发先前激活态 tab 的 `hide` 事件,并触发当前激活态 tab 的 `show` 事件。
##### 参数:
- (required) pluginID: 字符串,tab 的 plugin id。
##### 返回:
-
##### 例子:
```javascript
vConsole.showTab("system"); // 显示 System tab
```
### vConsole.show()
显示 vConsole 主面板。这个方法会触发插件事件 `showConsole`
##### 参数:
-
##### 返回:
-
##### 例子:
```javascript
vConsole.show();
```
### vConsole.hide()
隐藏 vConsole 主面板。这个方法会触发插件事件 `hideConsole`
##### 参数:
-
##### 返回:
-
##### 例子:
```javascript
vConsole.hide();
```
### vConsole.showSwitch()
显示 vConsole 的开关按钮。
##### 参数:
-
##### 返回:
-
##### 例子:
```javascript
vConsole.showSwitch();
```
### vConsole.hideSwitch()
隐藏 vConsole 的开关按钮
隐藏后,用户将无法手动唤起 vConsole 面板。因此按钮或面板必须通过 `vConsole.showSwitch()``vConsole.show()` 来展示出来。
##### 参数:
-
##### 返回:
-
##### 例子:
```javascript
vConsole.hideSwitch();
```
[返回索引](./a_doc_index_CN.md)
\ No newline at end of file
English | [简体中文](./tutorial_CN.md)
Tutorial
==============================
## Installation
### 1. Download
Download the [latest release](https://github.com/WechatFE/vConsole/releases/latest) of vConsole.
Or, install via `npm` :
```
npm install vconsole
```
Then save `dist/vconsole.min.js` to your project.
### 2. Import
(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>
<script>
var vConsole = new VConsole();
</script>
</head>
```
(2) Under AMD/CMD rule, use `require()` to import vConsole.
```javascript
var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();
```
Notice that `VConsole` is the prototype of vConsole. So vConsole panel will not be inserted into your page until you `new` it manually.
## Usage
### Initialization & Configuaration
After imported, vConsole should be inited manually:
```javascript
var vConsole = new VConsole(option);
```
`option` is an optional object.
See [Public Properties & Methods](./public_properties_methods.md) for definition.
Use `setOption()` to update `option`:
```javascript
vConsole.setOption('maxLogNumber', 5000);
// or:
vConsole.setOption({maxLogNumber: 5000});
```
### Print logs
Use the methods of `console` to print logs, just like what you do at desktop browsers:
```javascript
console.log('Hello World');
```
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.
### Styles
5 types of log method are supported, with different styles:
```javascript
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
```
### Other methods
Supported `console` methods:
```javascript
console.time('foo'); // start a timer named "foo"
console.timeEnd('foo'); // stop "foo" timer and print the elapsed time
```
### Formatted object / array
Object or Array variable will be printed as formatted JSON:
```javascript
var obj = {};
obj.foo = 'bar';
console.log(obj);
/*
Object
{
foo: "bar"
}
*/
```
### Polymorphic
Multiple arguments are supported, each variable will be divided by a space:
```javascript
var uid = 233;
console.log('UserID:', uid); // UserID: 233
```
### Special format
Use `[system]` as the first parameter to print logs to System tab:
```javascript
console.log('[system]', 'foo'); // 'foo' will be printed to System tab
console.log('[system] bar'); // this log will show in Log tab instead of System tab
```
## Built-in Plugins
### Network
All `XMLHttpRequest` requests will be displayed in Network tab by default.
To prevent the display, add `_noVConsole = true` to XHR object:
```javascript
var xhr = new XMLHttpRequest();
xhr._noVConsole = true; // now this request would not be displayed in tab
xhr.open("GET", 'http://example.com/');
xhr.send();
```
[Goto: Documentation Index](./a_doc_index.md)
\ No newline at end of file
[English](./tutorial.md) | 简体中文
使用教程
==============================
## 安装
### 1.下载模块
下载 vConsole 的[最新版本](https://github.com/WechatFE/vConsole/releases/latest)
或者使用 `npm` 安装:
```
npm install vconsole
```
然后复制 `dist/vconsole.min.js` 到自己的项目中。
### 2.引入模块
(1) 如果未使用 AMD/CMD 规范,可直接在 HTML 中引入 vConsole 模块。为了便于后续扩展,建议在 `<head>` 中引入:
```html
<head>
<script src="path/to/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>
</head>
```
(2) 如果使用了 AMD/CMD 规范,可在 module 内使用 `require()` 引入模块:
```javascript
var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();
```
请注意,`VConsole` 只是 vConsole 的原型,而非一个已实例化的对象。所以在手动 `new` 实例化之前,vConsole 不会被插入到网页中。
## 使用方法
### 初始化 & 配置
引入后, 需要手动初始化 vConsole:
```javascript
var vConsole = new VConsole(option);
```
`option` 是一个选填的 object 对象,具体配置定义请参阅 [公共属性及方法](./public_properties_methods_CN.md)
使用 `setOption()` 来更新 `option`
```javascript
vConsole.setOption('maxLogNumber', 5000);
// 或者:
vConsole.setOption({maxLogNumber: 5000});
```
### 打印日志
与 PC 端打印 log 一致,可直接使用 `console.log()` 等方法直接打印日志:
```javascript
console.log('Hello World');
```
未加载 vConsole 模块时,`console.log()` 会直接打印到原生控制台中;加载 vConsole 后,日志会打印到页面前端+原生控制台。
### 日志类型
支持 5 种不同类型的日志,会以不同的颜色输出到前端面板:
```javascript
console.log('foo'); // 白底黑字
console.info('bar'); // 白底紫字
console.debug('oh'); // 白底黄字
console.warn('foo'); // 黄底黄字
console.error('bar'); // 红底红字
```
### 其他方法
支持以下 `console` 方法:
```javascript
console.time('foo'); // 启动名为 foo 的计时器
console.timeEnd('foo'); // 停止 foo 计时器并输出经过的时间
```
### Object/Array 结构化展示
支持打印 Object 或 Array 变量,会以结构化 JSON 形式输出(并折叠):
```javascript
var obj = {};
obj.foo = 'bar';
console.log(obj);
/*
Object
{
foo: "bar"
}
*/
```
### 多态
支持传入多个参数,会以空格隔开:
```javascript
var uid = 233;
console.log('UserID:', uid); // 打印出 UserID: 233
```
### 特殊格式
支持使用 `[system]` 作为第一个参数,来将 log 输出到 System 面板:
```javascript
console.log('[system]', 'foo'); // 'foo' 会输出到 System 面板
console.log('[system] bar'); // 这行日志会输出到 Log 面板而非 System 面板
```
若编写自定义 log 面板插件,亦可通过上述格式将 log 输出到自定义面板:
```javascript
console.log('[myplugin]', 'bar'); // 'myplugin' 为自定义面板插件的 id
```
## 内置插件
### Network 网络
所有 `XMLHttpRequest` 请求都会被显示到 Network tab 中。
若不希望一个请求显示在面板中,可添加属性 `_noVConsole = true` 到 XHR 对象中:
```javascript
var xhr = new XMLHttpRequest();
xhr._noVConsole = true; // 不会显示到 tab 中
xhr.open("GET", 'http://example.com/');
xhr.send();
```
[前往:文档索引](./a_doc_index_CN.md)
<?php
header('Content-Type: application/json; charset=utf-8');
$data = array('msg' => '收到一个AJAX回包,可在[Network]中查看');
echo json_encode($data);
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>vConsole/Demo1</title>
<link href="./lib/weui.min.css" rel="stylesheet"/>
<link href="./lib/demo.css" rel="stylesheet"/>
<script src="./lib/zepto.min.js"></script>
<script src="./lib/zepto.touch.min.js"></script>
<!-- 引入vConsole的JS库 -->
<script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
<div class="page">
<h1 class="page_title">Demo 1</h1>
<div class="weui_text_area">
<p class="weui_msg_desc">点击下面的按钮,即可打印 log。<br/>点击右下角按钮,即可查看 log。</p>
</div>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="log">普通日志(log)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="info">信息日志(info)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="debug">调试日志(debug)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="warn">警告日志(warn)</a>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log" data-type="error">报错日志(error)</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_obj">打印Object</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_trigger_error">触发JS Error</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_log_sys">打印到系统面板</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_get">发起AJAX(GET)</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_ajax_post">发起AJAX(POST)</a>
<a href="javascript:;" class="weui_btn weui_btn_default js_btn_clear">清除日志</a>
<a href="javascript:;" class="weui_btn weui_btn_warn js_btn_hideswitch">隐藏按钮</a>
<a href="javascript:;" class="weui_btn weui_btn_warn js_btn_destroy">销毁vConsole</a>
</div>
<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>
<script>
// 初始化vConsole
window.vConsole = new window.VConsole({
defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
maxLogNumber: 1000,
// disableLogScrolling: true,
onReady: function() {
console.log('vConsole is ready.');
},
onClearLog: function() {
console.log('on clearLog');
}
});
console.info('欢迎使用 vConsole。vConsole 是一个由微信公众平台前端团队研发的 Web 前端开发者面板,可用于展示 console 日志,方便开发、调试。');
$('.js_btn_log').on('tap', function(e) {
var type = $(this).data('type');
console[type](type); // 例如,console.log(type)
showTips();
});
$('.js_btn_log_obj').on('tap', function(e) {
var obj = {
'foo': 'bar',
'obj': {'bool': true},
'arr': [9, 8, 7],
'tips': 'JS对象可以折叠展示'
};
console.log(obj);
showTips();
});
$('.js_btn_trigger_error').on('tap', function(e) {
showTips();
var err = undefined;
err.a = 1;
});
$('.js_btn_log_sys').on('tap', function(e) {
// 输出到系统面板
console.log('[system]', '当前时间戳:', (+new Date()));
showTips();
});
$('.js_btn_ajax_get').on('tap', function(e) {
// 发起一个AJAX
$.get('ajax.php', { id: Math.random(), action: 'Get' }, function(resp) {
console.log(resp);
});
showTips();
});
$('.js_btn_ajax_post').on('tap', function(e) {
// 发起一个AJAX
$.post('ajax.php', { id: Math.random(), action: 'Post' }, function(resp) {
console.log(resp);
});
showTips();
});
$('.js_btn_clear').on('tap', function(e) {
console.clear();
});
$('.js_btn_hideswitch').on('tap', function(e) {
var that = this;
if ($(this).hasClass('weui_btn_disabled')) {
return false;
}
$(this).addClass('weui_btn_disabled');
window.vConsole.hideSwitch();
var count = 6;
var cb = function() {
count--;
if (count == 0) {
window.vConsole.showSwitch();
$(that).removeClass('weui_btn_disabled');
$(that).html('隐藏按钮');
clearInterval(timer);
return;
}
$(that).html('隐藏按钮(' + count + ')');
}
cb();
var timer = setInterval(cb, 1000);
});
$('.js_btn_destroy').on('tap', function(e) {
if ($(this).hasClass('weui_btn_disabled')) {
return false;
}
$('.weui_btn').addClass('weui_btn_disabled');
window.vConsole.destroy();
$(this).html('刷新页面以重载vConsole');
});
// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$('#js_tips').show();
tipsTimer = setTimeout(function() {
$('#js_tips').hide();
}, 1500);
}
</script>
</html>
\ No newline at end of file
<?php
// 这个demo示例如何通过PHP动态加载vConsole
// (1)访问 demo2.php 时(一般情况),不加载vConsole
// (2)访问 demo2.php?dev_mode=1 时(调试模式),加载vConsole
$dev_mode = isset($_GET['dev_mode']) ? $_GET['dev_mode'] : '0';
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>vConsole/Demo2</title>
<link href="./lib/weui.min.css" rel="stylesheet"/>
<link href="./lib/demo.css" rel="stylesheet"/>
<script src="./lib/zepto.min.js"></script>
<script src="./lib/zepto.touch.min.js"></script>
<?php if ($dev_mode == '1') { ?>
<!-- 引入vConsole的JS库 -->
<script src="../dist/vconsole.min.js"></script>
<script>
// 初始化vConsole
window.vConsole = new window.VConsole();
</script>
<?php } ?>
</head>
<body ontouchstart>
<div class="page">
<h1 class="page_title">Demo 2</h1>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log">Hello World</a>
</div>
<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>
<script>
$('.js_btn_log').on('tap', function(e) {
// 打印log时无须判断是否为dev_mode,
// 未加载vConsole时,console.log()不会显示到前台
console.log('Hello World');
showTips();
});
// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$('#js_tips').show();
tipsTimer = setTimeout(function() {
$('#js_tips').hide();
}, 1500);
}
</script>
</html>
\ No newline at end of file
<?php
// 这个demo用于测试CSP的规则
$nonce = rand(10000, 99999);
header("Content-Security-Policy: script-src 'self' 'unsafe-inline' 'unsafe-eval' 'nonce-" . $nonce . "';");
?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>vConsole/Demo3</title>
<link href="./lib/weui.min.css" rel="stylesheet"/>
<link href="./lib/demo.css" rel="stylesheet"/>
<!-- <script src="./lib/zepto.min.js" nonce="<?php echo $nonce; ?>"></script>
<script src="./lib/zepto.touch.min.js" nonce="<?php echo $nonce; ?>"></script> -->
<!-- 引入vConsole的JS库 -->
<script src="../dist/vconsole.min.js" nonce="<?php echo $nonce; ?>"></script>
<script nonce="<?php echo $nonce; ?>">
// 初始化vConsole
window.vConsole = new window.VConsole();
</script>
</head>
<body>
<div class="page">
<h1 class="page_title">Demo 3</h1>
<a href="javascript:;" class="weui_btn weui_btn_primary js_btn_log">Hello World</a>
</div>
<div class="weui_toptips weui_notice" id="js_tips">已打印log</div>
</body>
<script nonce="<?php echo $nonce; ?>">
$('.js_btn_log').on('tap', function(e) {
// 打印log时无须判断是否为dev_mode,
// 未加载vConsole时,console.log()不会显示到前台
console.log('Hello World');
showTips();
});
// 用于页面内展示顶部tips
var tipsTimer;
function showTips() {
tipsTimer && clearTimeout(tipsTimer);
$('#js_tips').show();
tipsTimer = setTimeout(function() {
$('#js_tips').hide();
}, 1500);
}
</script>
</html>
\ No newline at end of file
html, body {
height: 100%;
}
.page {
padding: 25px 15px 60px;
height: 100%;
background-color: #fbf9fe;
-webkit-tap-highlight-color: transparent;
}
.page_title {
color: #225fba;
text-align: center;
font-size: 34px;
font-weight: 400;
margin: 0 15%;
}
.weui_toptips.weui_notice {
background-color: #FFBE00;
}
.weui_text_area {
margin: 15px 0 25px;
padding: 0 20px;
text-align: center;
}
.weui_msg_desc {
font-size: 14px;
color: #888;
}
.weui_extra_area {
margin-bottom: 15px;
font-size: 14px;
color: #888;
}
.weui_extra_area a {
color: #61749B;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
// Zepto.js
// (c) 2010-2016 Thomas Fuchs
// Zepto.js may be freely distributed under the MIT license.
!function(a){function i(a,b,c,d){return Math.abs(a-b)>=Math.abs(c-d)?a-b>0?"Left":"Right":c-d>0?"Up":"Down"}function j(){f=null,b.last&&(b.el.trigger("longTap"),b={})}function k(){f&&clearTimeout(f),f=null}function l(){c&&clearTimeout(c),d&&clearTimeout(d),e&&clearTimeout(e),f&&clearTimeout(f),c=d=e=f=null,b={}}function m(a){return("touch"==a.pointerType||a.pointerType==a.MSPOINTER_TYPE_TOUCH)&&a.isPrimary}function n(a,b){return a.type=="pointer"+b||a.type.toLowerCase()=="mspointer"+b}var c,d,e,f,h,b={},g=750;a(document).ready(function(){var o,p,s,t,q=0,r=0;"MSGesture"in window&&(h=new MSGesture,h.target=document.body),a(document).bind("MSGestureEnd",function(a){var c=a.velocityX>1?"Right":a.velocityX<-1?"Left":a.velocityY>1?"Down":a.velocityY<-1?"Up":null;c&&(b.el.trigger("swipe"),b.el.trigger("swipe"+c))}).on("touchstart MSPointerDown pointerdown",function(d){(!(t=n(d,"down"))||m(d))&&(s=t?d:d.touches[0],d.touches&&1===d.touches.length&&b.x2&&(b.x2=void 0,b.y2=void 0),o=Date.now(),p=o-(b.last||o),b.el=a("tagName"in s.target?s.target:s.target.parentNode),c&&clearTimeout(c),b.x1=s.pageX,b.y1=s.pageY,p>0&&250>=p&&(b.isDoubleTap=!0),b.last=o,f=setTimeout(j,g),h&&t&&h.addPointer(d.pointerId))}).on("touchmove MSPointerMove pointermove",function(a){(!(t=n(a,"move"))||m(a))&&(s=t?a:a.touches[0],k(),b.x2=s.pageX,b.y2=s.pageY,q+=Math.abs(b.x1-b.x2),r+=Math.abs(b.y1-b.y2))}).on("touchend MSPointerUp pointerup",function(f){(!(t=n(f,"up"))||m(f))&&(k(),b.x2&&Math.abs(b.x1-b.x2)>30||b.y2&&Math.abs(b.y1-b.y2)>30?e=setTimeout(function(){b.el.trigger("swipe"),b.el.trigger("swipe"+i(b.x1,b.x2,b.y1,b.y2)),b={}},0):"last"in b&&(30>q&&30>r?d=setTimeout(function(){var d=a.Event("tap");d.cancelTouch=l,b.el.trigger(d),b.isDoubleTap?(b.el&&b.el.trigger("doubleTap"),b={}):c=setTimeout(function(){c=null,b.el&&b.el.trigger("singleTap"),b={}},250)},0):b={}),q=r=0)}).on("touchcancel MSPointerCancel pointercancel",l),a(window).on("scroll",l)}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(b){a.fn[b]=function(a){return this.on(b,a)}})}(Zepto);
\ No newline at end of file
This diff is collapsed.
{
"name": "vconsole",
"version": "3.3.0",
"description": "A lightweight, extendable front-end developer tool for mobile web page.",
"homepage": "https://github.com/Tencent/vConsole",
"main": "dist/vconsole.min.js",
"scripts": {
"test": "mocha",
"dist": "webpack"
},
"keywords": [
"console",
"debug",
"mobile"
],
"repository": {
"type": "git",
"url": "git+https://github.com/Tencent/vConsole.git"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-export-namespace-from": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.4",
"babel-plugin-add-module-exports": "^1.0.0",
"chai": "^4.2.0",
"css-loader": "^2.1.0",
"html-loader": "^0.5.5",
"jsdom": "^13.2.0",
"json-loader": "^0.5.7",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mocha": "^5.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1"
},
"author": "Tencent",
"license": "MIT"
}
<div id="__vconsole" class="">
<div class="vc-switch">vConsole</div>
<div class="vc-mask">
</div>
<div class="vc-panel">
<div class="vc-tabbar">
</div>
<div class="vc-topbar">
</div>
<div class="vc-content">
</div>
<div class="vc-toolbar">
<a class="vc-tool vc-global-tool vc-tool-last vc-hide">Hide</a>
</div>
</div>
</div>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
<a class="vc-tab" data-tab="{{id}}" id="__vc_tab_{{id}}">{{name}}</a>
\ No newline at end of file
<div class="vc-logbox" id="__vc_log_{{id}}">
</div>
\ No newline at end of file
<a class="vc-tool vc-tool-{{pluginID}}">{{name}}</a>
\ No newline at end of file
<a class="vc-toptab vc-topbar-{{pluginID}}{{if (className)}} {{className}}{{/if}}">{{name}}</a>
\ No newline at end of file
/*
Tencent is pleased to support the open source community by making vConsole available.
Copyright (C) 2017 THL A29 Limited, a Tencent company. All rights reserved.
Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://opensource.org/licenses/MIT
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
/**
* vConsole Element Tab
*/
import './style.less';
import VConsolePlugin from '../lib/plugin.js';
import tplTabbox from './tabbox.html';
import NodeView from './node_view.js';
import * as tool from '../lib/tool.js';
import $ from '../lib/query.js';
class VConsoleElementsTab extends VConsolePlugin {
constructor(...args) {
super(...args);
let that = this;
that.isInited = false;
that.node = {};
that.$tabbox = $.render(tplTabbox, {});
that.nodes = [];
that.activedElem = {}; // actived by user
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
that.observer = new MutationObserver(function(mutations) {
for (let i=0; i<mutations.length; i++) {
let mutation = mutations[i];
if (that._isInVConsole(mutation.target)) {
continue;
}
that.onMutation(mutation);
}
});
}
onRenderTab(callback) {
callback(this.$tabbox);
}
onAddTool(callback) {
let that = this;
let toolList = [{
name: 'Expand',
global: false,
onClick: function(e) {
if (that.activedElem) {
if (!$.hasClass(that.activedElem, 'vc-toggle')) {
// $.addClass(that.activedElem, 'vc-toggle');
$.one('.vcelm-node', that.activedElem).click();
} else {
for (let i=0; i<that.activedElem.childNodes.length; i++) {
let $child = that.activedElem.childNodes[i];
if ($.hasClass($child, 'vcelm-l') && !$.hasClass($child, 'vcelm-noc') && !$.hasClass($child, 'vc-toggle')) {
$.one('.vcelm-node', $child).click();
break;
}
}
}
}
}
}, {
name: 'Collapse',
global: false,
onClick: function(e) {
if (that.activedElem) {
if ($.hasClass(that.activedElem, 'vc-toggle')) {
$.one('.vcelm-node', that.activedElem).click();
} else {
if (that.activedElem.parentNode && $.hasClass(that.activedElem.parentNode, 'vcelm-l')) {
$.one('.vcelm-node', that.activedElem.parentNode).click();
}
}
}
}
}];
callback(toolList);
}
onShow() {
if (this.isInited) {
return;
}
this.isInited = true;
this.node = this.getNode(document.documentElement);
// console.log(this.node);
// render root view
let $rootView = this.renderView(this.node, $.one('.vc-log', this.$tabbox));
// auto open first level
let $node = $.one('.vcelm-node', $rootView);
$node && $node.click();
// start observing
let config = {
attributes: true,
childList: true,
characterData: true,
subtree: true
};
this.observer.observe(document.documentElement, config);
}
onRemove() {
this.observer.disconnect();
}
// handle mutation
onMutation(mutation) {
// console.log(mutation.type, mutation);
switch (mutation.type) {
case 'childList':
if (mutation.removedNodes.length > 0) {
this.onChildRemove(mutation);
}
if (mutation.addedNodes.length > 0) {
this.onChildAdd(mutation);
}
break;
case 'attributes':
this.onAttributesChange(mutation);
break;
case 'characterData':
this.onCharacterDataChange(mutation);
break;
default:
break;
}
}
onChildRemove(mutation) {
let $parent = mutation.target,
parentNode = $parent.__vconsole_node;
if (!parentNode) {
return;
}
for (let i=0; i<mutation.removedNodes.length; i++) {
let $target = mutation.removedNodes[i],
node = $target.__vconsole_node;
if (!node) {
continue;
}
// remove view
if (node.view) {
node.view.parentNode.removeChild(node.view);
}
}
// update parent node
this.getNode($parent);
}
onChildAdd(mutation) {
let $parent = mutation.target,
parentNode = $parent.__vconsole_node;
// console.log('parentNode', parentNode)
if (!parentNode) {
return;
}
// update parent node
this.getNode($parent);
// update parent view
if (parentNode.view) {
$.removeClass(parentNode.view, 'vcelm-noc');
}
for (let i=0; i<mutation.addedNodes.length; i++) {
let $target = mutation.addedNodes[i],
node = $target.__vconsole_node; // added right now
// console.log('node:', node)
if (!node) {
continue;
}
// create view
if (mutation.nextSibling !== null) {
// insert before it's sibling
let siblingNode = mutation.nextSibling.__vconsole_node;
if (siblingNode.view) {
this.renderView(node, siblingNode.view, 'insertBefore');
}
} else {
// append to parent view
if (parentNode.view) {
if (parentNode.view.lastChild) {
// insert before last child, eg: </tag>
this.renderView(node, parentNode.view.lastChild, 'insertBefore');
} else {
this.renderView(node, parentNode.view);
}
}
}
}
}
onAttributesChange(mutation) {
let node = mutation.target.__vconsole_node;
if (!node) {
return;
}
// update node
node = this.getNode(mutation.target);
// update view
if (node.view) {
this.renderView(node, node.view, true);
}
}
onCharacterDataChange(mutation) {
let node = mutation.target.__vconsole_node;
if (!node) {
return;
}
// update node
node = this.getNode(mutation.target);
// update view
if (node.view) {
this.renderView(node, node.view, true);
}
}
renderView(node, $related, renderMethod) {
let that = this;
let $view = (new NodeView(node)).get();
// connect to node
node.view = $view;
// expand
$.delegate($view, 'click', '.vcelm-node', function(event) {
event.stopPropagation();
let $parent = this.parentNode;
if ($.hasClass($parent, 'vcelm-noc')) {
return;
}
that.activedElem = $parent;
if ($.hasClass($parent, 'vc-toggle')) {
$.removeClass($parent, 'vc-toggle');
} else {
$.addClass($parent, 'vc-toggle');
}
// render child views
let childIdx = -1;
for (let i=0; i<$parent.children.length; i++) {
let $child = $parent.children[i];
if (!$.hasClass($child, 'vcelm-l')) {
// not a child view, skip
continue;
}
childIdx++;
if ($child.children.length > 0) {
// already been rendered, skip
continue;
}
if (!node.childNodes[childIdx]) {
// cannot find related node, hide it
$child.style.display = 'none';
continue;
}
that.renderView(node.childNodes[childIdx], $child, 'replace');
}
});
// output to page
switch (renderMethod) {
case 'replace':
$related.parentNode.replaceChild($view, $related);
break;
case 'insertBefore':
$related.parentNode.insertBefore($view, $related);
break;
default:
$related.appendChild($view);
break;
}
return $view;
}
// convert an element to a simple object
getNode(elem) {
if (this._isIgnoredElement(elem)) {
return undefined;
}
let node = elem.__vconsole_node || {};
// basic node info
node.nodeType = elem.nodeType;
node.nodeName = elem.nodeName;
node.tagName = elem.tagName || '';
node.textContent = '';
if (
node.nodeType == elem.TEXT_NODE ||
node.nodeType == elem.DOCUMENT_TYPE_NODE
) {
node.textContent = elem.textContent;
}
// attrs
node.id = elem.id || '';
node.className = elem.className || '';
node.attributes = [];
if (elem.hasAttributes && elem.hasAttributes()) {
for (let i=0; i<elem.attributes.length; i++) {
node.attributes.push({
name: elem.attributes[i].name,
value: elem.attributes[i].value || ''
});
}
}
// child nodes
node.childNodes = [];
if (elem.childNodes.length > 0) {
for (let i=0; i<elem.childNodes.length; i++) {
let child = this.getNode(elem.childNodes[i]);
if (!child) {
continue;
}
node.childNodes.push(child);
}
}
// save node to element for further actions
elem.__vconsole_node = node;
return node;
}
_isIgnoredElement(elem) {
// empty or line-break text
if (elem.nodeType == elem.TEXT_NODE) {
if (elem.textContent.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$|\n+/g, '') == '') { // trim
return true;
}
}
return false;
}
_isInVConsole(elem) {
let target = elem;
while (target != undefined) {
if (target.id == '__vconsole') {
return true;
}
target = target.parentNode || undefined;
}
return false;
}
} // END class
export default VConsoleElementsTab;
This diff is collapsed.
/* color */
.vcelm-node {
color: #183691;
}
.vcelm-k {
color: #0086B3;
}
.vcelm-v {
color: #905;
}
/* layout */
.vcelm-l {
padding-left: 8px;
position: relative;
word-wrap: break-word;
line-height: 1;
}
/*.vcelm-l.vcelm-noc {
padding-left: 0;
}*/
.vcelm-l.vc-toggle > .vcelm-node {
display: block;
}
.vcelm-l .vcelm-node:active {
background-color: rgba(0,0,0,0.15);
}
.vcelm-l.vcelm-noc .vcelm-node:active {
background-color: transparent;
}
.vcelm-t {
white-space: pre-wrap;
word-wrap: break-word;
}
/* level */
.vcelm-l .vcelm-l {
display: none;
}
.vcelm-l.vc-toggle > .vcelm-l {
margin-left: 4px;
display: block;
}
/* arrow */
.vcelm-l:before {
content: "";
display: block;
position: absolute;
top: 6px;
left: 3px;
width: 0;
height: 0;
border: transparent solid 3px;
border-left-color: #000;
}
.vcelm-l.vc-toggle:before {
display: block;
top: 6px;
left: 0;
border-top-color: #000;
border-left-color: transparent;
}
.vcelm-l.vcelm-noc:before {
display: none;
}
\ No newline at end of file
<div>
<div class="vc-log"></div>
</div>
\ No newline at end of file
<span class="vcelm-node">&lt;/{{node.tagName.toLowerCase()}}&gt;</span>
\ No newline at end of file
<span class="vcelm-node">&lt;{{node.tagName.toLowerCase()}}{{if (node.className || node.attributes.length)}}
<i class="vcelm-k">
{{for (var i = 0; i < node.attributes.length; i++)}}
{{if (node.attributes[i].value !== '')}}
{{node.attributes[i].name}}="<i class="vcelm-v">{{node.attributes[i].value}}</i>"{{else}}
{{node.attributes[i].name}}{{/if}}{{/for}}</i>{{/if}}&gt;</span>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<div id="{{_id}}" class="vc-item vc-item-{{logType}} {{style}}">
<div class="vc-item-content"></div>
</div>
\ No newline at end of file
<pre class="vc-item-code vc-item-code-{{type}}">{{content}}</pre>
\ No newline at end of file
This diff is collapsed.
<span>
<i class="vc-code-key{{if (keyType)}} vc-code-{{keyType}}-key{{/if}}">{{key}}</i>: <i class="vc-code-{{valueType}}">{{value}}</i>
</span>
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment