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

先放个原版教程连接,请戳这里 https://github.com/RemoteDebu...

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

这个 adapter 可牛批坏了,能够经过VS Code,Chrome DevTools,Mozilla Debugger.html和其余与Chrome调试协议兼容的工具调试iOS上的Safari和WebViews。ios

且看如下具体步骤。git

开始

在使用此适配器以前,您须要确保安装了最新版本的iTunes,由于咱们须要iTunes提供的一些库来与iOS设备通讯。github

安装依赖项

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

#修改执行策略,选择是 or 全是
set-executionpolicy unrestricted -s cu
  #安装scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

二、经过scoop安装 ios_webkit_debug_proxychrome

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

三、安装最新版本的 remotedebug-ios-webkit-adapternpm

npm install remotedebug-ios-webkit-adapter -g

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

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

五、让您的计算机信任您的iOS设备
将Iphone手机链接电脑,必须点击“信任”,并打开 itunes, 以确保手机链接。浏览器

六、打开你喜欢的命令行工具,运行如下命令:app

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

clipboard.png

七、 打开chrome, 输入网址: chrome://inspect/#devices
以下图所示,点击 inspect, 便可调试。

clipboard.png

恭喜你,如今能够愉快的调试网页了

clipboard.png

如下是iphone上看到的效果:

*指哪打哪,简直不要太牛批*

clipboard.png

PS请多多指正!别忘记点个赞哟~ 并回敬您一个猿式的微笑:)

相关文章
相关标签/搜索