神器vConsole！快速定位移动端问题，加快开发效率

麓野

大家好，我是程序视点的小二哥!
今天小二哥碰到一新来的实习生在使用 alert 调试H5页面，仿佛看到小二哥年少时羞涩的样子...
趁这个机会，就给大家分享一个针对手机网页的前端开发者调试面板工具：vConsole

简介

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具。

功能特性

查看日志(Logs)： console.log|info|error|...

查看网络请求(Network)： 请求、响应的详情

查看节点结构(Element)： HTML 节点树

管理存储(Storage)： 添加、编辑、删除、复制 Cookies / LocalStorage / SessionStorage

手动执行 JS 命令行: 这就和在 Chrome devtools 的console面版中执行命令一样。
使用方法

将 vConsole 添加到项目中主要有以下方式：
方法一：使用 npm（推荐）

1. $ npm install vconsole

复制代码

Import 并初始化后，即可使用 console.log 功能。

1. import VConsole from 'vconsole';
3. const vConsole = new VConsole();
4. // 或者使用配置参数来初始化，详情见文档
5. const vConsole = new VConsole({ theme: 'dark' });
7. // 接下来即可照常使用 `console` 等方法
8. console.log('Hello world');
10. // 结束调试后，可移除掉
11. vConsole.destroy();

复制代码

方法二：使用 CDN 直接插入到 HTML

1. [/code]可用的 CDN：
2. [code]https://unpkg.com/vconsole@latest/dist/vconsole.min.js
3. https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

复制代码

使用示例和建议

引入 vConsole 模块后，页面前端将会在右下角出现 vConsole 的悬停按钮，可展开/收起面板。
支持 4 种不同类型的日志，会以不同的颜色输出到前端面板：

支持打印 Object 对象，会以 JSON 字符串格式输出：

vConsole 面板中的使用几乎如同 Chrome devtools 一样。
重点注意：请不要在生产环境中引入 vConsole 模块。
vConsole 还提供了公共属性、方法和配置项，以及插件的使用。这些详细的使用就留待大家去查阅啦。

vConsole地址https://gitee.com/Tencent/vConsole

来源:https://www.cnblogs.com/tanggoahead/p/17445325.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！