移动端项目调试工具整理

众所周知，移动端浏览器默认没有像电脑端开发者工具一样的功能，这就对我们在移动端调试应用或网页时带来很多不便。记得几年前曾使用过局域网的方式做过调试，但是现在也只记得当时配置网络花了很多功夫，后来也疏于记录，现在怎么都想不起来当时是怎么做的了。

好在，繁荣的前端行业，有很多大佬们开发出很多好用的工具。今天基本都测试了一番，以下是测试经过：

一、Eruda 

Eruda是一款专为手机网页前端设计的调试面板，安装及配置简单，github地址：https://github.com/liriliri/eruda，有中文文档。

安装：

npm install eruda --save

配置：

import eruda from 'eruda';
eruda.init({
    useShadowDom: true
})

不过使用起来用户体验较差，因为移动端屏幕较小，打开时会遮挡住需要触发操作的元素，然而关闭掉再操作的话，又经常记录不到数据信息，其次，查看网络请求的方式需要点击眼睛图标，操作较麻烦。

二、Charles花瓶抓包工具

一款很经典的移动端抓包工具，因为其logo为一个青花瓷花瓶，因此，也被行业内人士称为花瓶，在移动端等很多方面比Fiddler有优势，配置较为麻烦（配置方法请点击链接进行查看），但是配置一遍之后，基本也就熟悉了，这个不是难点。问题是，即便这一切都配置好了之后，移动端的浏览器、抖音、小红书等都能抓到包，但就是捕获不到移动端微信内的网页打开等请求，很是疑惑，很有可能是我这边配置的不是很到位，遂弃之。

三、vConsole

vConsole是一款由腾讯团队出的移动端调试工具，配置简单，文档详细，使用体验很好，和电脑端的页面调试工具一样好用。

github地址为：https://github.com/Tencent/vConsole/tree/dev

有中文文档可查看，在Vue项目中，可以直接在main.js文件，或者需要做调试的页面中进行配置，安装及配置方法简单：

安装：

npm install vconsole

配置：

import VConsole from 'vconsole'
const vConsole = new VConsole()

不过，也不是说vConsole没有缺点，当照着其官方文档运行如下代码：

var vConsole = new VConsole();
// ... do something
vConsole.destroy();

浏览器会报错：vconsole.js?v=8578f640:2797 Uncaught TypeError: Cannot read properties of undefined (reading 'update')

其次就是对外提供的属性和接口不是很多，比如我希望得到当前的vConsole是否为打开状态，这一点就不是很好实现。

综合以上对Eruda、charles和vConsole的测试实验，最终还是选定vConsole作为项目的移动端调试工具，可能是因为其是国人开发的，更符合中国宝宝的体质吧。