移动端调试Web页面

移动端调试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证书，打开信任