关于safari:使用Safari或者Chrome远程调试IOS-Safari中的页面

【转载请注明出处】：https://blog.csdn.net/huahao1989/article/details/108020899

1 应用 Safari 浏览器调试

1.1 关上 Mac 的 Safari 浏览器的“开发”菜单

运行 Safari 浏览器，而后顺次选取“Safari 浏览器”>“偏好设置”，点按“高级”面板，而后勾选“在菜单栏中显示开发菜单”。

1.2 开启 IPhone 的 Safari 调试模式

启用 Web 查看 性能，关上 iPhone 顺次进入 设置 > Safari 浏览器 > 高级 > 网页查看器 > 启用。

1.3 调试步骤

先用 IPhone 的 Safari 关上要调试的页面，而后将 IPhone 连到 Mac 上，关上 Mac 的 Safari 浏览器，在“开发”菜单中选择连贯的手机，找到调试的网页，就能调试了。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-R87pDPaA-1597465930291)(https://upload-images.jianshu…]
下面这个图是我关上的 3g.163.com 的页面，接下来就能够应用元素、网络等，配合断点来调试页面了。

2 应用 Chrome 浏览器调试

先将 IPhone 手机连上电脑进行上面的操作。

2.1 装置部署 ios-webkit-debug-proxy

在 Mac 终端中输出如下命令间接应用 brew 装置，等装置实现之后启动 proxy。

brew install ios-webkit-debug-proxy
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

过程中遇到的问题
执行 ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html 时报错

Listing devices on :9221
Could not connect to lockdownd, error code -21. Exiting.
Unable to attach 8cceb9fa5b75c633c39a51c0d2f03980fadd9c5d inspector

开始因为权限不够，加 sudo 再次执行，还是报错

Listing devices on :9221
Could not connect to lockdownd, error code -3. Exiting.
Unable to attach 8cceb9fa5b75c633c39a51c0d2f03980fadd9c5d inspector

其实基本不是权限的事，须要重新安装以下安装包

brew update
brew reinstall libimobiledevice
brew reinstall -s ios-webkit-debug-proxy

从新执行命令，这下连贯胜利了，如果还是不胜利，请参考 https://github.com/libimobiledevice/libimobiledevice/issues/717
连贯胜利如图所示

2.2 调试步骤

在 Mac 的 Chrome 中关上 localhost:9221，能够看到以后已连贯的设施列表，找到设施而后点击进去。

这时候能够看到还没关上任何页面，用手机浏览器关上网页之后再刷新这个页面

右上角关上开发者工具，而后再关上 Remote devices 面板

间接点击上面的链接关上设施接口面板

这时候在 Remote Target 就能够看到手机上关上的页面，点击 inspect 关上

满怀期待，后果是白屏，啥也看不见，起初认真看了 ios-webkit-debug-proxy 的文档，这外面有这么一段话

起因就是最新版本的 Chrome 近程调试协定和苹果的近程 Web 查看服务存在重大差别，不兼容了，倡议应用 remotedebug-ios-webkit-adapter 工程。
其实老版本的在关上 localhost:9221 页面看到手机上关上的页面之后能够间接右键，在新的标签页间接开始调试。既然新版不反对，那就依照官网的倡议持续搞吧。

Round Two！！！
仍然是装置依赖包

brew update
brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
brew uninstall libimobiledevice ios-webkit-debug-proxy usbmuxd   
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install --HEAD ios-webkit-debug-proxy

装置实现之后启动 adapter

remotedebug_ios_webkit_adapter --port=9000

在 Chrome 中关上 chrome://inspect 页面，而后依照下图增加适配器的地址就能够看到手机上关上的页面了。

点击 inspect 关上之后仍然白屏，一波三折啊，起初参考 https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/181

执行上面的命令

npm i -g remotedebug-ios-webkit-adapter@next
npm update remotedebug-ios-webkit-adapter -g
remotedebug_ios_webkit_adapter --port=9000

adapter 起来之后再次关上页面

相熟的画面终于进去了，能够调试了。

欢送关注“后端老鸟”公众号，接下来会发一系列的专题文章，包含 Java、Python、Linux、SpringBoot、SpringCloud、Dubbo、算法、技术团队的治理等，还有各种脑图和学习材料，NFC 技术、搜寻技术、爬虫技术、举荐技术、音视频互动直播等，只有有工夫我就会整顿分享，敬请期待，现成的笔记、脑图和学习材料如果大家有需要也能够公众号留言提前获取。因为自己在所有团队中根本都处于攻坚和探路的角色，搞过的货色多，遇到的坑多，解决的问题也很多，欢送大家加公众号进群一起交流学习。

【转载请注明出处】：https://blog.csdn.net/huahao1989/article/details/108020899