专栏首页服务端技术使用Safari或者Chrome远程调试IOS Safari中的页面
原创

使用Safari或者Chrome远程调试IOS Safari中的页面

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

1 使用Safari浏览器调试

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

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

image.png

1.2 开启IPhone的Safari调试模式

启用 Web 检查 功能,打开 iPhone 依次进入 设置 > Safari浏览器 > 高级 > 网页检查器 > 启用。

image.png

1.3 调试步骤

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R87pDPaA-1597465930291)(https://upload-images.jianshu.io/upload_images/9344364-b99b80eca1389ab3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

上面这个图是我打开的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

连接成功如图所示

image.png

2.2 调试步骤

在Mac 的Chrome中打开 localhost:9221 ,可以看到当前已连接的设备列表,找到设备然后点击进去。

image.png

这时候可以看到还没打开任何页面,用手机浏览器打开网页之后再刷新这个页面

image.png
image.png

右上角打开开发者工具,然后再打开Remote devices面板

image.png
image.png

直接点击下面的链接打开设备接口面板

image.png

这时候在Remote Target 就可以看到手机上打开的页面, 点击inspect打开

image.png

满怀期待,结果是白屏,啥也看不见,后来仔细看了ios-webkit-debug-proxy的文档,这里面有这么一段话

image.png

原因就是最新版本的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
image.png

在Chrome中打开 chrome://inspect 页面,然后按照下图添加适配器的地址就可以看到手机上打开的页面了。

image.png
image.png

点击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起来之后再次打开页面

image.png
image.png

熟悉的画面终于出来了,可以调试了。

欢迎关注 “后端老鸟” 公众号,接下来会发一系列的专题文章,包括Java、Python、Linux、SpringBoot、SpringCloud、Dubbo、算法、技术团队的管理等,还有各种脑图和学习资料,NFC技术、搜索技术、爬虫技术、推荐技术、音视频互动直播等,只要有时间我就会整理分享,敬请期待,现成的笔记、脑图和学习资料如果大家有需求也可以公众号留言提前获取。由于本人在所有团队中基本都处于攻坚和探路的角色,搞过的东西多,遇到的坑多,解决的问题也很多,欢迎大家加公众号进群一起交流学习。

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 互动直播之WebRTC服务器Kurento实战

    【转载请注明出处】:https://cloud.tencent.com/developer/article/1631966

    后端老鸟
  • CentOS 6 安装 Chrome最简单的方法

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

    后端老鸟
  • 看了这篇,关于浏览器缓存你还有哪些疑问?

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

    后端老鸟
  • 使用rdesktop来在Windows和Linux之间共享数据

    rdesktop是一个开源的远程桌面客户端,用来从Linux机器连接到Windows机器。它遵循RDP协议(Remote Desktop Protocol),并...

    王云峰
  • Go 语言,开源服务端代码自动生成 框架 - EasyGoServer

    EasyGoServer 作者:林冠宏 / 指尖下的幽灵 腾讯云+社区:https://cloud.tencent.com/developer/user...

    林冠宏-指尖下的幽灵
  • SpringBoot 系列教程 Mybatis+xml 整合篇

    MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集...

    一灰灰blog
  • 本体技术视点 | Wasm重磅登陆Ontology主网!Wasm合约开发必读入门教程(4)

    日前的政策利好将区块链推向了前所未有风口,“把区块链作为核心技术自主创新重要突破口,加快推动区块链技术和产业创新发展”成为了区块链行业最新的工作指示。我们感到十...

    本体Ontology
  • 以太坊DApp系列(二)---从入门到出家

    以太坊自2013年V神提出后,被无数人赋予美好的愿景,甚至被称为区块链2.0,其代币发行量更是达到了全球第二,仅次于比特币,而其带来的智能合约概念颠覆了人们对区...

    forrestlin
  • Yii2之数据库迁移(Migrate)

    进入项目的根目录,windows系统在当前根目录打开DOS命令行,以下所有的指令都是在这执行。 ps:如果windows8及以上的可以使用Windows Po...

    botkenni
  • Bytom Dapp 开发笔记(二):开发流程

    这章的内容详细分析一下涉及智能合约Dapp的整个开发流程,注意是涉及只能合约,如果你只要一些基本转BTM功能没有太大意义,本内容补充一下官方提供的 比原链DAP...

    比原链Bytom

扫码关注云+社区

领取腾讯云代金券