如何使用手机前端开发调试利器——vConsole

1.了解vConsole是一个什么和能做什么

vConsole是针对手机网页的前端Console调试面板,相当于电脑大部分浏览器都自带的F12开发者工具

我们在写web app或者移动端网页需要嵌入到app时候,特别是使用了APP自带的Web View来加载我们的网页时,很难查询到我们想要的数据. 并且出错时进行调试需要打印日志时,尤为困难.

而这个工具可以让我们和在PC使用devtools时一样,查看日志,网络,页面元素等

2.安装,使用vConsole

项目地址:https://github.com/Tencent/vConsole

下载 vConsole 的最新版本。（不要直接下载 dev 分支下的 dist/vconsole.min.js）

或者使用 npm 安装：

npm install vconsole

引入 dist/vconsole.min.js 到项目中：

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

对于 TypeScript，可引入 d.ts 文件：

import  path/to/vconsole.min.d.ts ;

当然有的人不想下载,直接进入链接https://gitee.com/mirrors/vConsole/raw/master/dist/vconsole.min.js，将文本内容复制到xxxuildweb-mobile目录下，若想加入模板中则复制到xxxuild-templatesweb-mobile目录下。

在网页里加入

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

    <script type="text/javascript">
        let vConsole = new VConsole();
    </script>

进行使用

右下角的小绿标就是vConsole了

打开后默认处于Log的all页面

底部可以输入JavaScript代码进行执行,clear为清除日志,hide为隐藏控制面板

也是最常用的东西

后面4个页面分别为

System—-查询浏览器框架信息界面

Network—-监听网络数据界面

Element—-查询网页元素信息界面

Storage—-查询储存信息界面(Cookies,LocalStorage,SessionStorage)

3.在QQ和微信中使用vConsole

    腾讯大部分APP内的网页服务基本都是基于TBS X5内核(Tencent TBS X5)

第一我们需要通过QQ和微信打开http://debugtbs.qq.com

最简单的方式就是把连接随意找个人发过去,然后点击,然后会打开一个这个网页

选择安装线上内核，等待下载和安装后，然后重启即可,安装后可以看到倒数第二行有一个Debugx5的选择,或者直接打开http://debugx5.qq.com

勾选打开vConsole重新打开网页即可看见右下角的vConsole绿框，如果没出现可尝试关闭网页再次打开，循环往复．同时还提供了小程序开发调试等功能，方便开发．