移动端调试Web页面

虽然可以在PC下，通过开发者工具，模拟移动端，但是这样只能模拟页面样式，对于代码的执行情况是无法模拟的，所以在此结合实际调试经验，针对安卓与IOS设备，进行总结。

IOS
安卓

IOS

软件准备

Node.js
Scoop
Remotedebug-ios-webkit-adapter
说明：
- Scoop是一款Windows下命令行包管理工具
- Scoop安装完后，通过它下载 ios-webkit-debug-proxy
- 安装Node模块：remotedebug-ios-webkit-adapter

梳理一下，步骤依次如下：

1、Set-ExecutionPolicy RemoteSigned -scope CurrentUser  (选择Y)

2、iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

(安装Scoop，安装完后，通过：scoop help 来确认是否已安装好)

3、scoop bucket add extras  (安装extra这个仓库)

4、scoop install ios-webkit-debug-proxy

5、npm i remotedebug-ios-webkit-adapter -g

硬件准备
- 一部iPhone
- 一根可以被Windows识别的数据线
说明：
```
调试前，确保手机已经连接了电脑
```
环境准备
- 开启Safari的Web检查器功能，步骤如下：设置--Safari浏览器--高级--勾选【Web检查器】
至此，调试的环境已准备完毕。
开始调试
- 在PC，终端输入：remotedebug_ios_webkit_adapter --port=9000
- 在PC，打开Chrome，地址栏输入：chrome://inspect/#devices，点击Discover network targets右边的Configure...，弹出的对话框输入：localhost:9000
- Safari打开待调试页面后，刷新上一步的浏览器页面，在Remote Target区域，可以看到当前已打开的页面，点击inspect即可进入调试
注意：
```
第一个页面需要FQ，可以先打开baidu，正常进入后便可切换环境
```

安卓

硬件准备
- 一部手机(种类过多，不列举)
- 一根可以被Windows识别的数据线
环境准备
- 在手机安装Chrome浏览器，有可能应用商店搜索不到，需要在网络上下载。安装时若出现不可安装的情况，应打开手机设置--允许安装外部应用(根据机型自行解决)
- 安卓手机品牌过多，这里以华为P30和小米Note3为例。
  - 华为P30
  手机接入电脑后，根据PC提示选择操作方式(选择打开文件)，然后PC会打开一个文件夹，双击exe文件，安装华为手机助手，剩下的按照提示操作即可。在安装的同时，打开手机开发者模式，启用USB调试
  - 小米Note3
  手机接入电脑后，根据PC提示选择操作方式(选择操作文件)，之后打开手机开发者模式，启用USB调试
开始调试
- 在PC，打开Chrome，地址栏输入：chrome://inspect/#devices
- 手机打开Chrome，进入要调试的页面
- 如果前面的环境准备没问题的话，刷新PC第一步打开的页面，就可以看到手机打开的页面信息了，点击对应页面的inspect便可进入调试

附：

IOS设备配置whistle代理
- 点击设置--Wi-Fi，点击当前连接的wifi右边的那个i(圆圈中有个i)
- 点击HTTP代理的配置代理，选择手动，在服务器输入ip(PC的IPV4地址)，端口就输入代理端口，比如whistle就填写8899，保存
- 打开Safari，访问：rootca.pro，下载证书，安装
- 点击设置--通用--关于本机--证书信任设置，找到whistle证书，打开信任

巴特西

移动端调试Web页面

移动端调试Web页面

IOS

安卓

最新文章

热门文章