【浏览器 - Mac实时调试iOS手机浏览器页面】

devtools/2025/2/7 2:27:01/

最近开发个项目,需要在 Mac 电脑上调试 iOS 手机设备上的 Chrome 浏览器,并查看Chrome网页上的 console 信息,本来以为要安装一些插件,没想到直接使用Mac上的Safari 直接可以调试,再此记录下,分享给需要的伙伴。步骤如下

  1. 手机设备和电脑连接:

    • 使用 USB 数据线将 iOS 手机设备连接到 Mac 电脑。
  2. iOS 设备上启用 Web 检查器:

  • 打开 iOS 设备上的设置应用。
  • 进入 Safari > 高级
  • 启用 Web 检查器
  1. 在 Mac 上打开 Safari 浏览器

    • 打开 Safari 浏览器
    • 进入 Safari > 设置 > 高级
    • 启用 网页开发者功能
  2. 在 iOS 设备上打开 Chrome 浏览器

    • 打开 Chrome 浏览器并导航到你想要调试的网页。
  3. 在 Mac 上使用 Safari 开发者工具:

    • 在 Safari 浏览器中,点击菜单栏中的 开发 菜单。
    • 你应该会看到连接的 iOS 设备及其打开的网页列表。
    • 找到并选择 Chrome 浏览器中打开的网页。
  4. 调试网页:

    • Safari 开发者工具会打开一个新的窗口,显示 iOS 设备上 Chrome 浏览器中打开的网页。
    • 你可以使用这些工具来查看 console 信息、调试 JavaScript、检查元素等。

点击后,可以看到控制台,

鼠标在Mac Safair调试工具页面,手机上也会同步展示所选区域


http://www.ppmy.cn/devtools/156680.html

相关文章

trinitycore服务器离线,原来是mysql里数据库flag设置为2离线状态了

先上结论: 登录trinitycore服务器的时候,显示服务器离线,原来是mysql里数据库flag设置为2离线状态了。修改flag的值为0,服务器就在线了,问题解决。 问题: 登录trinitycore服务器的时候,显示服…

亚博microros小车-原生ubuntu支持系列:22 物体识别追踪

背景知识 跟上一个颜色追踪类似。也是基于opencv的,不过背后的算法有很多 BOOSTING:算法原理类似于Haar cascades (AdaBoost),是一种很老的算法。这个算法速度慢并且不是很准。MIL:比BOOSTING准一点。KCF:速度比BOOST…

【Python深入浅出】Python 开启机器学习之旅:项目实战指南

目录 一、机器学习与 Python 的奇妙邂逅二、打造专属 “魔法工坊”:环境搭建(一)Python 安装秘籍(二)机器学习库大集合三、探索数据宝藏:以鸢尾花数据集为例(一)数据集探秘(二)数据读取与初步观察四、数据预处理魔法(一)特征与标签分离(二)数据集划分五、模型构建…

RabbitMQ深度探索:简单实现 MQ

基于多线程队列实现 MQ &#xff1a; 实现类&#xff1a; public class ThreadMQ {private static LinkedBlockingDeque<JSONObject> broker new LinkedBlockingDeque<JSONObject>();public static void main(String[] args) {//创建生产者线程Thread producer n…

Prompt提示词完整案例:让chatGPT成为“书单推荐”的高手

大家好&#xff0c;我是老六哥&#xff0c;我正在共享使用AI提高工作效率的技巧。欢迎关注我&#xff0c;共同提高使用AI的技能&#xff0c;让AI成功你的个人助理。 许多人可能会跟老六哥一样&#xff0c;有过这样的体验&#xff1a;当我们遇到一个能力出众或对事物有独到见解的…

C#中的委托(Delegate)

什么是委托? 首先,我们要知道C#是一种强类型的编程语言,强类型的编程语言的特性,是所有的东西都是特定的类型 委托是一种存储函数的引用类型,就像我们定义的一个 string str 一样,这个 str 变量就是 string 类型. 因为C#中没有函数类型,但是可以定义一个委托类型,把这个函数…

单片机基础模块学习——NE555芯片

一、NE555电路图 NE555也称555定时器,本文主要利用NE555产生方波发生电路。整个电路相当于频率可调的方波发生器。 通过调整电位器的阻值,方波的频率也随之改变。 RB3在开发板的位置如下图 测量方波信号的引脚为SIGHAL,由上面的电路图可知,NE555已经构成完整的方波发生电…

【深度学习】图像识别模型与训练策略

一、预处理与数据增强模块 transforms transforms通常指torchvision.transforms 1.调整尺寸 transforms.Resize()&#xff1a;将输入图像的尺寸调整为指定的大小 2.裁剪 transforms.CenterCrop()&#xff1a;从图像中心进行裁剪&#xff0c;剪裁出指定大小的区域 transf…