网站引入 vConsole ,移动调试更方便

手机上没有 F12,无法调出控制台,调试的时分比较费事。最近给网站集成了 vConsole ,便当挪动端的调试。vConsole 是腾讯推出的一个针对手机网页前端调试的面板。项目地址请戳这儿。

运用 vConsole ,一般只需网站引进 vconsole.min.js 文件,然后通过 new VConsole(); 直接调用即可。文件的援用可以下载到本地引进也可以通过 cdn 直接调用。下面给出文件下载地址:

  • https://github.com/Tencent/vConsole/releases/tag/v3.3.0

假设直接调用的话访客拜访时手机端下部会显现一个绿色的小按钮,明显影响体会。这儿给出个人认为比较好用的两种调用方式吧。

办法一 JavaScript 判别能否调用

if ((location.href || \'\').indexOf(\'vconsole=true\') > -1) {
    document.write(\'\');
    document.write(\'new VConsole()\');
}

运用该代码引进,只需求在需求调用的页面网址后添加 ?vconsole=true 判别一下即可。例如:https://zibuyu.life/1.html?vconsole=true 即可。但是每次都需求手动输入一下觉得仍是有些费事。(代码来源孟坤博客)

办法二 WordPress 根据用户身份判别能否调用

WordPress 用户假设不太关注管理员前端显现可以运用如下方式判别一下用户身份,必定能否加载调试按钮。

    
    new VConsole()

其实就是通过 current_user_can() 函数判别一下用户权限的事儿,运用体会也还好。