调试痛苦之vConsole完美

调试痛苦之vConsole完美

对于日常的调试需求，Chrome 就可以满足，当你有MAC电脑的时候，再配上iphone手机，开启Safari调试也是很完美的。可是当你的页面运行在微信，但又不是公众号的时候，微信开发者工具和 Chrome 就无能为力了，上网查了一些资料，大家推广的有两种方案可以解决微信环境调试页面的问题，一个是：vConsole，另外一个是：X5。今天我们就来简单谈谈这两种调试技巧以及他们之间的差异。

vConsole 的使用方式

1. 引入一个js文件:
为了方便大家不用再去查找下载链接，我已经把 js 文件放在我自己的码云项目里面，大家可直接自行下载，点击下载，或者使用 CDN 加载，使用方式如下：

打开页面，效果如下：

2. Vue项目使用：

npm install vconsole

import Vconsole from 'vconsole'

const vConsole = new Vconsole()

3. webpack 打包使用：

npm install vconsole

import VConsole from 'vconsole/dist/vconsole.min.js' 

let vConsole = new VConsole() 

总结：使用下来，发现 vConsole 的使用效果不太理想。原因有如下4点：
1: 部分请求无法看到；
2: 不能断点调试；
3: 查看 DOM 元素不方便（因为是手机查看）；
4: 当配合后台调试接口的时候，请求的链接无法完整复制出来；

X5 的使用方式

1. 手机打开开发者模式（各种手机打开的方式不同，这里不再描述，大家自行解决）；
2. 打开微信TBS 调试，链接如下：
   http://debugx5.qq.com

• 或者扫码打开TBS调试

3. 切换到信息页面并勾选✅️打开TBS内核Inspector调试功能，如下图所示：

4. 微信打开需要调试的页面，如下图：

5. 电脑端，Chrome 新打开一个标签页面，输入网址：chrome://inspect/#devices并勾选相应的配置选项，之后手机刷新页面，找到你微信打开的页面网址，点击 inspect ，效果如下图：

• 如果一切正常的话，你会看到如下的效果：

到此，调试微信页面的两种方法已经对比完毕，很显然，X5 要更胜好几筹，最后说一句，写此文章的目的，是不想每次使用的时候，都要去百度搜索，因为那样真的很浪费时间。