WordPress网站引入腾讯vConsole调试面板方便手机端页面调试

10/04/201911:12:02 发表评论 516个阅读者

这两天,要调试WordPress百宝箱的手机端页面和Google广告进行优化,手机上不能像PC端有Chrome可以按 F12,调出控制台。用 Chrome DevTools 连接手机操作又比较麻烦。

那有没有一种WordPress网站网页集成的方式,可以方便对网页进行Debug调试呢?

WordPress网站引入腾讯vConsole调试面板方便手机端页面调试

腾讯VConsole面板的出现,正好解决了这一痛点。

延伸阅读:

如何用PHPStudy搭建本地PHP测试环境及安装Wordpress

用XAMPP搭建本地PHP测试环境及安装WordPress

VConsole面板轻量、可拓展、可以很方便地对手机网页前端开发者进行调试。

所以尝试给网站集成VConsole ,方便WordPress百宝箱手机端网页页面的调试。

VConsole在线体验网址:https://wechatfe.github.io/vconsole/demo.html

VConsole  Github地址:https://github.com/Tencent/vConsole

VConsole功能

  • 查看 console 日志
  • 查看网络请求
  • 查看页面 element 结构
  • 查看 Cookies、localStorage 和 SessionStorage
  • 手动执行 JS 命令行
  • 自定义插件

使用 vConsole ,非常简单,引入 vconsole.min.js 文件,通过 new VConsole(); 直接调用即可。文件的引用也可以下载到本地引入,也可以通过CDN直接调用。

最新版本下载地址:https://github.com/Tencent/vConsole/releases/tag/v3.3.0

可以通过以下方式引入:

<script src="vconsole.min.js"></script>
<script>
    new VConsole();
</script>

然后在页面的右下角看到绿色的 vConsole,点开它即可使用,界面与Chrome 的控制台类似。

不过,有一个问题就是无论是在PC还是手机上,访客也可以看到这个按钮。这样体验不是很好。

我们可以采用孟坤博客的方法:

<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://wpbox.cc/999.html?vconsole=true 即可。但是每次都需要手动输入一下感觉还是有些麻烦。

如果说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() 函数判断一下用户权限,这样做使用体验也会好很多。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: