# vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
## [](https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md#%E7%89%B9%E6%80%A7)特性
* 查看 console 日志
* 查看网络请求
* 查看页面 element 结构
* 查看 Cookies、localStorage 和 SessionStorage
* 手动执行 JS 命令行
* 自定义插件
## [](https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md#%E4%B8%8A%E6%89%8B)上手
下载 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>
~~~
对于 TypeScript,可引入 d.ts 文件:
~~~js
import 'path/to/vconsole.min.d.ts';
~~~
详细使用方法请参阅[使用教程](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/tutorial_CN.md)。
## 手机预览
[http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)
[![](https://github.com/Tencent/vConsole/raw/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_log.jpg)](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_log.jpg)[![](https://github.com/Tencent/vConsole/raw/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_network.jpg)](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_network.jpg)[![](https://github.com/Tencent/vConsole/raw/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_element.jpg)](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_element.jpg)[![](https://github.com/Tencent/vConsole/raw/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_storage.jpg)](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_storage.jpg)
## [](https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md#%E6%96%87%E6%A1%A3)文档
vConsole 本体:
* [使用教程](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/tutorial_CN.md)
* [公共属性及方法](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/public_properties_methods_CN.md)
* [辅助函数](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/helper_functions_CN.md)
插件:
* [插件:入门](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/plugin_getting_started_CN.md)
* [插件:编写插件](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/plugin_building_a_plugin_CN.md)
* [插件:Event 事件列表](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/doc/plugin_event_list_CN.md)
## [](https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md#%E6%8F%92%E4%BB%B6%E5%88%97%E8%A1%A8)插件列表
* [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
* [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)
* [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)
## [](https://github.com/Tencent/vConsole/blob/HEAD/README_CN.md#%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95)更新记录
[CHANGELOG\_CN.md](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/CHANGELOG_CN.md)