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

大家好,我是程序视点的小二哥!

今天小二哥碰到一新来的实习生在使用 alert 调试H5页面,仿佛看到小二哥年少时羞涩的样子...

趁这个机会,就给大家分享一个针对手机网页的前端开发者调试面板工具:vConsole

简介

vConsole 是框架无关的,可以在 VueReact 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具

功能特性

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

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

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

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

手动执行 JS 命令行: 这就和在 Chrome devtoolsconsole面版中执行命令一样。

使用方法

vConsole 添加到项目中主要有以下方式:

方法一:使用 npm(推荐)

$ npm install vconsole

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

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化,详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();

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

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

可用的 CDN:

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
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

热门相关:首席的独宠新娘   战神   法医娇宠,扑倒傲娇王爷   战神   法医王妃不好当!