调试痛苦 之 vConsole的完美
2020-03-09 本文已影响0人
代艳霞
对于日常的调试需求，
Chrome就可以满足，当你有MAC电脑的时候，再配上iphone手机，开启Safari调试也是很完美的。可是当你的页面运行在微信，但又不是公众号的时候，微信开发者工具和Chrome就无能为力了，上网查了一些资料，大家推广的有两种方案可以解决微信环境调试页面的问题，一个是：vConsole，另外一个是：X5。今天我们就来简单谈谈这两种调试技巧以及他们之间的差异。
vConsole 的使用方式
1. 引入一个js文件:
为了方便大家不用再去查找下载链接，我已经把 js 文件放在我自己的码云项目里面，大家可直接自行下载，点击下载，或者使用 CDN 加载，使用方式如下：
<head>
<!-- 下载引入 -->
<script src="dist/vconsole.min.js"></script>
<!-- CDN -->
<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
</head>
<script>
// 初始化
var vConsole = new VConsole();
console.log('VConsole is run');
</script>
打开页面，效果如下：
VConsole
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 的使用方式
- 手机打开开发者模式（各种手机打开的方式不同，这里不再描述，大家自行解决）；
- 打开微信TBS 调试，链接如下：
http://debugx5.qq.com
- 或者扫码打开TBS调试
微信调试
- 切换到信息页面并勾选✅️打开TBS内核Inspector调试功能，如下图所示：
TBS界面
- 微信打开需要调试的页面，如下图：
微信页面
- 电脑端，
Chrome新打开一个标签页面，输入网址：chrome://inspect/#devices并勾选相应的配置选项，之后手机刷新页面，找到你微信打开的页面网址，点击inspect，效果如下图：
chrome
- 如果一切正常的话，你会看到如下的效果：
x5调试页面
- 看起来像我们直接调试普通的页面一样，非常完美，
当然也有不完美的地方，就是有时候，当你点击inspect以后，会出现如下页面：
x5错误页面
- 这个时候也不要着急，看一下你的
Chrome是否翻墙了，我这边是打开了扩展插件中的谷歌上网助手，然后再关闭就可以了。
到此，调试微信页面的两种方法已经对比完毕，很显然，
X5要更胜好几筹，最后说一句，写此文章的目的，是不想每次使用的时候，都要去百度搜索，因为那样真的很浪费时间。
