vConsole 手机上也能调试网页


有时候代码灵感来了拦都拦不住,但是身边没有电脑来调试页面呀,用挂机宝或者win的服务器却又太麻烦还费钱,腾讯VConsole 的出现,正好解决了这一痛点!

vConsole介绍

vConsole是一个轻量、可拓展、针对手机网页的前端开发者调试面板。

功能

  1. 查看 console 日志
  2. 查看网络请求
  3. 查看页面 element 结构
  4. 查看 Cookies、localStorage 和 SessionStorage
  5. 手动执行 JS 命令行
  6. 自定义插件

使用方法

GitHub上下载最新版的,然后用以下方式引入

    <script src="path/to/vconsole.min.js"></script>
    <script>
      // 初始化
      var vConsole = new VConsole();
      console.log('Hello world');
    </script>

然而这时页面右下角出现了绿色的vConsole,无论是访客还是管理员,看着的确有些影响整体美观,解决方案如下:

    <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按钮被隐藏了,如需启动只需要在域名后加上 ?vconsole=true 即可


声明:文生技术博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - vConsole 手机上也能调试网页


做个俗人,贪财好色。