使用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.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
连接成功如图所示
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
- 使用shell脚本查看数据库负载情况(第二篇)(r3笔记第92天)
- tensorflow LSTM + CTC实现端到端OCR
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
- 黑客比程序员牛在哪?
- oracle工具集初探(r4笔记第8天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(二)Log4j讲解与整合
- 京东JData算法大赛-高潜用户购买意向预测(github源码)
- 巧用linux命令做图片下载器(r4笔记第7天)
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(四)单元测试实例
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(五)结合MockMvc进行服务端的单元测试
- 关于order by中的数据排序(r4笔记第6天)
- 深度学习CTPN+CRNN模型实现图片内文字的定位与识别(OCR)
- Markdown语法讲解及MWeb使用教程
- 通过Linu命令实现屏幕录制和回放(r4笔记第5天)
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- typescript实战总结之实现一个互联网黑白墙
- 文件上传漏洞演示(一句话木马文件 + 蚁剑)
- [Bazel]构建Golang项目
- 2020--IDEA破解失败后无法打开(mac/win)【已解决】
- CPU:别再拿我当搬砖工!
- 7类 登录/注册 安全漏洞
- 安全弹出你的移动设备,保护数据安全!
- burpsuite系列
- idea_Maven_setting文件依赖源国内镜像
- Wapiti安装及使用
- 利用burpsuite+sqlmap POST自动化注入详解
- GSoC: GitHub Checks API 项目第一阶段总结
- GoldenEye靶机渗透
- RBash - 受限的Bash绕过
- 【Rust日报】2020-08-10:在 Rust 中存储连续数据