如何检查 iPhone 上的元素:您需要知道的一切

您可以直接在 Safari 上检查网页元素吗?

简单回答是不。与许多其他移动浏览器一样,iOS 上的 Safari 不提供用于查看网页开发的本机检查工具。Apple 没有提供为什么没有这样一个选项的原因,但我们认为这与智能手机上的显示屏有多小有关。较小的显示尺寸可能会使用户更难浏览正在检查的框,因为当您想要编辑网页代码甚至定位代码时,您可能必须小心地放置光标。 

另一个原因可能是智能手机缺乏计算能力。尽管现代 iPhone 有足够的能力运行图形密集型游戏,但查看网站的页面信息可能会很棘手,因为并非所有网站都是平等创建的。有些网站可能有很多资源和层,它们经过精心设计以使其看起来无缝,但在检查时可能需要一些时间来加载相同的资源。 

在 iPhone 上检查 Element:您还有哪些其他选择?

虽然您无法在 iOS 上的 Safari 应用程序上使用“检查元素”工具,但仍有办法解决此限制。下面提供了三种方法,您可以检查您在 iPhone 上的 Safari 上访问的网页元素。 

方法 #01:在 Mac 上使用 Safari

如果您除了 iPhone 之外还拥有 macOS 设备,那么您仍然可以直接从 Safari 应用程序检查网页,但在 Mac 上。Apple 允许您使用其“开发”工具在 iOS 上从 Safari 调试网页,就像在 Mac 上一样。虽然调试站点的过程相对简单,但其初始设置可能比您预期的要长。不过不用担心,我们将以最简单的方式解释设置过程,并帮助您在第一次之后轻松检查页面。 

在 iOS 上启用 Web Inspector

为了能够调试 Web 元素,您首先需要为 iOS 上的 Safari 应用程序启用 Web Inspector。为此,请打开“设置”应用并选择“Safari”。

inspect-element-on-iphone-32-a

在 Safari 中,向下滚动并点击“高级”。 

inspect-element-on-iphone-31-a

在下一个屏幕上,点击“Web Inspector”旁边的切换按钮,直到它变成绿色。 

inspect-element-on-iphone-30-a

Mac 上的初始设置

在 iOS 上成功启用 Web Inspector for Safari 后,现在就可以在 Mac 上完成设置了。在 Mac 上,打开 Safari 应用程序,单击菜单栏中的“Safari”选项并选择“首选项”。 

inspect-element-on-iphone-with-mac-1-a

在出现的窗口中,从顶部选择“高级”选项卡,然后选中“在菜单栏中显示开发菜单”框。 

inspect-element-on-iphone-with-mac-2-a

您现在应该会看到“开发”选项出现在顶部的菜单栏中。 

inspect-element-on-iphone-with-mac-3-a

现在,使用 iPhone 随附的 USB 电缆,在 iPhone 和 Mac 之间建立连接。当你的 iPhone 连接到 Mac 时,你可以点击菜单栏上的“开发”,看看你的 iPhone 是否出现在设备列表中。如果是,请单击此列表中的设备名称。 

inspect-element-on-iphone-with-mac-4-a

为确保您可以无线检查网页而无需像刚才那样使用 USB 电缆,请在 iPhone 菜单打开时单击“通过网络连接”选项。 

inspect-element-on-iphone-with-mac-7-a

现在,您可以断开 iPhone 与 Mac 的连接,您仍然可以检查网页,而无需在它们之间连接电缆。 

在 Mac 上检查来自 iOS 的网页

现在您已经在“开发”菜单上启用了“通过网络连接”,您可以直接在 Mac 上从 iOS 上的 Safari 检查网页。您只需要确保 iPhone 和 Mac 都连接到同一个无线网络,即可无线调试网页。 

为此,请在您的 iPhone 上打开 Safari 应用程序并转到您要查看的网页。 

解锁 iPhone 并打开所选网页后,移至 Mac 并在那里打开 Safari 应用程序。在这里,单击菜单栏中的“开发”并转到“iPhone”。 

inspect-element-on-iphone-with-mac-4-a

