如何在 Mac 上检查元素

浏览网络时，我们往往不会过多思考幕后发生的事情。文本、图像和视频要么出现，要么不出现。然而，每次您访问某个页面时，您的浏览器或 Web 服务器都会执行大量代码。所以有时，能够看到该代码会很有帮助。例如，如果页面加载不正确，或者您想知道视频播放器是如何嵌入的。

在本文中，我们将向您展示如何在 Safari、Chrome 和 Firefox 中检查元素。

什么是检查元素？

检查元素是大多数 Web 浏览器中的一项高级功能，它允许您打开一个窗口，显示 HTML、CSS、JavaScript 和其他组合起来构建网页的编码。在某些网络浏览器中，您必须在“设置”中启用它，但在大多数浏览器中，它已经在菜单中。它主要针对开发人员，允许他们调试网站，但它在其他情况下也很有用。

为什么要在 Web 浏览器中检查元素？

除了调试页面之外，Inspect Element 也是一个出色的工具，用于检查 WordPress 等内容管理系统中添加的 Google Analytics 等代码是否已正确部署。它还可用于找出视频未播放或文件无法开始下载的原因。

阅读更多：对 Mac 上的 Mac 错误代码 -43 进行故障排除

如果您是一名开发人员，渴望了解网站如何实现特定效果，请使用 Inspect Element。您甚至可以在浏览器中编辑代码以测试更改后的外观。主浏览器窗口中的网页将立即更新以显示所有更改。

如何在网络浏览器中检查元素

检查元素的方式取决于您使用的浏览器。我们将向您展示如何在 Safari、Firefox 和 Chrome 中执行此操作。

如何在 Safari 中检查元素

要检查 Safari 元素，您需要做的第一件事是启用“开发”菜单。以下是如何做到这一点。

1. 启动 Safari。
2. 单击 Safari 菜单，然后选择“设置”。
3. 选择高级选项卡。
4. 选中标有“在菜单栏中显示开发菜单”的框。
5. 关闭设置。

启用“开发”菜单后，单击它并选择“显示页面源”，或按 Command-Option-U。您将看到浏览器底部打开一个窗口，顶部有许多选项卡。您可以在这里做几件事。

1. 单击来源可查看页面所有不同部分的列表。在侧边栏中，您将看到文件夹列表，例如框架、图像和脚本。单击图像文件夹可查看页面上的图像库。单击任何文件夹旁边的下拉列表以查看该文件夹中的元素。单击其中之一，主窗口中将出现预览。
2. 选择“元素”选项卡可查看构成网页的代码的嵌套视图。如果展开任何部分，该部分中的代码将可见；如果您选择它，它将显示与之相关的页面段落。
3. 单击工具栏中的重叠矩形，在新窗口中打开元素检查器。
4. 在“元素”选项卡中，单击标尺图标可查看每个元素的确切位置。

如何在 Safari 中检查和更改特定网页元素

上面的方法可以让您很好地了解 Safari 中的网页。但是，如果您想在页面上查找特定元素并更改它以测试某些内容该怎么办？方法如下：

1. 导航到网页上您想要检查的元素，例如一行文本。
2. 选择文本并按住 Control 键并单击它。然后从上下文菜单中选择“检查元素”。
3. 该窗口将在网页底部打开，您将看到控制该元素的代码。
4. 您可以通过在检查器中双击文本并输入新文本来更改浏览器中的文本。或者，如果是图像，您可以将 URL 替换为其他图像的 URL。

如何在 Google Chrome 中使用检查元素

1. 启动 Chrome。单击“视图”菜单，将指针移至底部的“开发人员”，然后选择“检查元素”，或按 Command-Option-C。
2. 浏览器窗口右侧将打开一个窗口，显示网页上的元素。
3. 您会注意到检查器顶部的选项卡与 Safari 中的选项卡类似：“元素”、“控制台”和“源”。
4. 在“元素”选项卡中，将鼠标悬停在任何部分上以突出显示其控制的网页部分。
5. “源”选项卡将所有不同类型的元素分组到文件夹中，就像在 Safari 中一样。

   

如何在 Chrome 中检查和更改特定网页元素

Chrome 中查看和更改网页上特定元素的过程与 Safari 中相同。

1. 在网页上找到该元素。然后按住 Control 键并单击它。
2. 从菜单中选择“检查”。在右侧的侧栏中，您将看到与所选元素相关的代码部分。
3. 单击箭头以显示整个部分。
4. 当您找到要更改的文本行时，选择它，删除该文本并键入新文本。如果您要更改图像，请键入或粘贴新图像的 URL。

如何在 Firefox 中使用检查元素

1. 启动火狐浏览器。单击“工具”菜单。
2. 将鼠标指针悬停在浏览器工具上并选择 Web 开发人员工具。
3. 您将看到屏幕底部打开一个窗口，类似于 Safari 中打开的窗口。
4. 在这种情况下，没有单独的“元素”或“源”选项卡。要检查代码，请选择“检查器”选项卡。
5. 您会注意到，当您将鼠标悬停在“检查器”选项卡中的代码部分上时，上面页面的部分会突出显示。

如何在 Firefox 中检查特定网页元素并更改它

上述所有功能都适用于 Firefox，就像在 Safari 和 Chrome 中一样。

1. 按住 Control 键并单击网页上要检查或更改的元素。
2. 从菜单中选择“检查”。
3. 单击下拉箭头以显示代码。
4. 选择文本，将其删除，然后键入新文本（或选择图像 URL 并将其替换为另一个图像的 URL。）

一旦您知道如何在 Mac 上检查元素，您就可以分析网站上的源代码，甚至进行更改和测试结果。对于大多数浏览器来说，该过程非常相似。通常有一个开发人员工具菜单或视图菜单中的查看源命令。在 Safari 中，只有当您在“设置”中启用“开发人员”菜单时，它才可见，但在大多数浏览器中，它位于菜单栏中。按照上述步骤检查 Safari、Chrome 或 Firefox 中的元素。