如何检查 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”。
在 Safari 中，向下滚动并点击“高级”。
在下一个屏幕上，点击“Web Inspector”旁边的切换按钮，直到它变成绿色。
Mac 上的初始设置
在 iOS 上成功启用 Web Inspector for Safari 后，现在就可以在 Mac 上完成设置了。在 Mac 上，打开 Safari 应用程序，单击菜单栏中的“Safari”选项并选择“首选项”。
在出现的窗口中，从顶部选择“高级”选项卡，然后选中“在菜单栏中显示开发菜单”框。
您现在应该会看到“开发”选项出现在顶部的菜单栏中。
现在，使用 iPhone 随附的 USB 电缆，在 iPhone 和 Mac 之间建立连接。当你的 iPhone 连接到 Mac 时，你可以点击菜单栏上的“开发”，看看你的 iPhone 是否出现在设备列表中。如果是，请单击此列表中的设备名称。
为确保您可以无线检查网页而无需像刚才那样使用 USB 电缆，请在 iPhone 菜单打开时单击“通过网络连接”选项。
现在，您可以断开 iPhone 与 Mac 的连接，您仍然可以检查网页，而无需在它们之间连接电缆。
在 Mac 上检查来自 iOS 的网页
现在您已经在“开发”菜单上启用了“通过网络连接”，您可以直接在 Mac 上从 iOS 上的 Safari 检查网页。您只需要确保 iPhone 和 Mac 都连接到同一个无线网络，即可无线调试网页。
为此，请在您的 iPhone 上打开 Safari 应用程序并转到您要查看的网页。
解锁 iPhone 并打开所选网页后，移至 Mac 并在那里打开 Safari 应用程序。在这里，单击菜单栏中的“开发”并转到“iPhone”。
当您将鼠标悬停在“iPhone”上时，您应该会看到在 iOS 上打开的网页列表。从该列表中单击要检查的网页。
Mac 上将加载一个新窗口，显示可以从所选网页检查的所有信息。
在您检查期间的任何时候，您都可以通过查找 iPhone 上的蓝色区域来查看一行代码指向页面的哪个部分。
此蓝色区域表示您在 Mac 上悬停的代码构成了此特定网页的突出显示元素。在不同的代码行之间移动将在 iPhone 上的页面的不同部分实时移动这个蓝色突出显示。
方法 #02：在 iOS 上使用快捷方式
如果您没有 Mac 或想直接从 iPhone 偷看网站，那么您会很高兴知道 iOS 快捷方式应用程序可以用于此目的。iOS 上的快捷方式应用程序提供了一系列预制选项，可让您查看页面的源代码、编辑网页、从网站抓取图像以及从 Safari 应用程序中查找网页的旧版本。不幸的是，没有单一的快捷方式可以在 iOS 上提供成熟的 Web 调试，因此您需要为每个目的添加一个快捷方式。
我们找到了以下快捷方式，您可以使用这些快捷方式直接从 iOS 对网站进行调试。这些是：
查看源代码- 此快捷方式可让您以基本骨骼格式查看网页的源代码。
编辑网页- 此快捷方式可让您在本地编辑网页内容，以便您可以测试新设计或格式以及它在 iPhone 上的外观。
从页面获取图像——检查页面的一个主要原因可能是查看图像或保存那些不具有交互性的图像。此快捷方式从某个网页中抓取所有图像，然后对它们进行集中预览。正如下面的屏幕截图所示，您可以查看托管在所选网页上的 24 张图像中的每一张。
Wayback Machine – 此快捷方式会将您带到网页的 Wayback Machine，您可以在其中查看其先前保存在 Internet Archive 中的版本。
根据您在 iOS 上检查网页的方式，您可以通过单击上面的相关链接或在“快捷方式”>“图库”中搜索它们来将任何这些快捷方式添加到您的 iPhone。
在搜索结果中，点击要添加到 iPhone 的快捷方式。
当预览屏幕打开时，点击底部的“添加小部件”选项。
你们所有的快捷方式都将出现在我的快捷方式 > 所有快捷方式屏幕中，它们也可以在 Safari 的共享表中访问。
要检查网页，请在 Safari 上打开它，然后点击底部的“共享”按钮。
在出现的共享表中，向下滚动并找到您添加到 iPhone 的快捷方式。
选择“编辑网页”将直接让您编辑网页的部分内容。当您选择其他三个选项中的任何一个时，系统会提示您是否需要访问网页的快捷方式。在这里，点击“允许一次”。
方法 #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”。
在 Safari 中，向下滚动并点击“高级”。
在下一个屏幕上，点击“Web Inspector”旁边的切换按钮，直到它变成绿色。
Mac 上的初始设置
在 iOS 上成功启用 Web Inspector for Safari 后，现在就可以在 Mac 上完成设置了。在 Mac 上，打开 Safari 应用程序，单击菜单栏中的“Safari”选项并选择“首选项”。
在出现的窗口中，从顶部选择“高级”选项卡，然后选中“在菜单栏中显示开发菜单”框。
您现在应该会看到“开发”选项出现在顶部的菜单栏中。
现在，使用 iPhone 随附的 USB 电缆，在 iPhone 和 Mac 之间建立连接。当你的 iPhone 连接到 Mac 时，你可以点击菜单栏上的“开发”，看看你的 iPhone 是否出现在设备列表中。如果是，请单击此列表中的设备名称。
为确保您可以无线检查网页而无需像刚才那样使用 USB 电缆，请在 iPhone 菜单打开时单击“通过网络连接”选项。
现在，您可以断开 iPhone 与 Mac 的连接，您仍然可以检查网页，而无需在它们之间连接电缆。
在 Mac 上检查来自 iOS 的网页
现在您已经在“开发”菜单上启用了“通过网络连接”，您可以直接在 Mac 上从 iOS 上的 Safari 检查网页。您只需要确保 iPhone 和 Mac 都连接到同一个无线网络，即可无线调试网页。
为此，请在您的 iPhone 上打开 Safari 应用程序并转到您要查看的网页。
解锁 iPhone 并打开所选网页后，移至 Mac 并在那里打开 Safari 应用程序。在这里，单击菜单栏中的“开发”并转到“iPhone”。
当您将鼠标悬停在“iPhone”上时，您应该会看到在 iOS 上打开的网页列表。从该列表中单击要检查的网页。
Mac 上将加载一个新窗口，显示可以从所选网页检查的所有信息。
在您检查期间的任何时候，您都可以通过查找 iPhone 上的蓝色区域来查看一行代码指向页面的哪个部分。
此蓝色区域表示您在 Mac 上悬停的代码构成了此特定网页的突出显示元素。在不同的代码行之间移动将在 iPhone 上的页面的不同部分实时移动这个蓝色突出显示。
方法 #02：在 iOS 上使用快捷方式
如果您没有 Mac 或想直接从 iPhone 偷看网站，那么您会很高兴知道 iOS 快捷方式应用程序可以用于此目的。iOS 上的快捷方式应用程序提供了一系列预制选项，可让您查看页面的源代码、编辑网页、从网站抓取图像以及从 Safari 应用程序中查找网页的旧版本。不幸的是，没有单一的快捷方式可以在 iOS 上提供成熟的 Web 调试，因此您需要为每个目的添加一个快捷方式。
我们找到了以下快捷方式，您可以使用这些快捷方式直接从 iOS 对网站进行调试。这些是：
查看源代码- 此快捷方式可让您以基本骨骼格式查看网页的源代码。
编辑网页- 此快捷方式可让您在本地编辑网页内容，以便您可以测试新设计或格式以及它在 iPhone 上的外观。
从页面获取图像——检查页面的一个主要原因可能是查看图像或保存那些不具有交互性的图像。此快捷方式从某个网页中抓取所有图像，然后对它们进行集中预览。正如下面的屏幕截图所示，您可以查看托管在所选网页上的 24 张图像中的每一张。
Wayback Machine – 此快捷方式会将您带到网页的 Wayback Machine，您可以在其中查看其先前保存在 Internet Archive 中的版本。
根据您在 iOS 上检查网页的方式，您可以通过单击上面的相关链接或在“快捷方式”>“图库”中搜索它们来将任何这些快捷方式添加到您的 iPhone。
在搜索结果中，点击要添加到 iPhone 的快捷方式。
当预览屏幕打开时，点击底部的“添加小部件”选项。
你们所有的快捷方式都将出现在我的快捷方式 > 所有快捷方式屏幕中，它们也可以在 Safari 的共享表中访问。
要检查网页，请在 Safari 上打开它，然后点击底部的“共享”按钮。
在出现的共享表中，向下滚动并找到您添加到 iPhone 的快捷方式。
选择“编辑网页”将直接让您编辑网页的部分内容。当您选择其他三个选项中的任何一个时，系统会提示您是否需要访问网页的快捷方式。在这里，点击“允许一次”。
方法 #03：使用第三方应用
如果您对上述结果不满意，则必须探索第三方应用程序才能检查网页元素。与 Safari 类似，您找不到在最流行的网络浏览器（Chrome、Firefox、Brave 等）中检查网页的方法。相反，您将不得不依赖为执行此特定任务而创建的应用程序，而此类应用程序可能很难找到。
虽然在 App Store 上进行简单的搜索会为您提供多个检查网络元素的结果，但您不会发现许多免费提供且评价很高的应用程序。根据用户反馈，我们建议您安装 App Store 中的Inspect Browser或Gear Browser应用程序，它们提供对 JavaScript、CSS 和 HTML 的元素检查和编辑。