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 的官方文档,里面有更详细的说明。

目录
相关文章
|
语音技术 开发工具 图形学
Unity与IOS⭐一、百度语音IOS版Demo调试方法
Unity与IOS⭐一、百度语音IOS版Demo调试方法
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
2119 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
Web App开发 iOS开发 开发者
Mac——基于Similator和Safari调试移动端页面
最近在开发移动端,需要在iphone环境下做一些调试,查看下是否有问题,但是手头上没有真机,不过当前主力本换成了`Mac`,所以就可以先用`Simulator`来调试下。
1463 8
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
iOS开发 开发者
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
iOS schem 和 Universal Link 在调试时的踩坑记录
|
Web App开发 JavaScript iOS开发
iOS Safari 浏览器 100vh 带有滚动条解决方案
iOS Safari 浏览器 100vh 带有滚动条解决方案
1040 0
|
Web App开发 iOS开发
Mac Safari 配置 IE 代理 (支持 IE 调试)
Mac Safari 配置 IE 代理 (支持 IE 调试)
1965 0
|
小程序 IDE API
iOS 端预览和调试小程序| 学习笔记
快速学习 iOS 端预览和调试小程序。
iOS 端预览和调试小程序| 学习笔记
|
小程序 IDE API
IOS 端预览和调试小程序|学习笔记
快速学习 IOS 端预览和调试小程序
304 0
IOS 端预览和调试小程序|学习笔记
|
Web App开发 前端开发 JavaScript
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”
679 0
WebKit 官宣 Safari 16 Beta 版 Web 新功能!开发者“你在强迫让 iOS 浏览器都用 Safari ?”