各类联调小技巧

Yvonne_
435 阅读5分钟

前言

前端开发过程难免要不停的进行移动端的设备调试，以下记录了我这些年四处收集到的联调小技巧

1. Mac 调试 ios 设备上的 safari 页面

（1）确保 Mac 上 safari的开发菜单处于启用状态

  • Mac 左上角 > safari浏览器 > 设置 > 高级 > 勾选 在菜单栏中显示开发菜单

（2）确保ios设备的safari浏览器处于可调试状态

  • ios 设备打开设置 > safari浏览器 > 高级 > 打开网页检查器

（3）使用数据线将 ios 设备连接到 Mac

（4）ios 设备打开safari，跳转到要检查的网站

（5）Mac 打开safari，在开发菜单中，鼠标悬停在已连接的设备名称上

2. Mac 调试 ios 设备上的 Chrome 页面

（1）确保 Mac 上 safari的开发菜单处于启用状态

  • Mac 左上角 > safari浏览器 > 设置 > 高级 > 勾选 在菜单栏中显示开发菜单

（2）确保ios设备的Chrome浏览器处于可调试状态

  • ios 设备启用Chrmoe应用 > 设置 > 内容设置 >启用网络检查器 > 重启Chrome浏览器

（3）使用数据线将 ios 设备连接到 Mac

（4）ios 设备打开Chrome，跳转到要检查的网站

（5）Mac 打开safari，在开发菜单中，鼠标悬停在已连接的设备名称上

Mac 使用 safari 调试的时候这边我有遇到过一个问题，虽然设备连接成功了，但是检查到的页面，控制台输出内容为空，解决方案如下：

（1）重启 Mac safari浏览器，重启对应的 ios 设备浏览器

（2）如果重启无法解决的话，可以查看一下Mac的系统版本是否是新版，升级可以解决百分之99的问题

3. pc 端 调试 安卓设备的浏览器页面

(1) 使用数据线将电脑和手机连接

  • 第一次连接，可能还需要安装相关的驱动

(2) 设置 > 找到开发者模式 > USB 配置 > 选择 USB连接

  • 具体的安卓设备的路径可能有所不同，但是一定都是要选择USB连接

(3) pc 端打开 Chrome 浏览器访问：chrome://inspect/#devices，或者 Edge 浏览器访问：edge://inspect/#devices 即可

(4) 安卓打开对应浏览器，访问要调试的页面，如果该浏览器允许调试的话，就可以看见网页上出现可调试链接选择

  • 也可在open tab with url 输入自己想访问的地址 点击open 下面就会出现那个地址

(5）点击inspect打开调试窗口

这边需要注意，大概率安卓设备只能调试它自带的浏览器或者Chrome 浏览器 （6）如果一直连接不上手机，手机也没有出现任何的授权弹框，可打开终端输入

adb devices

4. pc 端 调试 安卓设备的火狐页面

（1）使用数据线将电脑和手机连接

（2）在电脑上打开 Firefox 浏览器 > 菜单 > 工具 > 浏览器工具 > 启用USB调试

（3）在手机的 Firefox 浏览器中，转到设置 > 高级 > 远程调试，启用远程调试功能。

（4）在电脑侧边栏选择对应的设备，手机上打开对应页面就可以调试了

4. Mac 抓取 ios 设备 App 接口请求地址

（1）使用数据线连接ios设备与Mac

（2）在Mac中找到控制台这个app（系统自带的软件），并选取对应的设备名称，点击开始

（3）打开对应的ios设备上的app，进行接口请求，就可以看见一堆输出内容

这边要善用一下控制台上的搜索功能，可能更好、更快的找到想要的信息

5. pc 端使用花瓶抓取 ios、安卓设备接口请求地址

(1) pc上安装花瓶（Charles）

WeChateba2d3aae5659dd91fd5f27cbde377a6.jpg

(2) pc 安装证书：help > SSL Proxying > Install Charles Root Cerificate > 点击安装证书

  • win：选择当前用户 > 将所有的证书都放入下列存储 > 受信任的根证书颁发机构 - 下一步
  • mac：找到Charles证书，设置始终信任

(3) 查看当前网络的ip和端口：help > SSL Proxying > Install Charles Root Cerificate on a Mobile Device or Remote Browser

(4) 手机和电脑连接同一个Wi-Fi

(5）手机选择已连接的wifi > 修改网络 > 代理 > 手动 > 输入上面获取到的ip和端口 - 保存

(6) pc花瓶界面出现弹窗，点击 Allow，此时http已经配置完成了

(7）pc花瓶 > Proxy > SSL Proxying Settings > 勾选Enable SSl Proxying > 点击 Add > 填入以下信息

  • 开启443端口，因为443为https端口

WeChat2c46cbecc61b791d47b6290b78fa608f.jpg

（8）手机安装charles证书：浏览器输入: chls.pro/ssl ,下载对应的证书，下载完成后

  • 安卓：设置 > 安全 > 从手机存储和SD卡安装（找不到这个选项的话，就直接搜索证书 / CA之类的关键词） > 如果提示找不到证书的话，找到浏览器下载的文件，移动到 /手机存储(storage)这个文件的根目录下，再从手机存储和SD卡安装 > 进行证书安装
    • 安卓设备大概率需要root才可以成功
  • ios：设置 > 通用 > 关于本机 > 证书信任设置 > 打开charles proxy ca 证书选项

（9）请求对应接口，pc上就可以正常抓取查看了

这边也可以使用其他的软件进行抓取，只是我比较常用的是花瓶 如果pc端的花瓶证书过期的话，可以通过 help > SSL Proxying > Rest Charles Root Cerificate 重新安装

6. 其他的方式

（1）使用weinre通过PC浏览器调试手机网页

7.其他的注意点

（1）有些移动端设备必须要在充电状态下连接pc端才可调试，如果移动端电量是100%的话，有可能会联调失败

avatar
文章
阅读
粉丝