如何使用chrome调试iphone页面?win10 remotedebug-ios-webkit-adapter 安装与使用

章昆琦
2023-12-01

使用chrome devtools 调试 iphone 页面,需安装 remotedebug-ios-webkit-adapter 工具。

开始

在使用此适配器之前,您需要确保安装了最新版本的iTunes,因为我们需要iTunes提供的一些库来与iOS设备通信。

一、安装依赖项

powerShell 版本建议5.1以上;.net版本建议4.5以上;

1、安装scoop(windows的包管理工具)

1、设置Scoop环境变量

$env:SCOOP='D:\Scoop'
[Environment]::SetEnvironmentVariable('SCOOP',$env:SCOOP,'User')

2、设置scoop global 环境变量

$env:SCOOP_GLOBAL='D:\ScoopGlobalApps'
[Environment]::SetEnvironmentVariable('SCOOP_GLOBAL',$env:SCOOP_GLOBAL,'User')

3、配置hosts

C:\Windows\System32\drivers\etc\hosts文件最后一行添加:

199.232.68.133 raw.githubusercontent.com

4、安装

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')  

2、通过scoop安装 ios_webkit_debug_proxy

scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

在使用此适配器之前,您需要确保安装了最新版本的iTunes,因为我们需要iTunes提供的一些库来与iOS设备通信。

3、安装最新版本的 remotedebug-ios-webkit-adapter

npm install remotedebug-ios-webkit-adapter -g

4、在Safari中启用远程调试
为了显示您的iOS设备,您需要启用启用开发者模式进行调试。

*Iphone => 设置 => Safari 浏览器 => 高级 => web检查器 => 启用*

5、让您的计算机信任您的iOS设备

将Iphone手机连接电脑,必须点击“信任”,并打开 itunes, 以确保手机连接。

6、打开你喜欢的命令行工具,运行以下命令:

remotedebug_ios_webkit_adapter --port=9000
#ios-webkit-debug-proxy 将自动为您运行 无需单独启动

7、 打开chrome, 输入网址: chrome://inspect/#devices

如下图所示,点击 inspect, 即可调试。

 类似资料: