首页 > 分享 > 【前端探索】vConsole花式用法

【前端探索】vConsole花式用法

花匠小妙招
2024-12-07 19:23

vConsole是腾讯开源的，一个轻量、可拓展、针对手机网页的前端开发者调试面板。

接入

接入很简单，考虑到其虽然轻量但是也有几十kb，我们一般选择动态引入。

loader('https://unpkg.com/vconsole@latest/dist/vconsole.min.js',() => { var vConsole = new window.VConsole(); });示例

引入之后就可以在你开发的页面上，看到Overview、Log、Network、Element、Storage等多个栏目了。

http://wechatfe.github.io/vconsole/demo.html

花式用法！

接入vConsole确实极大方便了我们调试和发现问题，但是这样就足够了吗？

不是的，我们还有更多的玩法。

vConsole本身支持我们自定义插件，来实现定制化的使用需求，我们来看下基于vConsole，我们还能开发出什么样的玩法。

学习一下插件文档插件：入门插件：编写插件插件：Event 事件列表报bug神器：一键反馈

以前看到过一个问题，"前端同学怎么避免成为Bug路由器？"

确实，不管是前端的问题，后台接口的问题，服务器的问题，测试人员第一个问的总是前端开发，因为前端开发是一个应用开发过程中，最后整合各种资源的人。出Bug时，谁是具体的负责人，一般也是前端开发最清楚的。

这些路由器的工作，有时候也确实挺占用我们的时间的，我们无法改变成为路由器的现状，那不妨努力成为一个更高效的路由器。

而成为高效路由器的关键，就是不管何时何地什么人，只要应用出现问题，马上就能定位到问题。

这时候我们需要一个一键反馈的神器，出现问题的测试人员，只要在页面上按一个按键，开发者马上就能拿到出现问题的页面所处的环境。

首先，我们为vConsole添加一个“反馈”tab。

const feedbackPlugin = new VConsole.VConsolePlugin('tip_login', '反馈'); feedbackPlugin.on('init', function () { // do something });

为了复现问题，我们需要页面的url、浏览器的UA、用户的uid、页面的cookie，同时为了快速发现问题，我们需要页面上发生的网络请求信息，以及用户的日志。

// 获取页面信息 const url = window.location.href; const uid = app.tip_uid; const UA = navigator.userAgent; const { cookie } = document; // 获取网络请求信息 const getNetworkInfo = function () { const { reqList } = window.vConsole.pluginList.network; const request = []; Object.keys(reqList) .forEach((key) => { const item = reqList[key]; request.push({ url: item.url, status: item.status, getParam: item.getData, postParam: item.postData, costTime: item.costTime, response: item.response, }); }); return request; }; // 获取日志信息 const getLogInfo = function () { return window.vConsole.pluginList.default.$tabbox.innerText; };

为了方便测试人员理解，我们在vconsole的界面上，加一下提示文案。

再给反馈tab，加一些复制信息的按钮。

为了更方便地一次发送全部信息，我们加上一个“上报”按钮。reportFeedbackInfo上报接口，可以自己实现后台服务，也可以接入已经在用的日志系统。

btnList.push({ name: '上报', global: false, onClick() { reportFeedbackInfo({ uid, UA, url, cookie, log: getLogInfo(), request: getNetworkInfo(), }).then(() => { alert('上报成功，请通知开发人员查看'); }); }, });

最后的成果见下图，有了这个神器，再也不用担心出现Bug定位不到问题了。