window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器
先上效果图
- 真机
- PC Edge
window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器
Safari 是 苹果配套的浏览器,正常来说如果使用的是 macOS 直接一条数据线就可以连接调试了
but 今天的主题是 window 系统调试 iOS 手机浏览器
如果要调试的界面没有 https
的话,直接用 spy-debugger 或者 whistle 也是很方便的。然而如果要调试 https 界面,证书都能搞掉半条命
安装需要的依赖包
重点:下面的操作都需要在 Window PowerShell 下执行(因为要安装 window 的包管理器,cmd 搞不定)
网络不好的多试几次
1、安装 scoop(windows 的包管理工具)
#修改执行策略,选择是 or 全是
set-executionpolicy unrestricted -s cu
#安装scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
2、通过 scoop 安装 ios_webkit_debug_proxy
# 安装 extras
scoop bucket add extras
# 安装 ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy
如果出现如下错误:Couldn’t find manifest for ‘ios-webkit-debug-proxy’.
主要原因还是 scoop bucket add extras 安装不太顺利。卸载 bucket 后重新安装
# 卸载
scoop bucket rm extras
# 重装
scoop bucket add extras
# 再次安装 ios-webkit-debug-proxy
scoop install ios-webkit-debug-proxy
3、安装调试依赖包
从这里开始的操作就 不是必须
要用 Window PowerShell。用 cmd 也可以,我习惯是用 git bash。看个人喜欢
安装 remotedebug-ios-webkit-adapter 之前必须安装了 vs-libimobile
注意 2 个命令都有 -g
安装到全局命令中,不然在其他地方用不了
npm install vs-libimobile -g
npm install remotedebug-ios-webkit-adapter -g
4、确保 iOS 启用了调试
设置 => Safari 浏览器 => 高级 => web 检查器 => 启用
5、数据线连接电脑
安装 iTunes 或者 爱思助手
安装的意义在于他们会调用 iOS 系统信任该电脑
- 爱思助手
如果电脑第一次连接手机,会直接弹出“信任该电脑”的操作,跟着提示走就行
- iTures
iTures 需要登陆,然后在绑定设备,一台手机最多绑定 5 台 PC 设备,反正也是跟着操作就行
6、启用调试
先连接好手机,把爱思/iTures
打开,然后执行(指定了 9000 端口):
remotedebug_ios_webkit_adapter --port=9000
然后打开 chrome://inspect/#devices
或者 edge://inspect/#devices
(就是浏览器的调试界面)
配置下端口,因为我启动监听的就是 9000。所以就用 localhost:9000
然后刷新下手机的界面等待片刻就能看到:
也会有等了好久都不出来界面的情况
第一次安装的时候有遇到过,不过后面没出现了~ 第一次等待很久的时候我是执行了下面这个命令(虽然写的是 chrome 可是我的 edge 也生效)
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
然后也是白屏~
我就把这个关了,重新下面的命令,发现就可以了~
remotedebug_ios_webkit_adapter --port=9000
最后
奇怪的调试技能又增加了。不过如果有 mac 就没有这样的烦恼了吧~
window 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器相关推荐
- 使用chrome调试手机,平板,pc上各种浏览器上的页面
使用chrome调试手机,平板,pc上多种浏览器的页面展示 作为web开发者,特别是现代web开发者,是否要调试手机,平板,电脑上的显示效果?chrome自带了这种很强大的神器 1.打开chrome( ...
- pc端debugger微信、电脑debugger微信、电脑调试 微信支付、pc调试 微信支付、电脑 调试真机微信、通过电脑调试手机真机打开的微信H5页面、通过电脑chrome调试手机真机打开的微信H5
pc端debugger微信.电脑debugger微信.电脑调试 微信支付.pc调试 微信支付.电脑 调试真机微信.通过电脑调试手机真机打开的微信H5页面.通过电脑chrome调试手机真机打开的微信H5 ...
- ios中safari浏览器中window.open()无效的问题
除了sadari以外的浏览器,点击按钮后都会成功开启新页面.而在safari中认为window.open()是一种弹窗,而safari浏览器阻拦弹出式视窗.我这里是在uniapp中处理的方式,其他可自 ...
- ios运行html游戏,Html游戏 - IOS的Safari浏览器崩溃
我正在运行一个HTML应用程序开发使用打字稿,pixi.js webgl,网络音频.Html游戏 - IOS的Safari浏览器崩溃 游戏在各种设备和浏览器上的windows和android上运行 ...
- iOS中Safari浏览器select下拉列表文字太长被截断的处理方法
网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...
- ios的Safari浏览器下视频播放问题
ios的Safari浏览器下视频播放问题 起因 原因: 解决方案: 示例代码 起因 最近在做手机端接口对接,后端使用java,前端使用vue开发,在提供给前端视频接口时出现了个问题: 视频在安卓上可以 ...
- chrome调试手机网页
chrome 手机调试 写在前面 相信很多人都试过,在电脑调试一点问题都没有,可是到了手机端各种问题,兼容.数据捕获 等问题 很多时候我们都是通过 vconsole 进行调试.(至于怎么用就自行百度, ...
- 关于手机端ios手机自带safari浏览器网页缩放问题
** 前几天我做了一个bs的项目,在安卓的手机上面用户是可以禁止缩放的.但是在ios手机自带的safari浏览器上是可以缩放的,怎么解决的呢 通过我的各种搜索 终于找到了解决办法 ** window. ...
- 在Windows上调试iPhone/iPad的safari浏览器
众所周知 在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chr ...
最新文章
- 4.6 大数据集-机器学习笔记-斯坦福吴恩达教授
- 非法ip通过ssh成功登录,自动结束会话
- 数据中心用多模光纤技术及发展趋势
- AliOS Things 硬件抽象层(HAL)对接系列2 — SPI driver porting
- 关于Android定制Launcher
- 网站攻击软件_如何防止网站建设中出现安全问题?
- ZeroC ICE源代码中的那些事 - 嵌套类和局部类
- JVM系列(三)— Java内存模型
- Spring配置补充
- 页面优化必须知道的技能:meta标签中的http-equiv属性使用介绍
- 登录注册页面html模版
- Java学习---控制流程与方法
- Vue - 姓名案例
- KeyShot 11.1 现已推出
- springboot和springMVC
- ant弹窗_【React】急:请问ant modal(弹出框)怎么修改样式?
- oracle整理笔记
- 软件测试sd卡真伪,亲测,拼多多上买的SD卡到底是不是正品
- JavaScript+css实现的计时器动画素材html页面前端源码
- AnyDesk on macOS 遇见连接不上的问题