Windows下利用Chrome调试IOS设备页面

2020-05-20 来源: Ruoh3kou 发布在  https://www.cnblogs.com/ruoh3kou/p/12587012.html

本文介绍如何在 Windows 系统中连接 iOS设备 并对 Web 页面进行真机调试


必须前提

  1. iOS设备、数据线
  2. Node.js 环境
  3. Chrome 浏览器

环境准备

  1. 安装Node环境

    参考Node安装的教程,确保终端输入node时可正常使用

  2. 安装 scoope 以及相关配置

    为了安装后续需要用的工具 remotedebug-ios-webkit-adapter

    打开win下的powershell(最好使用管理员权限运行)

    依次输入:

    Set-ExecutionPolicy RemoteSigned -scope CurrentUser
    iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
    scoop bucket add extras
    scoop install iOS-webkit-debug-proxy
    npm install -g vs-libimobile
  1. 安装 remotedebug-ios-webkit-adapter

    该调试方法最核心的部分,就是依赖该工具

    打开win下的powershell或其他终端软件

    npm install remotedebug-ios-webkit-adapter -g

  2. iOS设备点开 设置 > Safari 浏览器 > 高级 > Web 检查器,开启该选项。

  3. iOS设备连接电脑,信任该电脑

  4. 打开终端,执行该命令:

    remotedebug_iOS_webkit_adapter --port=9000

  5. iOS端打开safari浏览器;PC端打开Chrome,进入 chrome://inspect/#devices 页面,并在 Discover network targets 选项添加 localhost:9000 配置。

    此时刷新iOS页面,在Chrome中可看到iOS当前的页面地址,点击inspect即可进入调试页面。

提示:

在首次点击inspect若出现白屏,似乎要爬一下梯

相关文章