当您将鼠标悬停在“iPhone”上时,您应该会看到在 iOS 上打开的网页列表。从该列表中单击要检查的网页。 

inspect-element-on-iphone-with-mac-8-a

Mac 上将加载一个新窗口,显示可以从所选网页检查的所有信息。 

inspect-element-on-iphone-with-mac-9-a

在您检查期间的任何时候,您都可以通过查找 iPhone 上的蓝色区域来查看一行代码指向页面的哪个部分。

inspect-element-on-iphone-29-a

此蓝色区域表示您在 Mac 上悬停的代码构成了此特定网页的突出显示元素。在不同的代码行之间移动将在 iPhone 上的页面的不同部分实时移动这个蓝色突出显示。 

方法 #02:在 iOS 上使用快捷方式 

如果您没有 Mac 或想直接从 iPhone 偷看网站,那么您会很高兴知道 iOS 快捷方式应用程序可以用于此目的。iOS 上的快捷方式应用程序提供了一系列预制选项,可让您查看页面的源代码、编辑网页、从网站抓取图像以及从 Safari 应用程序中查找网页的旧版本。不幸的是,没有单一的快捷方式可以在 iOS 上提供成熟的 Web 调试,因此您需要为每个目的添加一个快捷方式。 

我们找到了以下快捷方式,您可以使用这些快捷方式直接从 iOS 对网站进行调试。这些是:

查看源代码– 此快捷方式可让您以基本骨骼格式查看网页的源代码。 

inspect-element-on-iphone-2-a

编辑网页– 此快捷方式可让您在本地编辑网页内容,以便您可以测试新设计或格式以及它在 iPhone 上的外观。 

inspect-element-on-iphone-15-a

从页面获取图像——检查页面的一个主要原因可能是查看图像或保存那些不具有交互性的图像。此快捷方式从某个网页中抓取所有图像,然后对它们进行集中预览。正如下面的屏幕截图所示,您可以查看托管在所选网页上的 24 张图像中的每一张。 

inspect-element-on-iphone-5-a

Wayback Machine – 此快捷方式会将您带到网页的 Wayback Machine,您可以在其中查看其先前保存在 Internet Archive 中的版本。 

根据您在 iOS 上检查网页的方式,您可以通过单击上面的相关链接或在“快捷方式”>“图库”中搜索它们来将任何这些快捷方式添加到您的 iPhone。 

inspect-element-on-iphone-14-a

在搜索结果中,点击要添加到 iPhone 的快捷方式。 

inspect-element-on-iphone-21-a

当预览屏幕打开时,点击底部的“添加小部件”选项。 

inspect-element-on-iphone-20-a

你们所有的快捷方式都将出现在我的快捷方式 > 所有快捷方式屏幕中,它们也可以在 Safari 的共享表中访问。  

inspect-element-on-iphone-1-a

要检查网页,请在 Safari 上打开它,然后点击底部的“共享”按钮。 

inspect-element-on-iphone-8-a

在出现的共享表中,向下滚动并找到您添加到 iPhone 的快捷方式。 

inspect-element-on-iphone-7-a

选择“编辑网页”将直接让您编辑网页的部分内容。当您选择其他三个选项中的任何一个时,系统会提示您是否需要访问网页的快捷方式。在这里,点击“允许一次”。 

inspect-element-on-iphone-3-a

方法 #03:使用第三方应用

如果您对上述结果不满意,则必须探索第三方应用程序才能检查网页元素。与 Safari 类似,您找不到在最流行的网络浏览器(Chrome、Firefox、Brave 等)中检查网页的方法。相反,您将不得不依赖为执行此特定任务而创建的应用程序,而此类应用程序可能很难找到。

虽然在 App Store 上进行简单的搜索会为您提供多个检查网络元素的结果,但您不会发现许多免费提供且评价很高的应用程序。根据用户反馈,我们建议您安装 App Store 中的Inspect Browser或Gear Browser应用程序,它们提供对 JavaScript、CSS 和 HTML 的元素检查和编辑。

您可以直接在 Safari 上检查网页元素吗?

