网站引入 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 判断一下即可。例如：https://zibuyu.life/1.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() 函数判断一下用户权限的事儿，使用体验也还好。