手机调试webapp

在移动互联网时代，越来越多的网站和应用都具备了移动端适配的功能，这就需要我们对移动端的调试有更深入的了解。本文将介绍如何在手机上调试webapp，包括原理、具体操作和注意事项。

一、原理

在电脑上开发网站和应用时，我们可以使用Chrome、Firefox等浏览器的开发者工具进行调试。但是在移动端，由于浏览器的限制，我们无法像在电脑上那样直接打开开发者工具进行调试。因此，我们需要借助一些工具来实现在手机上调试webapp的功能。

具体来说，我们需要在手机和电脑上分别安装一个工具，然后通过这两个工具之间的连接来实现手机上的调试。其中，手机上的工具一般称为调试器或者调试助手，常见的有UC浏览器调试助手、微信开发者工具、Chrome DevTools等；电脑上的工具则是一些代理工具，比如Fiddler、Charles、mitmproxy等。

这些代理工具的原理是：将手机和电脑之间的网络流量拦截下来，然后进行分析和修改，最后再将修改后的流量发送给服务器。这样就可以实现在电脑上对手机上的网络请求进行查看、修改和模拟等操作。

二、具体操作

下面以UC浏览器调试助手和Fiddler为例，介绍如何在手机上调试webapp。

1. 安装UC浏览器调试助手和Fiddler

首先，在手机上下载安装UC浏览器调试助手。其次，在电脑上下载安装Fiddler。

2. 配置Fiddler代理

在电脑上打开Fiddler，选择Tools -> Fiddler Options -> Connections，勾选“Allow remote computers to connect”，然后点击“OK”保存设置。

3. 配置手机代理

在手机上打开UC浏览器调试助手，点击“设置”，然后选择“代理设置”，将代理设置为“手动”，并填写电脑的IP地址和端口号(默认为8888)。

4. 开启Fiddler代理

在电脑上打开Fiddler，选择Tools -> Telerik Fiddler Options -> HTTPS，勾选“Decrypt HTTPS traffic”，然后点击“OK”保存设置。接着，点击Fiddler的“Start”按钮，开启代理服务。

5. 开启UC浏览器调试助手

在手机上打开UC浏览器调试助手，点击“开启调试模式”，然后选择要调试的浏览器。接着，打开要调试的网站或应用，就可以在Fiddler的界面中看到手机上的网络请求了。

三、注意事项

1. 由于使用代理工具会对网络请求进行拦截和修改，因此在调试时要注意不要对正式环境造成影响。

2. 在使用HTTPS协议时，需要在Fiddler中开启HTTPS解密功能，否则无法看到加密后的请求。

3. 在手机上使用代理时，可能会导致一些应用无法正常使用，比如微信、支付宝等。因此，在调试时要注意关闭代理或者将代理设置为仅对特定浏览器生效。

4. 在使用UC浏览器调试助手时，要注意它只能调试UC浏览器和QQ浏览器，其他浏览器无法调试。

总的来说，手机调试webapp是一项非常有用的技能，它可以帮助我们更好地了解移动端的特点和问题，提高开发效率和用户体验。