简单回答是不。与许多其他移动浏览器一样,iOS 上的 Safari 不提供用于查看网页开发的本机检查工具。Apple 没有提供为什么没有这样一个选项的原因,但我们认为这与智能手机上的显示屏有多小有关。较小的显示尺寸可能会使用户更难浏览正在检查的框,因为当您想要编辑网页代码甚至定位代码时,您可能必须小心地放置光标。 

另一个原因可能是智能手机缺乏计算能力。尽管现代 iPhone 有足够的能力运行图形密集型游戏,但查看网站的页面信息可能会很棘手,因为并非所有网站都是平等创建的。有些网站可能有很多资源和层,它们经过精心设计以使其看起来无缝,但在检查时可能需要一些时间来加载相同的资源。 

在 iPhone 上检查 Element:您还有哪些其他选择?

虽然您无法在 iOS 上的 Safari 应用程序上使用“检查元素”工具,但仍有办法解决此限制。下面提供了三种方法,您可以检查您在 iPhone 上的 Safari 上访问的网页元素。 

方法 #01:在 Mac 上使用 Safari

如果您除了 iPhone 之外还拥有 macOS 设备,那么您仍然可以直接从 Safari 应用程序检查网页,但在 Mac 上。Apple 允许您使用其“开发”工具在 iOS 上从 Safari 调试网页,就像在 Mac 上一样。虽然调试站点的过程相对简单,但其初始设置可能比您预期的要长。不过不用担心,我们将以最简单的方式解释设置过程,并帮助您在第一次之后轻松检查页面。 

在 iOS 上启用 Web Inspector

为了能够调试 Web 元素,您首先需要为 iOS 上的 Safari 应用程序启用 Web Inspector。为此,请打开“设置”应用并选择“Safari”。

inspect-element-on-iphone-32-a

在 Safari 中,向下滚动并点击“高级”。 

inspect-element-on-iphone-31-a

在下一个屏幕上,点击“Web Inspector”旁边的切换按钮,直到它变成绿色。 

inspect-element-on-iphone-30-a

Mac 上的初始设置

在 iOS 上成功启用 Web Inspector for Safari 后,现在就可以在 Mac 上完成设置了。在 Mac 上,打开 Safari 应用程序,单击菜单栏中的“Safari”选项并选择“首选项”。 

inspect-element-on-iphone-with-mac-1-a

在出现的窗口中,从顶部选择“高级”选项卡,然后选中“在菜单栏中显示开发菜单”框。 

inspect-element-on-iphone-with-mac-2-a

您现在应该会看到“开发”选项出现在顶部的菜单栏中。 

inspect-element-on-iphone-with-mac-3-a

现在,使用 iPhone 随附的 USB 电缆,在 iPhone 和 Mac 之间建立连接。当你的 iPhone 连接到 Mac 时,你可以点击菜单栏上的“开发”,看看你的 iPhone 是否出现在设备列表中。如果是,请单击此列表中的设备名称。 

inspect-element-on-iphone-with-mac-4-a

为确保您可以无线检查网页而无需像刚才那样使用 USB 电缆,请在 iPhone 菜单打开时单击“通过网络连接”选项。 

inspect-element-on-iphone-with-mac-7-a

现在,您可以断开 iPhone 与 Mac 的连接,您仍然可以检查网页,而无需在它们之间连接电缆。 

在 Mac 上检查来自 iOS 的网页

现在您已经在“开发”菜单上启用了“通过网络连接”,您可以直接在 Mac 上从 iOS 上的 Safari 检查网页。您只需要确保 iPhone 和 Mac 都连接到同一个无线网络,即可无线调试网页。 

为此,请在您的 iPhone 上打开 Safari 应用程序并转到您要查看的网页。 

解锁 iPhone 并打开所选网页后,移至 Mac 并在那里打开 Safari 应用程序。在这里,单击菜单栏中的“开发”并转到“iPhone”。 

inspect-element-on-iphone-with-mac-4-a

当您将鼠标悬停在“iPhone”上时,您应该会看到在 iOS 上打开的网页列表。从该列表中单击要检查的网页。 

inspect-element-on-iphone-with-mac-8-a

Mac 上将加载一个新窗口,显示可以从所选网页检查的所有信息。 

