前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >在Windows上调试iPhone/iPad的safari浏览器

在Windows上调试iPhone/iPad的safari浏览器

作者头像
用砖头敲代码
发布于 2023-03-25 05:13:24
发布于 2023-03-25 05:13:24
4.4K01
代码可运行
举报
文章被收录于专栏:用砖头敲代码用砖头敲代码
运行总次数:1
代码可运行

众所周知

在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chrome Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核,所以只能调试safari了)

准备工作

  • Windows 10/11 - 当然win也可以,前提是PowerShell版本大于3
  • Scoop - Windows上面最好用包管理器
  • iPhone - 建议iPhone 14 Pro Max 1TB,如果没有的话,有Safari也行
  • 数据线 - 这个不用我多说了吧,得有线连接

安装环境

首先打开Windows上面的Powershell,我们需要先装Scoop,由于Scoop的仓库在Github上面,所以你懂的应该做什么。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
set-executionpolicy remotesigned -scope currentuser
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

如果不出意外,这个时候应该就装好了,会出现一行小绿字,就像下面这样。如果是红字,那就自行Bing找原因吧。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Scoop was installed successfully!

由于Scoop的仓库都在Github上面访问很不方便,所以说我们需要将仓库地址换成国内平台(Gitee),这样速度可以起飞。当然,如果你相信你的访问国外网站的话,也可以不换。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
scoop config SCOOP_REPO https://gitee.com/glsnames/scoop-installer

成功的话,会出现下面这样的提示

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
'SCOOP_REPO' has been set to 'https://gitee.com/glsnames/scoop-installer'

然后更新一下依赖,就像使用apt-get update一样简单

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
scoop update

到这,如果不出问题,就已经装好了Scoop,接下来就可以去装远程调试需要的依赖了,命令也很简单,就两行。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
scoop bucket add extras
scoop install ios-webkit-debug-proxy

接下来,我们需要一个Node.js环境,由于我有这个,相信大部分人也有,所以安装和换国内源的步骤就不写了。 直接用npm安装remotedebug-ios-webkit-adapter就完事了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install remotedebug-ios-webkit-adapter -g

至此,全部的环境,就安装完毕了。

远程调试

打开你的iPhone设置,找到Safari浏览器,然后划到最下面高级,之后开启网页检查器,然后使用数据线将iPhone连接到电脑,在手机的弹窗中选择信任该电脑即可,如果没有提示可能是你没安装iTunes,如果不会装请自行Bing,或者直接装个爱思助手也行。

接着在你的PowerShell里面启动remotedebug_ios_webkit_adapter

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
remotedebug_ios_webkit_adapter --port=9000

之后打开你的Chrome浏览器(如果没有的话Edge也是平替),输入网址chrome://inspect/#devices(如果是Edge则是edge://inspect/#devices),点Configure...,输入localhost:9000就完成了。

这时候在你的safari浏览器里面打开你要调试的网页,就能在Remote Target中看到了,剩下的就不用我多说了吧。

