1 | [English](./README.md) | 简体中文
|
2 |
|
3 | vConsole
|
4 | ==============================
|
5 | [![npm version](https://badge.fury.io/js/vconsole.svg)](https://badge.fury.io/js/vconsole)
|
6 |
|
7 | 一个轻量、可拓展、针对手机网页的前端开发者调试面板。
|
8 |
|
9 |
|
10 | ## 特性
|
11 |
|
12 | - 查看 console 日志
|
13 | - 查看网络请求
|
14 | - 查看页面 element 结构
|
15 | - 查看 Cookies、localStorage 和 SessionStorage
|
16 | - 手动执行 JS 命令行
|
17 | - 自定义插件
|
18 |
|
19 |
|
20 | ## 上手
|
21 |
|
22 | 方法一:使用 npm(推荐)
|
23 |
|
24 | ```bash
|
25 | $ npm install vconsole
|
26 | ```
|
27 |
|
28 | Import 并初始化后,即可使用 `console.log` 功能,如 Chrome devtools 上一样。
|
29 |
|
30 | ```javascript
|
31 | import VConsole from 'vconsole';
|
32 |
|
33 | const vConsole = new VConsole();
|
34 | // 或者使用 options 选项初始化
|
35 | const vConsole = new VConsole({ maxLogNumber: 1000 });
|
36 |
|
37 | // 接下来即可照常使用 `console` 等方法
|
38 | console.log('Hello world');
|
39 |
|
40 | // 结束调试后,可移除掉
|
41 | vConsole.destroy();
|
42 | ```
|
43 |
|
44 | 方法二:使用 unpkg 的 CDN 直接插入到 HTML
|
45 |
|
46 | ```html
|
47 | <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
|
48 | <script>
|
49 | // VConsole 默认会挂载到 `window.VConsole` 上
|
50 | var vConsole = new window.VConsole();
|
51 | </script>
|
52 | ```
|
53 |
|
54 | 详细使用方法请参阅[使用教程](./doc/tutorial_CN.md)。
|
55 |
|
56 |
|
57 | ## 手机预览
|
58 |
|
59 | ![](./example/snapshot/qrcode.png)
|
60 |
|
61 | [http://wechatfe.github.io/vconsole/demo.html](http://wechatfe.github.io/vconsole/demo.html)
|
62 |
|
63 | ![](./example/snapshot/panel_log.jpg) ![](./example/snapshot/panel_network.jpg) ![](./example/snapshot/panel_element.jpg) ![](./example/snapshot/panel_storage.jpg)
|
64 |
|
65 |
|
66 |
|
67 | ## 文档
|
68 |
|
69 |
|
70 | vConsole 本体:
|
71 |
|
72 | - [使用教程](./doc/tutorial_CN.md)
|
73 | - [公共属性及方法](./doc/public_properties_methods_CN.md)
|
74 | - [辅助函数](./doc/helper_functions_CN.md)
|
75 |
|
76 | 插件:
|
77 |
|
78 | - [插件:入门](./doc/plugin_getting_started_CN.md)
|
79 | - [插件:编写插件](./doc/plugin_building_a_plugin_CN.md)
|
80 | - [插件:Event 事件列表](./doc/plugin_event_list_CN.md)
|
81 |
|
82 |
|
83 |
|
84 | ## 第三方插件列表
|
85 |
|
86 | - [vConsole-sources](https://github.com/WechatFE/vConsole-sources)
|
87 | - [vconsole-webpack-plugin](https://github.com/diamont1001/vconsole-webpack-plugin)
|
88 | - [vconsole-stats-plugin](https://github.com/smackgg/vConsole-Stats)
|
89 | - [vconsole-vue-devtools-plugin](https://github.com/Zippowxk/vue-vconsole-devtools)
|
90 | - [vconsole-outputlog-plugin](https://github.com/sunlanda/vconsole-outputlog-plugin)
|
91 |
|
92 | ## 更新记录
|
93 |
|
94 | [CHANGELOG_CN.md](./CHANGELOG_CN.md)
|
95 |
|
96 |
|
97 |
|
98 | ## 交流反馈
|
99 |
|
100 | QQ 群:497430533
|
101 |
|
102 | ![](./example/snapshot/qq_group.png)
|
103 |
|
104 |
|
105 |
|
106 | ## License
|
107 |
|
108 | [The MIT License](./LICENSE)
|