在某种程度上，网页开发人员和设计师的工作就是让用户相信网站是一个单一的实体，而不仅仅是一系列的HTML元素。然而，有了正确的工具，即使是非开发人员也可以打开任何网站的帘子，看看幕后到底发生了什么。

您可能熟悉经典的“查看页面源代码”技巧，它在浏览器窗口中显示页面的原始HTML。但是，有一个更好的方法来做你的侦探工作:检查元素功能可以让我们查看甚至修改任何网站的前端，这可以是非常有用的建立一个网站或了解网站如何工作．

在这篇文章中，我将解释它意味着“检查”页面元素，以及如何在三个常见的Web浏览器上执行此操作。

检查是网络专业人士的秘密武器。开发人员、设计师和营销人员经常使用它来窥探任何网站(包括他们自己的网站)，以便预览内容和风格的变化，修复bug，或了解特定网站是如何构建的。例如，如果你在一个竞争网站上发现了一个有趣的界面，inspect元素可以让你看到超文本标记语言和CSS这就弥补了。

You can also think of your browser’s inspect feature as a “sandbox” of sorts: Play around with a web page as much as you want — change content, colors, fonts, layouts, etc. When finished, just refresh the page to revert everything back to normal. Inspect doesn’t change the website itself — only how it appears in your own browser — so feel free to experiment!

Inspect对于那些学习web开发的人来说也是一个非常有价值的工具。与其查看普通的源代码，不如使用inspect元素与页面交互，查看每一行代码如何映射到元素或样式。通过更好地理解典型网页的组成，您可以在出现错误的情况下与开发人员进行有效的沟通，或者如果您想做出更改。

检查可能是“开发人员工具”，但您无需编写任何代码或安装任何其他软件以使用它。雷竞技苹果下载官方版您可以完成我在浏览器内部描述的所有内容 - 让我们了解如何。

如何检查元素

每个现代Web浏览器都有用于检查元素的本机工具。在这里，我将解释如何在三个桌面Web浏览器上使用Inspect工具：谷歌Chrome，Apple的Safari和Mozilla Firefox。

如何检查元素在Chrome

要在Google Chrome中使用Inspector，请先导航到任何网页（在这些示例中，我将使用HubSpot.com）.在那里，你有几种方法来打开工具:

• 右键单击页面的任何部分并选择检查．右键单击特定的页面元素将在检查器视图中打开该元素。
• 在顶部的菜单栏中，选择查看>开发者>开发者工具．
• 开放自定义和控制谷歌Chrome浏览器单击浏览器窗口右上角的三点图标。从那里，选择更多工具>开发者工具．
• 使用快捷方式control-shift-C在Windows或command-option-C在麦克斯。

Chrome开发者工具面板将在浏览器窗口的底部打开。如果要更改面板的位置，请单击面板右上角的三个点图标(在X图标)，然后选择您的首选停靠位置。我将选择码头到右- 这使得更容易查看呈现页面及其来源：

在检查面板的顶部，您将看到用于元素，安慰，来源等。这些都是我们可以用来评估页面内容和性能的工具。但是，我们需要检查的东西都在元素标签。

下一个区域是当前页面的源HTML。花一些时间来研究这个区域，并注意将光标悬停在代码段上是如何突出显示页面上相应的元素的。蓝色表示元素的内容，绿色表示填充，橙色表示边距。

我们也可以做相反的事情—从页面元素中定位一段代码。要做到这一点，单击元素选择面板左上角的图标:

接下来，单击页面元素。您将在检查面板中看到源代码。

除了查看之外，我们还可以使用inspect来更改页面内容。让我们从交换一些文本开始。首先，在源代码中找到一些文本内容。然后，右键单击元素并选择编辑文本-这会打开一个内联文本输入，你可以写任何你想要的。当你取消选择文本输入，你会看到更改生效:

或者，根本没有短信呢?只需选择源代码中的元素并删除它。H1将从页面上消失。

虽然不要担心 - 刷新页面时会重新出现。您还可以通过右键单击源代码中的元素并选择，隐藏任何元素而不删除它隐藏的元素．

您甚至可以添加新页元素 - 右键单击​​源代码中的元素并选择编辑作为HTML．您将看到一个可以粘贴HTML的文本字段。例如:

向下移动Chrome检查面板，我们看到了风格标签。这向我们展示了将CSS样式应用于所选元素的样式。单击代码行以重写它们，或通过检查/取消选中它们旁边的框来激活/取消激活某些声明。让我们这样做

元素的粗细属性:

最后，让我们介绍Chrome的另一个检查功能，移动视图。当创建一个网站时，设计师需要考虑它的页面在台式机、手机和平板电脑屏幕上的显示方式。幸运的是，Chrome允许你在多个屏幕分辨率下预览同一个网页。首先单击切换设备面板左上角的图标:

从这里，手动设置屏幕分辨率或从菜单中选择设备预设，然后查看页面布局的响应方式。您还可以在“中间手机”和“低层移动”速度下旋转屏幕甚至预览性能。

如何在Safari中检查元素

要使用Safari的Inspect Tool，Web Inspector，我们首先需要启用Safari开发人员工具。选择Safari >首选项．在偏好窗口中先进的，选中旁边的框在菜单栏中显示开发菜单．你会看到一个开发选项添加到上面的菜单。

接下来，请转到所需的网页。打开Web Inspector有三种方法：

• 右键单击页面的任何部分并选择检查元素．右键单击特定的页面元素将在检查器视图中打开该元素。
• 选择开发>显示Web检查器从顶部菜单栏。
• 使用快捷方式command-option-I．

Safari的Inspector默认情况下在窗口的底部打开。要更改此配置，请单击图标以在右侧停靠的显示或弹出在单独的窗口中 - 两者都位于旁边X显示左上角的图标。

Safari的检查器面板包括两列。第一个显示源HTML，第二个显示页面CSS。使用你的光标来探索源HTML，看看哪些行代码对应于每个页面区域(蓝色突出显示内容，绿色突出填充，橙色突出页边距):

我们也可以直接查看页面。单击元素选择面板顶部的图标:

现在，当您单击页面元素时，Web Inspector会显示相应的源代码。

像Chrome的检查器一样，Safari允许我们修改、添加和删除页面元素。要编辑页面，右键单击检查面板中的HTML元素，然后从编辑菜单。Web Inspector将提示您输入新的文本，然后实时显示您的更改:

或者，通过右键单击一行代码并选择选项，将新元素添加到页面上添加菜单。在这个例子中，我添加了一个新的

子元素< div >：

如果您想要删除页面元素，只需选择一些代码并删除它。或者，右键单击并选择Toggle可见性隐藏一个元素而不删除它。

右边是风格在这个列中，我们可以改变或激活/禁用任何元素的CSS声明，比如:

测试内容和样式更改时，您将希望看到移动屏幕的影响以及桌面。Safari的响应设计模式允许您在常用设备上预览网站。

要使用它，选择进入响应式设计模式．在此模式下，您可以使用相同的检查器工具对格式化为苹果设备的页面，或自己设置尺寸:

如何检查Firefox中的元素

打开Firefox检查器，你可以:

• 右键单击页面的任何部分并选择检查元素．右键单击特定的页面元素将在检查器视图中打开该元素。
• 选择工具> Web开发人员>检查器从顶部菜单栏。
• 使用快捷方式control-shift-C在窗户或command-option-C在macOS。

默认情况下，Firefox Inspector沿窗口的底部出现。要更改其位置，请在检查器的右上角选择三点图标，然后选择备选显示选项。

Firefox的检查员面板在Chrome和Safari的功能中是可比的。HTML源代码指示具有颜色代码的相应页面元素 - 内容为蓝色，填充为紫色，边距为黄色：

另外，你可以通过选择页面上的元素来找到代码——要进入选择模式，点击左上角的光标图标:

单击任何页面元素以在检查面板中显示其来源。

要修改或删除页面元素，请在检查器中选择它的代码。然后，双击以更改文本，或者右键单击并选择编辑作为HTML或创建新节点添加代码。或者只需删除代码并查看页面上产生的更改。

要切换元素的样式，请使用过滤器风格在检查面板底部的区域。取消勾选CSS声明旁边的复选框来禁用它(或自己写新代码):

最后，Firefox的工具还提供了一个移动预览选项。要使用它，请单击响应式设计模式面板右上角的图标:

响应式设计模式可以让你从几个预设的屏幕分辨率中选择或自己设置，你也可以切换连接速度和设备像素比:

近距离观察

一旦你了解了浏览器的检查工具的基础知识，你可能会意识到有多少关于你喜欢的网站的信息是公开的。只需点击几下，你就可以探索网页是如何构建的，它们使用什么样式，它们如何优化搜索引擎，它们如何在移动屏幕上格式化，等等。

对于一些人来说，检查只是一个有趣的好奇心。对于其他人来说，它是学习其他竞争网站如何工作的关键资产。无论谁，它都是一个很好的技能，可以提供超越观看网页本身的见解。