如无特殊说明《在Windows上调试iPhone/iPad的safari浏览器》为博主MoLeft原创,转载请注明原文链接为:https://moleft.cn/post-291.html

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
如何使用谷歌浏览器远程调试安卓/ios真机H5应用?
今年年初受疫情的影响,给大部分同事办公带来了不便,因此,公司今年开始着手移动办公,将部分原来需要在PC端操作的功能逐渐增加到了移动端,开发了很多的H5报表。因为是内部用的功能,在测试的时候也没有可以去关注兼容性和一些app端的专项测试,我们只是负责测试自己部门开发的轻应用,接入到公司的平台中能不能正常使用。
小博测试成长之路
2021/03/06
2.6K0
自动化-Appium-元素定位工具
本章节讲解Android / IOS常用的元素定位工具,针对包括原生(APP)、Web(WEBVIEW)和混合(APP与WEBVIEW)。
wangmcn
2022/07/25
4.9K1
自动化-Appium-元素定位工具
使用Safari或者Chrome远程调试IOS Safari中的页面
【转载请注明出处】:https://blog.csdn.net/huahao1989/article/details/108020899
后端老鸟
2020/08/15
23.7K0
使用Safari或者Chrome远程调试IOS Safari中的页面
iPhone页面的常用调试方法
某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们
书童小二
2018/09/03
3.4K0
iPhone页面的常用调试方法
Safari/Chrome调试WebView
大多数App会选择H5去实现某些弱交互但是却需要热更新界面,这时候WebView就派上用场了,那么如何对WebView进行调试呢?
conanma
2021/06/08
1.5K0
通过 Mac 远程调试 iPhone/iPad 上的网页
我们知道在 Mac/PC 上的浏览器都有 Web 检查器这类的工具(如最著名的 Firebug)对前端开发进行调试,而在 iPhone/iPad 由于限于屏幕的大小和触摸屏的使用习惯,直接对网页调试非常不方便,所以一直没有 Web 检查器这一类工具,但是 iOS 6 的发布解决了这个问题。
Denis
2023/04/14
1.9K0
通过 Mac 远程调试 iPhone/iPad 上的网页
笔记 | 远程调试手机微信内置浏览器步骤
已经逐渐成为了很多项目的重要适配对象。作为一款国民级应用,他的调试却并不像普通浏览器那样开放。
Zkeq
2022/05/18
7.8K2
笔记 | 远程调试手机微信内置浏览器步骤
在win10+chrome环境中调试ios-safari画面
手头上有个调试Echarts地图在ios端显示情况的任务,工作电脑是win10,因此在这里,找到了方法。
悠扬前奏
2019/05/30
2.2K0
如何调试移动端页面
作者:汪娇娇 时间:2018年6月2日 之前一段时间过于忙碌,积压了很多博客,现在慢慢来还债啦~~ 大家都知道,挂在PC端上的页面一旦出现问题,是比较容易进行调试的,只要下载对应的浏览器,打开控制台,打断点或直接看一下出问题的点,一般都能很快查出问题。但一旦移动端页面出现问题,尤其市面上安卓那么多机型,出了问题,连个调试方法都没有。那么,下面就给大家介绍一下我使用的一些调试方法吧。 一、Chrome DevTools 1、用数据线将电脑和手机连接起来; 2、打开手机的开发者模式 + USB 调试接口; 3、
jojo
2018/06/04
3.7K0
前端必须知道的开发调试知识 - 笔记
小技巧:不同类型的数据从 console 中打印出的颜色也不相同,可以借此判断数据类型
TagBug
2023/03/17
1.1K0
前端必须知道的开发调试知识 - 笔记
浏览器探针--JavaScript
HTTP规范(包括1.0和1.1版)明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号。 RFC 2616 (即HTTP1.1协议规范)是这样描述用户代理字符串的:
奋飛
2019/08/15
1.6K0
学会前端调试技巧,提升排错效率
我们系统程序的漏洞就叫 bug。世界上第一个 bug ,是 1946 年霍普发现了第一个电脑上的 bug,竟然是一只飞蛾“臭虫”。解决这些问题的过程叫做捉虫、调试,也就是 Debug。
黄啊码
2022/06/20
2K0
Safari浏览器正在杀死Web
苹果的 Safari 浏览器在支持 Web 功能方面远远落后于其他竞争对手,它或许会成为下一个 IE。
深度学习与Python
2021/10/28
1.1K0
为什么现在我特讨厌 Safari 浏览器?
原文链接:https://blog.perrysun.com/2021/07/15/for-developers-safari-is-crap-and-outdated/
逆锋起笔
2021/09/08
1.2K0
移动端Web开发调试之Weinre调试教程
原文地址:http://blog.csdn.net/freshlover/article/details/42640253
一个会写诗的程序员
2018/08/20
2.3K0
移动端Web开发调试之Weinre调试教程
移动端真机调试方法总结
最近要分析web页面,在安卓和ios上的性能差异,除了操作系统本身不同之外,应该还多地方要探究的,第一步就是要在真机上分析。所以总结一下几个方法。
winty
2019/12/20
1.8K0
移动端网页调试方案
移动端调试方案 页面容器 移动设备上的各种浏览器 各类app内的webview debug方案 Android端 iOS端 跨平台 抓包工具Charles 调试工具weinre 其他方案 附录:ES6标准兼容情况 页面容器 移动设备上的各种浏览器 chrome、safari、firefox、samsung browser
IMWeb前端团队
2019/12/04
1.3K0
使用Selenium调试Edge浏览器的常见问题与解决方案
在当今互联网时代,网页爬虫已经成为数据获取的重要手段。而Selenium作为一款功能强大的自动化测试工具,被广泛应用于网页爬取任务中。虽然Chrome浏览器是Selenium用户的常见选择,但在某些工作环境中,我们可能需要使用Edge浏览器来进行自动化测试。然而,Edge浏览器在调试和使用过程中会遇到一些特有的挑战,本文将深入探讨这些问题,并提供实用的解决方案。
jackcode
2024/08/07
6570
使用Selenium调试Edge浏览器的常见问题与解决方案
移动web真机调试方案
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
csxiaoyao
2019/09/18
1.5K0
移动web真机调试方案
Android WebView 调试方法
调试Android WebView中的h5页面,通常就是通过alert和抓包工具来定位问题,效率低且无法直接调试样式或打断点,可谓是事倍功半。本文介绍一下我在项目中使用的新方法,能够通过chrome的开发工具在原生 Android 应用中调试 WebView。 前提条件: Android4.4+ 基本原理: 1.在APP中启用 WebView 调试,开启调试后,Chrome DevTools才能对WebView进行远程调试; WebView.setWebContentsDebuggingEnabled(tr
用户1217459
2018/01/31
4K0
Android WebView 调试方法
相关推荐
如何使用谷歌浏览器远程调试安卓/ios真机H5应用?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验