【前端探索】vConsole花式用法
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，我们还能开发出什么样的玩法。
学习一下插件文档
报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 = `
<div class="vc-item vc-item-info"><p>点击下方【复制...】按钮，复制信息发送给开发人员</p>
<p>点击下方【一键反馈】按钮，发送当前环境日志给开发人员</p></div>
<div class="vc-item vc-item-log"><p>页面链接：${url}</p></div>
<div class="vc-item vc-item-log"><p>用户uid：${uid}</p></div>
<div class="vc-item vc-item-log"><p>浏览器UA：${UA}</p></div>`;
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 = '<div>请点击下方按钮，切换测试/正式环境</div>';
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自定义插件还有更多实用的用法，有别的想法也欢迎下方评论下。
腾讯云开发者
