网站引入vConsole调试移动端

手机上没有审查元素F12，无法调出控制台，调试的时候比较麻烦。最近给网站集成了vConsole，方便移动端的调试。vConsole是腾讯推出的一个针对手机网页前端调试的面板。项目地址点击进入。

使用vConsole，一般只要网站引入vconsole.min.js文件，然后通过new VConsole();直接调用即可。文件的引用可以下载到本地引入也可以通过cdn直接调用。下面给出文件下载地址：
https://github.com/Tencent/vConsole/releases/tag/v3.3.0

JavaScript判断是否调用

如果直接调用的话访客访问时手机端下部会显示一个绿色的小按钮，显然影响体验。这里给出个人认为比较好用的两种调用方式吧。

<script>
if ((location.href || '').indexOf('vconsole=true') > -1) {
    document.write('<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><\/script>');
    document.write('<script>new VConsole()<\/script>');
}
</script>

使用该代码引入，只需要在需要调用的页面网址后添加?vconsole=true判断一下即可。例如：http://www.vlwx.com/114.html?vconsole=true即可。但是每次都需要手动输入一下感觉还是有些麻烦。

WordPress根据用户身份判断是否调用

WordPress用户如果不太关注管理员前端显示可以使用如下方式判断一下用户身份，确定是否加载调试按钮。

<!--?php if( current_user_can( 'manage_options' )){ ?-->
    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <script>new VConsole()</script>
<!--?php } ?-->

其实就是通过current_user_can()函数判断一下用户权限的事儿，使用体验也还好。