windows10 chrome 调试 ios safari 方法

简介: windows10 chrome 调试 ios safari 方法 需求背景 在做一个项目时,发现某些图片在安卓设备和电脑上能正常显示,但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑,所以需要在Windows中对苹果系统进行网页调试

windows10 chrome 调试 ios safari 方法

需求背景

在做一个项目时,发现某些图片在安卓设备和电脑上能正常显示,但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑,所以需要在Windows中对苹果系统进行网页调试。

系统环境

电脑操作系统:Windows 10 专业版 64位 (10.0,版本 14393)

iPad操作系统:iOS 10.3.2

安装前准备

要保证iPhone/iPad能使用USB与电脑正常连接

在iOS中打开调试模式:设置->Safari->高级->Web 检查器

安装

  1. 安装 scoop

# 使用 Powershell 进行安装
https://github.com/lukesampson/scoop

iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

如果失败可尝试以下方式安装

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/lukesampson/scoop/master/bin/install.ps1')

# 如果安装失败,请执行以下命令再重新安装

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
  1. 安装ios-webkit-debug-proxy

# 在 Powershell 中执行

scoop bucket add extras

如果超时可以下载 (https://github.com/lukesampson/scoop-extras/)[https://github.com/lukesampson/scoop-extras/] 解压后存放 scoop/extras/ 目录下

(https://github.com/google/ios-webkit-debug-proxy)[https://github.com/google/ios-webkit-debug-proxy]

scoop install ios-webkit-debug-proxy

使用

链接设备、打开 iTunes

  1. 启动 ios-webkit-debug-proxy

# 在 Powershell 中执行,-f 表示指定前端工具,这里使用 chrome-devtools 进行调试

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

执行成功后,Powershell窗口会显示

Listing devices on :9221
Connected :9222 to 你的设备名称
  1. 打开网页

在chrome浏览器中输入localhost:9221,如果进入网页后出现Inspectable pages for 你设备的名称字样,表示连接成功,然后在iPhone/iPad中使用Safari打开网页,再刷新电脑上的chrome,就会出现一个超链接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1),然后右键复制链接地址并在新标签中打开,就可以像在电脑中一样对网页进行调试了。

补充

如果没有连接成功,或碰到其它什么问题,可以查看 ios-webkit-debug-proxy 的官方文档,里面有更详细的说明。

目录
相关文章
|
8天前
|
XML C# 数据格式
掌握了在Windows平台上查看DLL依赖的方法
掌握了在Windows平台上查看DLL依赖的方法
66 4
|
6月前
|
Android开发 iOS开发 计算机视觉
Airtest新增iOS、Windows录屏功能,真香!
Airtest新增iOS、Windows录屏功能,真香!
168 0
|
4月前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为'eager',并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
129 2
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
12天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
15天前
|
弹性计算 数据安全/隐私保护 Windows
阿里云国际版无法远程连接Windows服务器的排查方法
阿里云国际版无法远程连接Windows服务器的排查方法
|
2月前
|
存储 开发者 Windows
WINDOWS 环境变量设置方法
本文旨在帮助使用Windows电脑的开发者们为其设备配置环境变量,以更好地支持大模型应用的开发工作。文中详细介绍了三种配置方法:一是将环境变量设置为系统级变量;二是在命令行界面通过`SET`命令或`PowerShell`临时设置变量;三是借鉴MAC的方式,创建全局环境变量文件`.zshrc`进行配置。这些方法简单实用,便于根据实际需求选择适合的方式进行配置。
|
21天前
|
安全 Windows
Windows系统实现exe服务注册的方法都有哪些?
【10月更文挑战第5天】Windows系统实现exe服务注册的方法都有哪些?
177 0
|
24天前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
23 0
|
26天前
|
网络协议 安全 调度
关闭Windows自动更新的6种方法
本文介绍了六种关闭Windows自动更新的方法,包括使用服务管理器、组策略编辑器、修改注册表、任务计划程序、网络连接设置和命令行。
638 0
|
2月前
|
Web App开发 iOS开发 开发者
Mac——基于Similator和Safari调试移动端页面
最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。
65 8