移动端web页面调试

移动端分为 iOS 和 Android 两端，两个的调试方式不太一样，另外还有调试本地服务器的页面和调试远程服务器上（即线上或者预发地址）的页面。

一、iOS 端调试

硬性要求：macbook电脑、iphone 手机 没有上述设备无法调试，因为电脑我们需要用到 sarifi 浏览器，而且只能是 mac 系统上的 sarifi 浏览器，windows 上的不可以。

1）打开 iphone 的调试功能 操作：设置 - sarifi 浏览器 - 高级，打开 web 检查器 将 web 检查器打开，mac 电脑上的 sarifi 浏览器才可以读取到 iphone 手机上通过 sarifi 打开的页面

Tip：打开过1次后续就不用再操作了

2）打开 mac 上 sarifi 的开发者模式 操作：打开 sarifi 浏览器 - 左上角的sarifi浏览器 - 偏好设置 - 高级，勾选底部的在菜单栏中显示“开发”菜单

Tip：打开过1次后续就不用再操作了

3）iphone连接电脑    将 iphone 手机通过数据线连接到电脑上，这时候 iTunes 需要打开，允许读取手机（类似这样的提示，设置允许），手机弹出是否信任该设备（类似这样的提示，点击信任），首先得 iTunes 能读取到设备，mac上的 sarifi 浏览器才可以检测到 iphone 上的网页

4）调试    打开 iphone 上的 sarifi 浏览器，打开你要调试的网页，然后在 mac 上的 sarifi 浏览器 - 开发菜单中，可以在上面看到该 iphone 设备，将鼠标移到该设备上，展开的列表就是可以调试的网页地址，点击要调试的网页，就会弹出浏览器调试控制台，这样就可以调试了，上面也可以打断点，查看网络请求等等

怎么调试app中的web页面

app 分为 debug 包和 release 包，只有 debug 包才可以调试页面，而平时从应用商店下载的包都是 release 包。因此，要调试app上的web页面，需要你的 iphone 上装有该 app 的 debug 包才可以。 iOS 上所有 app 中带的浏览器都是用的 sarifi 的内核，调试方式跟在 sarifi 中一样。

二、Android 端调试

硬性要求：安卓手机（有 chrome 浏览器），随便什么电脑（有chrome浏览器，有安装 Android adb，或者 Android Studio自带adb，不然无法识别设备）

1）打开 Android 手机的调试功能

打开 设置 - 系统和更新 - 开发人员选项，打开开发人员选项，再打开 USB 调试（华为系统这么操作，其他厂商自行百度怎么打开开发者模式）

2）Android 连接电脑

将 Android 手机通过数据线连接到 USB 上，这时候手机会提示 USB 连接方式，选择传输文件，打开电脑上的 chrome 浏览器，在地址栏中输入 chrome://inspect，可以在面板上看到连接的手机设备（如果没有，请检查电脑的android环境，可能是 adb 有问题，或者自行百度查询原因）

3）调试

选择要调试的页面，点击 inspect 按钮，将会打开浏览器调试控制台

如果窗口能打开，但界面出不来，那么恭喜你，你被墙了，因为这个调试功能需要请求谷歌的接口，获取你的手机设备对应的调试包，解决方案就是

kexue上网，或者公司有时候开着kexue上网，可以访问部分网站。

怎么调试app中的web页面

app 分为 debug 包和 release 包，只有 debug 包才可以调试页面，而平时从应用商店下载的包都是 release 包。因此，要调试app上的web页面，需要你的 Android手机 上装有该 app 的 debug 包才可以。

国内大部分app的浏览器内核使用的是腾讯的 X5 浏览器内核，得关掉该内核，使用原生浏览器内核才可以在电脑上看到app中的web页面列表。 Android 的 debug 包没有安装数量的限制，只要有 apk 安装包就可以。

三、调试电脑启动的本地服务器页面

对于单页面应用来说，远程服务器上的页面都是混淆压缩后的代码（除非开 source map），不太好查看。或者需要频繁调试某个功能的问题，频繁发预发的方式会让我们效率极其低下。 怎么解决这个问题 -→ 局域网环境。

我们可以使用upload 上传到预发。，然后再http://192.168.153.94:8899/ 挂代理即可，注意使用公司网络，或者使用下面方法

如果电脑和手机在1个局域网中，手机是可以访问电脑上开启的服务器的，手机通过访问电脑的 ip（加上服务器端口） 可以直接访问到电脑上的服务，但有个问题，就是只通过 IP 访问，可能我们在调用后端接口的时候就没有用户登录信息等，这时候可以选择使用代理的方式，mac上用 charles 软件，将 手机上的请求都通过电脑进行代理访问，那么电脑上配置的host也相应地可以对手机生效了。

比如电脑配置本地 host：127.0.0.1 test.jd.com，那么手机访问 test.jd.com，被 charles 进行代理，就会访问到 127.0.0.1 上。

步骤：

1）手机和电脑处于同一个局域网中 公司内部，手机是连接 JD_mobile，电脑是连接 JD，这2个wifi并不是在1个局域网下，因此得将手机和电脑都连到1个wifi下面，因为macbook只有1个无线网口，因此它只能要么连wifi，要么发射1个wifi信号，除非电脑用网线连接上网，才可以把无线网口释放出来用于当wifi发射器。因此建议使用 windows 电脑，由 windows 通过 wifi 软件开启wifii，将macbook电脑和手机都连到这个wifi下面，这样手机和电脑就处于1个局域网了。 如果你是用 windows 电脑开发，那么就直接用 windows 开wifi就可以了，手机连到 windows 开的 wifi 下，windows和手机也是在1个局域网中。 因为前端基本都是用 mac 本，需要开 wifi 的话得找有 windows机的同学。

2）打开 charles 点击顶部菜单的 Proxy，配置 HTTP Proxy 的 port（要代理的端口），比如设置 8888，切到 macOS，勾选 Enable macOS proxy，确认。

3）设置手机代理 连到1个局域网下后，查看电脑的ip地址，mac 上可以点击右上角的 wifi 图标，打开网络偏好设置，就可以查看电脑的ip了。

安卓手机：打开手机的wifi设置，长按当前连接的wifi - 修改网络，点击显示高级选项 - 代理 - 手动，将电脑的 ip 配置在 服务器主机名上，服务器端口设置 charles 配置的代理端口（为第二步设置的代理端口）

iOS手机：打开手机的wifi设置，点击当前连接的wifi最右侧的感叹号图标 - 配置代理 - 手动，将电脑的 ip 配置在服务器上，端口设置 charles 配置的代理端口（为第二步设置的代理端口）

4）启动本地服务器 如果是 webpack，需要设置 devServer 的 host 为 '0.0.0.0'，并设置 disableHostCheck 为 true，不然只能使用配置的 host 访问服务器。

5）在手机浏览器上访问本地服务器

一般情况下，这时候 webpack 的热更新是不好使的，当代码改动保存后，需要重新刷新手机上的页面。

windows 上代理用 Fiddler，具体配置自行百度，没怎么用过。

除了上述这种方式，也可以使用 carefree.jd.com/#/introduce… ，carefree，它是实时将本地服务器的文件（chunk包，sourcemap等）上传到远程服务器上，通过访问远程服务器上的地址，也可以进行代码频繁更新调试。 不过这个东西我没装成功，其他人可以试试。