现在比较常用的移动端调试你知道哪些？

其实以下这些方法对于已经工作的小伙伴来说已经熟悉的不能再熟悉了，但是对于刚入职场或者学生来说，可能第一次接触（至少对于当时自己刚入职场来说第一次接触到charles😭）。希望可以给这部分同学带来一点点收获。

💗也欢迎大家留言**✍️**，讲讲自己在日常开发中如何调试移动端页面开发的。

移动端直接调试

我们这里可以使用第三方包在手机上进行简单的调试，比较好用的有eruda, vConsole

eruda官方也提供了一个在线调试网站，可以通过手机输入查看效果。使用也非常简单，直接引入调用即可。这里需要注意一下区分环境进行加入。

js 复制代码

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

vConsole官方也提供了一个在线调试网站，可以通过手机输入查看效果。使用也非常简单，直接引入调用即可。这里需要注意一下区分环境进行加入。

js 复制代码

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

其实二者的使用都是在手机上做简单的调试使用，大致功能都差不多，你自己也可以基于他们提供的api来定制一些插件使用。

这里我们在项目中集成vConsole来查看下效果。zhang-glitch/vue3-blog: 通过vue3重构个人博客 (github.com)，该项目也是大学毕设项目，迭代了很久，vue3刚出来的时候进行了重构，适配PC和移动端布局。服务器前端事件过期了，就没再搞了。项目部署还写了一篇文章作为学生，一路"白嫖"，手把手教你部署前端项目，感兴趣的可以看一看。

善于使用抓包工具

其实对于一般的项目来说我们直接使用浏览器开发者工具的network查看网络请求情况就可以了。

结合我自己来说，以前在电魂开发游戏内支付页面查看到接口中详细信息,在现在的公司分析一些页面请求，例如qq邮箱一些资源的下载请求，我们点击完按钮可能页面刷新或者重定向了，network中是不会出现请求记录的。这些特殊请求我们都需要使用抓包工具进行抓取对应的网络请求进行分析处理bug。

下面我们来介绍一个我从实习的时候就在用的抓包工具charles,他的界面非常简洁，而且请求的分组特别清晰的，他是根据请求的域名进行对应接口的分组的。还有一些其他的抓包工具功能大差不差就看自己喜欢哪个了，比如fiddler。

下面简单介绍一下charles常用的功能。

charles默认支持抓取http请求。代理端口默认为8888, 如果和本地其他应用冲突可以进行修改。

charles抓取https包

让charles支持抓取https的请求，我们需要安装charles证书到本机，charles作为代理，我们需要向本机提供一个可信赖的证书这样我们才可以抓取加密的数据包。

首先安装证书

然后配置SSL代理

然后就可以抓取https请求了。不再像前面的请求是加密的内容。

今天测试的时候发现charles不能代理localhost服务了，查看官网才发现这个问题，发现所以我们如果有问题可以查看官网的FAQ

如何解决charles不能抓取localhost, 127.0.0.1的网络包呢?

我们找到C:\Windows\System32\drivers\etc\hosts文件，增加一个一个127.0.0.1ip的域名映射。

127.0.0.1 localhost.charlesproxy.com
如果你是用vue-cli脚手架搭建的项目并启动，访问http://localhost.charlesproxy.com:3001会展示invalid host header，我们只需要在devServer中配置一些属性即可。

js 复制代码

 devServer: {
  port: 3001,
  compress: true,
  public: 'localhost.charlesproxy.com'
},

详细见这里，如果是其他脚手架搭建的项目，如果遇到这种问题，请自行查阅stackoverflow。然后将我们接口的baseUrl的ip也改成localhost.charlesproxy.com就可以在charles中进行抓取到本地接口了。

还有一种简单方法，我们运行项目的时候直接通过本机网络ip访问项目，也是可以被拦截的。注意接口的baseUrl的ip也需要改成localhost.charlesproxy.com或者本机网络ip，反正不能是localhost / 127.0.0.1。

回到正题，那我们如何抓取手机端的网络包呢？

charles抓取移动端包

首先我们手机和电脑必须在同一个局域网下，说白了就是连同一个wifi。

charles这里有说明。

我们手机在wifi中配置到代理服务器的ip和端口，就是上面查找到的。

设置好后，chales界面会弹出一个会话框，我们点击允许即可。

然后在手机浏览器中输入https://chls.pro/ssl下载charles证书，然后手机设置里全局搜索证书即可，然后安装证书搜素charles即可找到刚刚下载的证书了。如果这个方法行不通请自行上网查找方法。

大多数公司都设置了都设置了加密，不给代理进行抓包，例如app。

charles其他好用功能

Map Local, Map Remote

Map Remote 是将指定的网络请求重定向到另一个网址。就是我们在本地测试时可以调用线上接口。（直接修改请求的接口为线上接口）

例如我想要把线上的某个路径下的资源映射我本地的资源。

js 复制代码

 user.i999d.cn/api/* -> localhost:8080/api

Map Local 是将指定的网络请求重定向到本地文件。（我们将线上资源请求替换成本地的资源。就是浏览器中overrides功能）

例如在掘金中我们替换首页，在首页中加入vConsole工具。

一般我们线上环境代码出现bug是非常不好定位的，因为都是压缩过的，所以这个功能就可以让我们直接拦截线上的一些资源替换成本地的代码。

Rewrite

修改请求或者响应。

该功能其实很强大，只要是请求和响应的内容都可以进行修改。例如给上面掘金首页加入vConsole调试工具。

公网访问本地服务，内网穿透（NAT）

我最早接触到的内网穿透工具是花生壳，但是最后花生壳收费了，上网找到了ngrok工具，当时也是想要将开发的小程序发送给别人使用，用到的这个技术。

我们知道同一个局域网的主机ip地址各不相同，但是他们通过一个相同的ip地址接入公网，公网也是不能直接和局域网的主机进行通信的，我们突破这层限制，公网直接访问内网就叫做内网穿透。我们可以直接使用ngrok, localtunnel。服务是实时更新的。

ngrok是一个客户端工具，而localtunnel是一个npm包。这工具也就是开发完毕使用下，哪个方便使用哪个。他们都是生成唯一可在公网访问的url，该url会代理本地运行的web服务请求。

往期年度总结

往期文章

专栏文章

结语

本篇文章到此就结束了，欢迎在评论区交流。

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论， 支持一下博主~