移动端常用调试工具

1.vConsole

网址：https://www.npmjs.com/package/vconsole

详细使用教程：https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

1-1 使用npm方式：

例如在vue中使用

首先安装vconsole

    npm install vconsole --save

然后在main.js中引入并实例化vConsole对象

    import VConsole from "vconsole";

    process.env.NODE_ENV === "development"?(new VConsole()):'';

在页面在中会有绿底白字的按钮，点击可展开调试面板

默认面板如上图，可以查看网络、元素、存储等面板，也可以在下方command输入框中输入执行js代码。在实例化VConsole时可以传入配置信息，选择要显示面板

1-2 使用script标签引入

首先在github中将js文件下载下来

下载地址：https://github.com/Tencent/vConsole/releases/tag/v3.3.4

然后使用script引入即可

<script src="path/to/vconsole.min.js"></script>

<script>

  var vConsole = new VConsole();

</script> 

2.Eruda

网址：https://github.com/liriliri/eruda

使用：

2-1 npm方式下载

npm install eruda --save

<script src="node_modules/eruda/eruda.min.js"></script>

<script>eruda.init();</script>

2-2 cdn方式引入

eruda.init();<script src="//cdn.jsdelivr.net/npm/eruda"></script>

<script>eruda.init();</script>

页面下方会有灰底白色图标的按钮，点击按钮展开面板，会发现这个插件所展现的比前一种方法更丰富，模拟实现了很多真实浏览器的面板功能，同样在实例化对象的时候也可配置面板。

3.Fiddler 和 Charles

Fiddler网址：https://www.telerik.com/fiddler

Charles网址：https://www.charlesproxy.com/

这是两个抓包工具，也可以用在移动端调试，尤其是在开发app和小程序的时候，主要用于拦截和查看网络请求和接收到的数据，也可以拦截https协议请求。但是这只是这两个软件很小的一部分功能，其他的如拦截修改数据、模拟接口返回json数据等等，如果想体验其他强大的功能可以在网上找一些相关文章尝试一下。

没有必要比较两个软件的孰优孰劣，两款软件都很优秀，功能相似，都有各自的爱好者。可以两个软件都尝试一下，适合自己的才是最好的。个人常用Fiddler 以及其官网提供的证书，可以帮助拦截查看https协议的请求，另一个应该也可以但是我没尝试。

以上是我经常在工作中使用的方法，如果有谬误望和其他更好的方式不吝赐教，谢谢。