inspect-element-on-iphone-with-mac-9-a

在您检查期间的任何时候,您都可以通过查找 iPhone 上的蓝色区域来查看一行代码指向页面的哪个部分。

inspect-element-on-iphone-29-a

此蓝色区域表示您在 Mac 上悬停的代码构成了此特定网页的突出显示元素。在不同的代码行之间移动将在 iPhone 上的页面的不同部分实时移动这个蓝色突出显示。 

方法 #02:在 iOS 上使用快捷方式 

如果您没有 Mac 或想直接从 iPhone 偷看网站,那么您会很高兴知道 iOS 快捷方式应用程序可以用于此目的。iOS 上的快捷方式应用程序提供了一系列预制选项,可让您查看页面的源代码、编辑网页、从网站抓取图像以及从 Safari 应用程序中查找网页的旧版本。不幸的是,没有单一的快捷方式可以在 iOS 上提供成熟的 Web 调试,因此您需要为每个目的添加一个快捷方式。 

我们找到了以下快捷方式,您可以使用这些快捷方式直接从 iOS 对网站进行调试。这些是:

查看源代码– 此快捷方式可让您以基本骨骼格式查看网页的源代码。 

inspect-element-on-iphone-2-a

编辑网页– 此快捷方式可让您在本地编辑网页内容,以便您可以测试新设计或格式以及它在 iPhone 上的外观。 

inspect-element-on-iphone-15-a

从页面获取图像——检查页面的一个主要原因可能是查看图像或保存那些不具有交互性的图像。此快捷方式从某个网页中抓取所有图像,然后对它们进行集中预览。正如下面的屏幕截图所示,您可以查看托管在所选网页上的 24 张图像中的每一张。 

inspect-element-on-iphone-5-a

Wayback Machine – 此快捷方式会将您带到网页的 Wayback Machine,您可以在其中查看其先前保存在 Internet Archive 中的版本。 

根据您在 iOS 上检查网页的方式,您可以通过单击上面的相关链接或在“快捷方式”>“图库”中搜索它们来将任何这些快捷方式添加到您的 iPhone。 

inspect-element-on-iphone-14-a

在搜索结果中,点击要添加到 iPhone 的快捷方式。 

inspect-element-on-iphone-21-a

当预览屏幕打开时,点击底部的“添加小部件”选项。 

inspect-element-on-iphone-20-a

你们所有的快捷方式都将出现在我的快捷方式 > 所有快捷方式屏幕中,它们也可以在 Safari 的共享表中访问。  

inspect-element-on-iphone-1-a

要检查网页,请在 Safari 上打开它,然后点击底部的“共享”按钮。 

inspect-element-on-iphone-8-a

在出现的共享表中,向下滚动并找到您添加到 iPhone 的快捷方式。 

inspect-element-on-iphone-7-a

选择“编辑网页”将直接让您编辑网页的部分内容。当您选择其他三个选项中的任何一个时,系统会提示您是否需要访问网页的快捷方式。在这里,点击“允许一次”。 

inspect-element-on-iphone-3-a

方法 #03:使用第三方应用

如果您对上述结果不满意,则必须探索第三方应用程序才能检查网页元素。与 Safari 类似,您找不到在最流行的网络浏览器(Chrome、Firefox、Brave 等)中检查网页的方法。相反,您将不得不依赖为执行此特定任务而创建的应用程序,而此类应用程序可能很难找到。

虽然在 App Store 上进行简单的搜索会为您提供多个检查网络元素的结果,但您不会发现许多免费提供且评价很高的应用程序。根据用户反馈,我们建议您安装 App Store 中的Inspect BrowserGear Browser应用程序,它们提供对 JavaScript、CSS 和 HTML 的元素检查和编辑。

原创文章,作者:校长,如若转载,请注明出处:https://www.yundongfang.com/Yun101213.html

(0)
打赏 微信扫一扫不于多少! 微信扫一扫不于多少! 支付宝扫一扫礼轻情意重 支付宝扫一扫礼轻情意重
上一篇 2021年12月3日 下午2:43
下一篇 2021年12月3日 下午3:10

