# 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/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_log.jpg)[](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_network.jpg)[](https://github.com/Tencent/vConsole/blob/a377da79b378fda7f51d896284806dcb377ebb7b/example/snapshot/panel_element.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)
