【前端探索】vConsole花式用法 |
您所在的位置：网站首页 › 怎么取消vconsole › 【前端探索】vConsole花式用法 |
【前端探索】vConsole花式用法
|
vConsole是腾讯开源的，一个轻量、可拓展、针对手机网页的前端开发者调试面板。 接入接入很简单，考虑到其虽然轻量但是也有几十kb，我们一般选择动态引入。 loader('https://unpkg.com/vconsole@latest/dist/vconsole.min.js',() => { var vConsole = new window.VConsole(); }); 示例引入之后就可以在你开发的页面上，看到Overview、Log、Network、Element、Storage等多个栏目了。 wechatfe.github.io/vconsole/de… 接入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的界面上，加一下提示文案。 const html = `点击下方【复制...】按钮，复制信息发送给开发人员 点击下方【一键反馈】按钮，发送当前环境日志给开发人员 页面链接：${url} 用户uid：${uid} 浏览器UA：${UA} `; feedbackPlugin.on('renderTab', (callback) => { callback(html); });再给反馈tab，加一些复制信息的按钮。 const btnList = []; btnList.push({ name: '复制用户信息', global: false, onClick() { const userInfo = { url, uid, UA, cookie }; copyInfo(JSON.stringify(userInfo)); }, }); btnList.push({ name: '复制网络请求', global: false, onClick() { const request = getNetworkInfo(); copyInfo(JSON.stringify(request)); }, }); btnList.push({ name: '复制日志', global: false, onClick() { const log = getLogInfo(); copyInfo(log); }, }); feedbackPlugin.on('addTool', (callback) => { callback(btnList); });为了更方便地一次发送全部信息，我们加上一个“上报”按钮。reportFeedbackInfo上报接口，可以自己实现后台服务，也可以接入已经在用的日志系统。 btnList.push({ name: '上报', global: false, onClick() { reportFeedbackInfo({ uid, UA, url, cookie, log: getLogInfo(), request: getNetworkInfo(), }).then(() => { alert('上报成功，请通知开发人员查看'); }); }, });最后的成果见下图，有了这个神器，再也不用担心出现Bug定位不到问题了。 当应用的后台接口，有测试、开发、和现网等多种环境的时候。我们在测试环境测试完功能，一般还需要在现网环境验证一下。但我们并不想直接发布现网，担心影响线上的真实用户，这时候我们就需要一个预发布环境，但是如果我们没有呢？有没有替代的方案？ 不如这样，我们在vConsole上添加一个入口，支持一键切换CGI的域名，从而实现一键切换环境的需求。 下面代码，是通过vConsole切换sessionStorage里面tip_debug_cgi_env的值，CGI请求的时候，根据该值来切换测试和现网环境。 const envPlugin = new VConsole.VConsolePlugin('tip_tool', '切换环境'); const html = '请点击下方按钮，切换测试/正式环境'; envPlugin.on('renderTab', (callback) => { callback(html); }); envPlugin.on('addTool', (callback) => { const toolList = []; toolList.push({ name: '测试环境', global: false, onClick() { console.log('已切换为测试CGI，即将刷新页面......'); window.sessionStorage.setItem('tip_debug_cgi_env', 'test'); setTimeout(() => { location.reload(); }, 1000); }, }); toolList.push({ name: '现网环境', global: false, onClick() { console.log('已切换为正式CGI，即将刷新页面......'); window.sessionStorage.setItem('tip_debug_cgi_env', 'prod'); setTimeout(() => { location.reload(); }, 1000); }, }); callback(toolList); }); return envPlugin;插件编写完成，别忘记添加到vConsole实例对象。 window.vConsole = new VConsole(); window.vConsole.addPlugin(feedbackPlugin); window.vConsole.addPlugin(envPlugin); 总结除了上述的用法，vConsole自定义插件还有更多实用的用法，有别的想法也欢迎下方评论下。 |
【本文地址】
今日新闻 |
推荐新闻 |