如何在 Chrome、Safari 和 Firefox 中检查元素？

您有没有想过是什么让网页看起来如此令人惊叹，并具有许多特性和功能？所有代码如何组合在一起创建一个有吸引力且令人惊叹的网站？

只需使用浏览器中的检查工具检查网站元素，即可轻松揭示所有秘密。

借助这个内置工具，您可以轻松剥离网站层并查看代码如何连接到每个元素，从而创建一个功能齐全的网站。它将让您了解前端的工作方式，并激励您在项目中重新创建它们。

在这篇文章中，我们将向您展示如何在流行的浏览器中检查网站元素，并提供直接使用它们的简短方法。

如何在任何浏览器上检查网站的元素？

只需按照这些“检查元素”快捷方式，您就可以轻松地在任何浏览器上检查网站的元素。

1. 检查 Google Chrome 浏览器的 Elements 快捷方式

您只需按键盘上的组合键Ctrl+Shift+I即可启动开发工具或检查元素工具来访问网站的元素。

但是，您可以尝试的另一种快捷方式和直接方法就是右键单击网站的空白区域或任何元素，然后选择“检查”。之后，您可以使用“元素”选项卡查看整个网站结构，或使用“控制台”选项卡查看任何类型的警告或错误。

然而，访问开发工具的第三种但很长的方法是单击位于 Chrome 浏览器右上角的三个垂直点或汉堡菜单（带有三个堆叠点的图标），然后单击更多工具，然后选择开发者工具。

2. 检查 Firefox 浏览器的 Elements 快捷方式

如果您是 Firefox 浏览器用户，您可以尝试组合快捷键Ctrl+Shift+C 来利用开发工具来检测网站元素。或者，您甚至可以右键单击网站的空白区域或任何元素，然后选择“检查”。

3. 检查 Opera 浏览器的 Elements 快捷方式

对于 Opera 用户，请按键盘上的Ctrl+Shift+I直接访问开发工具来检查网站元素。同样，与其他浏览器一样，您也可以直接右键单击网站的空白区域或任何元素，然后选择“检查”。

4. 检查 Edge 浏览器的 Elements 快捷方式

如果 Edge 是您使用的默认浏览器；您可以按键盘上的F12打开开发工具。或者只需右键单击网站的空白区域或任何元素，然后选择“检查”。

5. 在 Safari 浏览器中检查元素

Safari 浏览器没有任何快捷方法来检查网站的元素，但您必须按照以下步骤操作：

要在 Safari 中使用 Inspect Element，您需要先启用开发人员工具。就是这样：

• 单击顶部菜单中的“Safari”，然后选择“设置”。

• 转到“高级”选项卡，然后选中“在菜单栏中显示开发菜单”框。

• 关闭首选项窗口。

现在，您可以右键单击网页上的任意位置，然后选择“检查元素”以打开“元素”窗格。

该窗格将立即在窗口底部打开，这可能看起来不太好，并且也会给查看代码带来困难。

为了方便起见，单击窗格左上角的图标（“X”旁边）将其移至一侧，然后选择“停靠到窗口右侧”或“停靠到窗口左侧” ”。 （适用于所有浏览器）

此外，如果需要，您甚至可以将窗格与窗口分开。要更改窗格的大小，请将光标移动到窗格的边缘，直到其变为双箭头，然后单击并拖动以调整大小。

现在您可能想知道，打开窗格后要做什么，或者您可以查看有关网站的主要元素是什么。

那么，为此目的请查看以下部分。

您可以使用检查网站元素开发工具执行的操作

现在您已成功访问“元素”工具并打开了该窗格，您将看到各种内置工具可帮助您轻松使用网站、自定义网站并根据您的要求进行编辑。

为了方便起见，我们将使用 Chrome 进行演示，但所有浏览器的所有功能、设置、选项和说明都相同。

1. 借助 Inspect Element Search 工具在网站上查找任何内容

在整个源代码中搜索任何内容可能会让人不知所措，因为源代码很复杂，有时还很大。因此，DevTools 有一个内置的搜索工具。

要使用它，请打开默认的“元素”窗格，然后按 Ctrl + F 或 Command + F 搜索源代码。 “搜索”选项卡将立即出现在 DevTools 窗格的底部。

在搜索字段中，您可以搜索任何内容，无论是 CSS、JavaScript 文件还是源代码中的特定元素。

例如，如果您在搜索字段中输入“元名称”并按 Enter 键，它将查找并显示代码中所有出现的“元名称”。这可以帮助您检查网页的元、SEO 关键字和索引状态。

同样，如果您是网页设计师，则可以通过在搜索字段中输入颜色十六进制代码（例如#98fb98db）并按 Enter 来搜索颜色。这将显示网站 CSS 和 HTML 文件中该颜色的每个实例。

沟通和修复：

• 搜索工具通过准确显示错误所在或需要更改的内容来帮助与开发人员进行沟通。
• 告诉开发人员存在问题的行号，以便更快修复。
• 您还可以使用 Elements（Chrome 开发人员工具的核心部分）自行更改网页。

2. 选择并检查网页的单个/特定元素

您还可以通过直接单击窗格左上角的光标图标来查看页面特定元素的 HTML 代码。

现在，您可以单击任何页面元素以在检查面板中显示其源代码。

3. 编辑或修改任何带有元素的内容

如果您喜欢尝试和尝试网站设计，并且喜欢将即时想法变为现实，那么检查元素工具可以帮助您做到这一点。

使用此工具，您可以通过修改或编辑 CSS 和 HTML 文件并实时查看结果来临时更改网站的外观。

然而，这些变化并不是永久性的。重新加载页面后，更改将消失。这样，您就可以随心所欲地进行实验，而不会干扰网站的源代码。

