在 iPhone 上检查网页元素的 3 种方法

如果您不知道，网页由大量元素组成，这些元素被格式化为显示为一个单一实体。 Web 开发人员需要了解每个元素、它们在网页上的布局方式以及每个元素如何单独工作。

使用 Windows 和 Mac 计算机的人可能已经熟悉“检查”或“检查元素”选项。它是一个工具，提供了一种查看网站源代码、查看其所有元素以及每个元素背后的代码行以及编辑其内容的方法。尽管检查选项被称为“开发人员”工具，但即使是初学者和非开发人员也可以使用它来了解网站的构建方式以及每个元素如何共同工作。

如果您希望在 iPhone 上浏览网页时使用 Inspect Element，这篇文章应该可以帮助您做到这一点。

有关的：

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

简单的答案是否定的。 iPhone 上的 Safari 应用程序与其他移动浏览器一样，不提供用于查看网页代码的本机检查工具。苹果没有提供为什么没有这样的选项的原因，但我们认为这与智能手机上的显示屏有多小有关。较小的显示尺寸可能会让您难以在正在检查的框周围导航，因为您可能必须小心地将光标放在要编辑网页代码的位置，甚至要找到一个网页代码。

造成这种情况的另一个原因可能是智能手机缺乏计算能力。尽管现代 iPhone 有足够的能力来运行图形密集型游戏，但查看网站的页面信息可能会很棘手，因为并非所有网站都是平等创建的。有些网站可能由多层代码组成，经过精心设计，使它们看起来无缝，但当您尝试检查它们时，它们可能需要更多时间才能加载。

有关的：

如何在 iPhone 上检查网页上的元素 [3 种方法]

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

方法 1：在 Mac 上使用 Safari

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

在 Safari 中启用 Web Inspector

为了能够调试 Web 元素，您首先需要为 Safari 应用程序启用 Web Inspector。

打开设置应用程序并选择狩猎之旅。
在 Safari 中，向下滚动并点击“高级”。
在下一个屏幕上，点击“Web Inspector”旁边的开关，直到它变成绿色。

Mac 上的初始设置

成功启用 Safari 的 Web Inspector 后，就可以在 Mac 上完成设置了。

在 Mac 上，打开狩猎之旅应用程序，单击狩猎之旅选项卡从酒吧菜单，然后选择偏好设置。
在出现的窗口中，单击先进的从顶部选项卡并检查在菜单栏中显示“开发”菜单框在底部。
您现在应该看到“开发”选项卡出现在顶部的菜单栏上。
现在，使用 iPhone 附带的 USB 数据线在 iPhone 和 Mac 之间建立连接。
当您的 iPhone 连接到 Mac 时，您可以单击发展选项卡，然后检查您的 iPhone 是否出现在设备列表中。如果是，请选择您的iPhone从这个列表中。
为了确保您可以无线检查网页，而无需像刚才那样使用 USB 电缆，请单击通过网络连接当 iPhone 菜单打开时。
现在，您可以断开 iPhone 与 Mac 的连接，并且仍然可以检查网页，而无需在它们之间连接电缆。

在 Mac 上检查 iPhone 中的网页

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

打开狩猎之旅应用程序在您的 iPhone 上并转到您要检查的网页。
解锁 iPhone 并打开所选网页后，转到 Mac 并打开 Safari 应用程序。在这里，单击发展从菜单栏选项卡并选择iPhone。
您现在应该会看到 iPhone 上打开的网页列表。从此列表中，单击您要检查的网页。
Mac 上将加载一个新窗口，显示可以从所选网页检查的所有信息。
在检查过程中的任何时候，您都可以通过查找 iPhone 上的蓝色区域来查看一行代码指向页面的哪个部分。
此蓝色区域表示您在 Mac 上悬停的代码是构成此特定网页的突出显示元素的代码。在不同代码行之间移动会将该蓝色突出显示实时移动到 iPhone 页面的不同部分。

有关的：

方法 2：使用快捷方式应用程序

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

我们发现了以下快捷方式，您可以使用它们直接从 iPhone 在网站上执行调试。

您可以决定要将上述哪些快捷方式添加到您的 iPhone。