相关推荐

  • iPhone粘滞键问题:如何修复

    您的 iPhone 按钮是否卡住或被自动按下?这个问题,也称为“粘滞键”,可能非常成问题。您甚至无法增加或减少 iPhone 的音量,因为按键很粘。因此,在这种情况下,您可以尝试一…

    苹果Apple 2024年6月15日
  • iPhone卡在飞行模式:如何修复

    在某些情况下,飞行模式非常方便。但是,如果您的iPhone突然卡在其中,相同的飞行模式可能会让您头疼。在本文中,我们设计了这套解决方案,可以让您的iPhone退出飞行模式。 快速解…

    2024年6月15日 苹果Apple
  • iPhone电池突然掉落:修复

    iPhone电池突然掉线了吗?这个问题似乎影响了少数iPhone用户。电池电量的持续下降可能是一个严重的问题,需要用户注意。您可以执行某些检查并维护多种预防措施。因此,不要浪费一秒…

    2024年6月12日 苹果Apple
  • iPhone手势不起作用:如何修复

    手势在您的 iPhone 上不起作用?使用双击背面等手势快速截屏使 iPhone 更有用。因此,iPhone 上缺少这些关键手势可能会破坏您的用户体验。但是,有一个非常简单快捷的修…

    2024年6月12日
  • iPhone滞后问题:这是修复方法

    在iPhone上遇到滞后?就像其他手机一样,您有时可能会在 iPhone 上遇到抖动或滞后。但是,如果您使用哪种应用程序,iPhone开始一直滞后并显示出抖动的迹象,则不应进一步忽…

    2024年6月12日 苹果Apple
  • iPhone随机关机:修复

    您的iPhone是否随机关机?像其他微不足道的问题一样,你不应该掉以轻心。在几种情况下,您的iPhone可以随机关机。我们已经讨论了所有情况和可能的解决方案,并制定了详细的步骤。只…

    2024年6月1日 苹果Apple
  • iPhone中的保持充电消息:修复

    您的 iPhone 上是否出现“等待充电”消息?如果是这种情况,充电过程将被搁置。通常,当手机的温度达到某个阈值时,它会触发此消息并停止充电过程以保护电子设备。在这种情况下,这些解…

    苹果Apple 2024年5月29日
  • 清除iPhone中灰色的Safari历史记录:修复

    iPhone上的Safari浏览器中的“清除历史记录”按钮是否显示为灰色?如果是这种情况,您将根本无法清除Safari浏览器中的历史记录。存储的 cookie 和网站数据可能会导致…

    2024年5月20日 苹果Apple
  • iPhone卡在耳机模式:修复

    “如果你的iPhone一直卡在耳机模式下,你可能会遇到一些不必要的麻烦。所有来电都将静音,因为电话仍处于耳机模式。让 iPhone 退出耳机模式可能很棘手。以下解决方案将帮助您做到…

    2024年5月20日 苹果Apple
  • Simulon:混合现实 3D 模型软件

    Simulon:混合现实 3D 模型软件 只需要下载app扫描周围环境,然后选择对应的模型。之后等几分钟就会渲染好跟现实环境融合的MR视频。没有官网只有申请测试的表单。 &nbsp…

    工具软件 2024年5月10日
  • Jan: 本地LLM聊天软件

    Jan: 本地LLM聊天软件 一个全平台的本地 LLM 聊天软件Jan,支持自动下载模型以及非常详细的设置。懒得配置 Ollama 的可以试试。 除了支持本地模型以外,在线的模型可…

    工具软件 2024年5月10日
  • 语音备忘录在iPhone上不起作用:修复

    语音备忘录是设置提醒的最简单方法,甚至无需触摸手机。因此,如果语音备忘录没有记录您的提醒或停止工作,那么它可能会影响您的高产生活方式。在本文中,我们按照这些解决方案集解决了这种情况…

    2024年5月10日 苹果Apple
  • iPhone中缺少Safari:这是修复程序

    无法想象没有 Safari 的 iPhone。由于 Safari 是所有 Apple 设备中的默认浏览器,因此缺少 Safari 浏览器对您来说可能是一个问题。由于缺少默认浏览器,…

    2024年4月24日 苹果Apple
  • 如何修复iPhone上的黑屏问题

    您的 iPhone 屏幕是黑色的,但手机处于开启状态,所有其他功能都运行良好——在这种情况下,您可以做的事情并不多。但是,与iPhone的其他问题一样,您可以应用一些解决方案来解决…

    2024年4月19日 苹果Apple
  • iPhone上的Safari缩小问题:这是修复程序

    如果您无法控制 Safari 中的缩放级别,完成工作可能会非常棘手。因此,如果 Safari 看起来被缩小了,那对您来说可能会有问题。您可以通过以下几种方法解决Safari中的此缩…

    2024年4月19日 苹果Apple
  • 如何在 Mac 上使用 GUID 格式化驱动器

    正确格式化驱动器对于 Mac 正常运行至关重要。它有助于防止各种系统问题,并使您的 Mac 整体更加稳定。 虽然 Mac 支持各种分区方案,但与其他选项相比,GUID 提供了更现代…

    2024年4月11日 苹果Apple
  • 您可能不知道的 10 个隐藏的 iPhone 功能

    您可能不知道的 10 个隐藏的 iPhone 功能 在本文中,我们有一个来自 Proper Honest Tech 的精彩视频,向我们展示了您可能不知道的一系列 iPhone 功能…

    2024年3月28日
  • iPhone 16 Pro 设计细节揭晓

    iPhone 16 Pro 设计细节揭晓 随着科技界充满期待,最近的泄密事件揭示了即将推出的 iPhone 16 Pro 的期望。下面来自ZONEofTECH的视频为我们提供了有关…

    2024年3月17日
  • 为什么我们在 Ubuntu Linux 上使用 Homebrew?

    在 Ubuntu 上使用 Homebrew 的优势: 注意:对于常见的软件包安装,我们建议坚持使用默认的软件包管理器。但是,如果某些软件包只能使用 Brew 安装,那就去吧。 1.…

    Linux命令 2024年3月17日
  • 如何在 Ubuntu 上安装 Mixxx DJ 软件 22.04 LTS

    在 Ubuntu 上安装 Mixxx 的步骤 22.04 或 20.04 for DJ 1. 打开命令终端 在 Linux 上使用 GUI 安装软件并不像在 Windows 上那样…

    2024年3月17日
  • 如何在 Ubuntu 上安装 Mixxx DJ 软件 22.04 LTS

    在 Ubuntu 上安装 Mixxx 的步骤 22.04 或 20.04 for DJ 1. 打开命令终端 在 Linux 上使用 GUI 安装软件并不像在 Windows 上那样…

    2024年3月13日
  • 在 Ubuntu 上安装 Element 桌面客户端的 2 种方法 22.04 |20.04

    1.打开Ubuntu软件 在 Ubuntu 桌面系统上安装软件的最简单方法之一是使用图形软件商店。使用它,我们可以一键安装应用程序。因此,要么转到“应用程序”并搜索“软件”,要么只…

    2024年3月13日 Linux命令
  • 如何删除 Ubuntu 上的软件中心应用程序 22.04 或 20.04?

    第 1 步:打开终端 好吧,要从Ubuntu中完全删除软件中心,我们必须访问终端。为此,您可以在应用程序中搜索它,也可以使用键盘快捷键 Ctrl+Alt+T。 第 2 步:卸载 U…

    2024年3月13日
  • 修复锁屏音乐在iPhone上不起作用的11种方法

    Apple 允许您与 iPhone 锁屏交互以自定义其背景、小部件和时钟外观。当 iPhone 上有音频播放时,iOS 会显示一个音乐小组件,其中显示专辑封面以及与当前播放的音频相…

    2024年3月5日 苹果Apple
  • 在iPhone上删除重复联系人的2种方法

    如果您长期是 iPhone 用户,那么您的 iPhone 可能积累了多个联系人,其中可能有一些重复的联系人。幸运的是,Apple 允许您合并重复的联系人,以便它们不会多次出现在搜索…

    2024年3月5日 苹果Apple