如果在某些时候您发现更改很有吸引力，您可以简单地复制它们并将其保存到其他地方以供以后使用。

让我们看一些例子以供参考。

但在此之前，让我们把操场准备好并清理干净。为此，请单击“开发人员工具”窗格中的“元素”选项卡。如需更多空间，请按Esc键关闭搜索框。

现在您已准备好在屏幕上看到完整的源代码。

• 在“开发人员”窗格的左上角，单击正方形顶部的鼠标图标。
• 选择页面上的任何元素进行更改。

更改网页上的文本：

• 单击鼠标光标/方形图标。
• 单击页面上的任意文本。
• 在“开发人员工具”窗格中，双击突出显示的文本以使其可编辑。

• 输入新文本，例如“最快”而不是“高级”，如下图所示，然后按Enter 。
• 文本更改是暂时的，刷新页面后将会恢复。

编辑元素：

• 关闭“开发人员”窗格，突出显示网页的任何部分，右键单击，然后选择“检查” 。
• 开发人员工具窗格将突出显示所选句子。

更改 Elements 的颜色和字体大小：

• 在“开发人员工具”窗格中，转到“样式”选项卡。

• 单击“font-size”字段并将值更改为 22px。

• 滚动到“颜色”并将其更改为#ff0000。

• 将“字体系列”调整为“Arial”。

现在，在我们进行更改之前，字体看起来像这样：

更改后，显示如下：

改变元素状态：

如果您想让您的网站在访问者将鼠标悬停在按钮或链接上或与按钮或链接交互时在视觉上更具吸引力，您可以使用“元素状态”选项。

• 单击鼠标光标/框图标并选择元素。
• 在开发人员工具窗格中，右键单击代码，将鼠标悬停在Force state上，然后单击:active：
• 重复并单击：悬停：

• 将“背景颜色”值更改为#003b59 以查看新的悬停颜色。

更改背景图像：

• 只需复制图像地址的链接，即（图像已托管的位置。）

• 打开“使用 AI 为您的自动化提供动力”按钮上的检查元素。
• 找到“background-color”代码并将颜色替换为url(“image-link”) 。

尝试更多改变：

• 您可以更改文本、交换图像以及更改颜色和样式。
• 尝试不同的更改以查看您的网站的外观。

4. 在任何屏幕尺寸或设备上测试网站

如今，甚至谷歌也强烈建议网站应该具有响应能力，并且可以在任何设备和屏幕尺寸上轻松访问。大多数互联网用户更喜欢通过智能手机而不是笔记本电脑和台式机访问网站。

因此，网络管理员在构建网站时使其响应灵敏且适合移动设备变得至关重要。

然而，对于任何网络开发人员或设计人员来说，同时检查每种类型的设备或屏幕尺寸上的网站可能并不可行。为了解决此问题，仿真工具允许您查看并检查您的网站对使用不同设备的不同用户的显示效果。

这并不意味着您应该跳过在不同设备上的实际测试，但它可以给您一个好主意。

您可以这样执行：

• 在“开发人员工具”窗格中，单击左上角的小电话图标。
• 该页面将变成电话风格的视图，顶部有一个菜单可以更改大小。
• 调整小浏览器的大小以查看页面在平板电脑、手机或更小屏幕等不同设备上的外观。

• 单击顶部的菜单可选择默认设备尺寸，例如 Surface Duo 或 iPhone 12 Pro。
• 网页将根据所选设备的大小进行调整。使用尺寸旁边的百分比下拉菜单进行放大。
• 在设备预设中选择“响应式”，可通过拖动网页右边缘来调整视图。
• 单击顶部菜单末尾的旋转图标可在纵向和横向视图之间切换。
• 探索不同的设备以查看网页和屏幕分辨率如何变化。
• 所有其他开发人员工具也将对设备视图做出反应。

5. 在模拟移动网络上测试网页性能

除了所有视觉测试之外，您还可以查看您的网站在不同移动网络（例如 5G、4G、3G 或更慢的网络）上的表现。

为了证明这一点，

• 单击窗格右上角的汉堡菜单。
• 将鼠标悬停在更多工具上并选择网络条件。

网络条件：

• 选择任意网络条件，例如快速 4G、慢速 4G 或离线，以查看页面在没有互联网的情况下如何工作。

• 单击“添加...”以包含您的测试速度（例如，56Kbps 来测试拨号互联网）。
• 重新加载页面以查看在慢速连接上加载需要多长时间以及加载时的外观。
• 这可以帮助您了解改善网站慢速连接加载时间的重要性。

更改用户代理：

• 在用户代理字段中，取消选中使用浏览器默认值。
• 选择不同的用户代理（例如，Firefox、Mac）以查看站点是否更改了其他浏览器的呈现。
• 此功能可让您了解网络如何页面加载即使他们声称只能在不同的浏览器中工作。

结论

在获得有关开发工具或检查元素的如此多的深入信息后，您一定已经意识到，在公共领域有大量关于您最喜欢的网站的信息。

只需点击几下，您就可以完全揭开任何网站，揭示其视觉上令人惊叹的特性和功能的所有秘密，而无需检查原始文件。

现在，您可以分析和查看使用了哪些 CSS 样式、复杂功能背后的逻辑、如何在代码级别完成搜索引擎优化等等。

拉胡尔

Rahul Kumar 是一位网络爱好者和内容策略师，专门从事 WordPress 和网络托管。凭借多年的经验和对了解最新行业趋势的承诺，他制定了有效的在线策略来增加流量、提高参与度并提高转化率。拉胡尔对细节的关注以及制作引人入胜的内容的能力使他成为任何希望提高其在线形象的品牌的宝贵资产。