如果您与许多网站合作，您可能一直在寻找更快、更有效的方法来完成工作。如果是这样，在大多数主要浏览器中可用的Inspect Element（检查元素工具）可能是一个有用的东西。有了它，您可以快速识别CSS类、预览页面上元素的更改、在移动设备上模拟站点等等。

在本文中，我们将介绍检查元素工具，并向您展示如何在最流行的Web浏览器中访问它。然后，我们将向您介绍一些示例，说明如何将其用作Web开发工作流程的一部分。

如何在主要浏览器中访问检查元素工具

检查元素工具是一种实用程序，可让您查看任何网页的底层源代码。此外，您可以使用它进行临时更改并实时查看结果，同时保持原始源代码不变。如果您需要测试更改或诊断问题，这将非常有用。如果您遇到一个具有您喜欢的功能的网站并且很好奇它是如何实现的，它也可以派上用场。

大多数主要浏览器（包括Chrome、Firefox和Safari）都提供了此工具的变体。让我们看看如何在每个中访问它。

访问Chrome检查元素工具

在Chrome中可以通过三种方式访问​​检查元素工具：

• 右键单击页面上的元素并选择Inspect（检查）。
• 单击窗口右上角的三点菜单，然后选择“更多工具”>“开发者工具”。
• 按键盘上的 Ctrl + Shift + C （在 Mac 上为Cmd + Option + C ）。

当该工具打开时，它会向您显示一个拆分视图。一方面，您可以预览正在检查的网站，以及一些用于调整视图和模拟不同屏幕分辨率的控件：

下面是一个显示页面信息的窗格。此处显示的详细信息因您选择的选项卡而异。在上面的屏幕截图中，它显示了页面的CSS样式。

底部窗格只是关于Chrome 开发者工具的新闻和更新。您可以通过单击X安全地关闭它以减少混乱。

最后，您可以通过单击HTML窗格右上角的三点菜单并选择停靠选项之一来更改这些窗格的位置。

访问Firefox检查元素工具

Firefox中的检查元素工具与Chrome的非常相似，可以通过类似的方式访问：

• 右键单击页面上的元素并选择“检查元素”。
• 单击 Firefox 窗口右上角的汉堡菜单，然后选择更多工具 > Web开发工具。
• 按键盘上的 Ctrl + Shift + C  （在 Mac 上为Cmd + Option + C）。

Firefox默认将信息窗格放在屏幕底部：

启用后，您可以像在其他浏览器中一样访问检查元素工具功能：

• 右键单击一个元素并选择检查元素。
• 在顶部菜单栏中，导航到 开发>显示页面检查器。
• 按 键盘上的Cmd + Option + I。

Safari工具的初始布局与浏览器略有不同：

在这里，您可以在我们的博客上看到标题的配色方案、字体、边距等。在详细窗格中，该工具还会突出显示相关代码，以便您可以准确了解发生了什么。单击预览中的元素将更新样式窗格以显示其CSS：

如果您知道要查找的特定CSS类或样式并希望查看使用它的每个元素，您还可以使用搜索功能。在检查器打开的情况下，按键盘上的 Ctrl + Shift + F （在 Mac上为Cmd + Shift + F ）。这将打开一个搜索框，您可以在其中搜索页面的代码。 相关结果将突出显示，就像您在搜索文档一样。

2. 对站点进行故障排除

检查元素工具对于解决问题非常方便。例如，如果元素的颜色或字体看起来不太正确，您可以使用我们在上一节中描述的工具快速检查它。

您还可以从“检查元素”工具直接编辑页面的HTML。只需双击要更改的代码即可对其进行编辑。

请注意，网站上的代码实际上 并未更改——如果您刷新页面，它将恢复到其原始形式。但是，此功能对于快速测试和故障排除非常有用。

最后，内置调试器是一种更高级的工具，您可以使用它来查看页面的任何错误消息。要访问它，请单击检查元素工具窗口顶部的Console控制台：

您还可以更改颜色。只需选择元素并滚动 样式窗格即可找到相关部分。您可以单击颜色方块以调出颜色选择器：

如果您知道要使用的颜色，也可以直接编辑颜色的十六进制代码。

4. 预览图像变化

检查元素工具还可以轻松预览图像更改。这也是尝试不同图像尺寸的绝佳方式。

只需在预览窗格中选择要更改的图像，然后在HTML窗格中双击其URL：

甚至还有一个方便的按钮可以将URL复制到剪贴板。再次记住，您在检查器中所做的任何更改都只是暂时的，并且只对您可见，因此请随意尝试。

5. 使用设备仿真测试站点

最后，检查元素的另一个有用功能是能够模拟不同的屏幕尺寸甚至特定设备。这使您能够测试站点的响应能力，并准确了解它在各种移动设备形式下的显示效果。

打开检查元素工具，单击看起来像堆叠的手机和平板电脑的图标：

这将启用设备仿真。请注意，当您打开检查器时，它可能会默认启用。使用周围的手柄调整页面预览的大小，或单击预览窗格顶部的下拉菜单以选择各种设备：

您还可以输入特定的纵横比，甚至可以通过单击预览窗格顶部的“旋转”图标来检查移动设备旋转时页面的外观。要模拟各种传感器，例如位置和触摸，请单击检查器窗格中的三点菜单，然后选择更多工具 >传感器。

小结

无论您是 Web 开发新手还是经验丰富的专业人士，检查元素工具都是一个强大的实用程序，绝对应该在您的武器库中。它易于访问，几乎普遍可用，并且可以快速轻松地进行各种操作。

在本文中，我们演示了如何在Chrome、Firefox和Safari中访问检查元素工具。我们还向您展示了如何使用它来定位CSS类、对网站进行故障排除、临时更改文本和图像以及模拟移动设备。使用此工具包，您拥有使检查元素工具成为工作流程一部分所需的一切。