手机端调试页面

VConsole实践

Posted by Silence on June 5, 2019

手机端调试页面

当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。

在开发移动端页面的时候我们通常是在浏览器完成开发完成,之后才在手机端测试,如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面,经过调试之后还要重新发包。当然还有更加奇怪的现象,由于手机浏览器和Web浏览器的差异,经常会发现在Web浏览器上好好的,一到手机上就不行的情况。

因此首先我们需要一个能在手机端调试的插件。如果你还在使用alert一步步来定位移动端页面bug的话,不妨试试vConsole。

vConsole

vConsole是一个由微信公众平台前端团队研发的Web前端开发者面板,可用于展示console日志,方便开发、调试。可以在vConsole.js下载地址下载所需的js。下载解压之后,在dist文件夹中找到vconsole.min.js,加入工程中:

1
2
3
4
5
6
  <script src="path/to/vconsole.min.js"></script>
  <script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
  </script>

请注意,VConsole 只是 vConsole 的原型,而非一个已实例化的对象。所以在手动 new 实例化之前,vConsole 不会被插入到网页中

vConsole

在安装完vConsole之后,你以为事情就结束了吗?

还有一个很大的问题就是肯定不能让用户看到我们的调试页面的,因此我们需要偷偷给我们的程序设置后门。

动态引入代码

通过URL上debug=1查询字符串来开启我们的调试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  const query = window.location.hash.replace(/^#[^?]*\?/, '').split('&');
  const queryMap = {};
  for (const item of arr) {
    const parts = item.split('=');
    if (parts && parts[1]) {
      queryMap[parts[0]] = parts[1];
    }
  }
  if (queryMap.debug) {
    const script = document.createElement('script');
    script.src = 'path/to/vconsole.min.js';
    document.body.appendChild(script);
    script.onload = () => {
      new window.VConsole();
    };
  }