如何使用浏览器的检查元素工具

作者:Aini99
Aini99 更新时间:2021-02-18 16:42:06 浏览次数:

如果你使用很多网站,你可能总是在寻找更快、更高效的方法来完成工作。如果是这样,检查元素工具,在大多数主要浏览器中可用,可能是一个有用的资产,手头。借助它,你可以快速识别 CSS 类、预览页面上元素的更改、在移动设备上模拟网站等等。

在这篇文章中,我们将介绍检查元素工具,并向你展示如何在最流行的 Web 浏览器中访问它。然后,我们将引导你了解一些示例,了解如何将它用作 Web 开发工作流的一部分。

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

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

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

访问谷歌浏览器中的检查元素

在 Chrome 中,有三种访问 "检查元素" 工具的方法:

  • 右键单击页面上的元素,然后选择 " 检查 "。
  • 单击窗口右上角的三点菜单,然后选择 " 更多工具 "> 开发人员工具。
  • 键盘上按 Ctrl + Shift + C(Mac 上的 Cmd + 选项 + C)。

当工具打开时,它将呈现一个拆分视图。一方面,你可以预览要检查的网站,以及一些控件来调整视图和模拟不同的屏幕分辨率:

使用审查元素工具模拟移动设备访问

另一方面,有几个窗格包含信息。顶部窗格是页面的 HTML。将鼠标悬停在代码的一部分上将突出显示右侧页面的相关区域:

使用 Chrome 中的审查元素工具选择某个元素

下面是显示有关页面信息的窗格。此处显示的详细信息因所选选项卡而异。在上面的屏幕截图中,它显示了页面的 CSS 样式。

底部窗格只是有关 Chrome 开发人员工具的新闻和更新。你可以通过单击 X 安全地关闭此,以减少杂乱

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

访问 Mozilla Firefox 中的检查元素

Firefox 中的 "检查元素" 工具与 Chrome 的检查元素工具相当相似,可以以类似方式访问:

  • 右键单击页面上的元素,然后选择 " 检查元素 "。
  • 单击 Firefox 窗口右上角的汉堡菜单,然后选择 Web 开发人员 > 检查器
  • 键盘上按 Ctrl + Shift + C(Mac 上的 Cmd + 选项 + C)。

Firefox 默认将信息窗格放在屏幕底部,但是,你可以通过单击三点菜单并选择其他选项来轻松移动它们。

访问 Safari 中的检查元素

在 Mac 计算机上,Safari Web 浏览器还提供检查元素工具。但是,访问它还有额外的步骤 - 你需要启用 Safari 开发人员工具。

为此,请前往屏幕顶部的菜单栏,导航到 Safari > 首选项 > 高级。然后,你可以选中相关框以启用开发工具:

在 Safari 中启用开发者工具

启用后,你可以像在其他浏览器中一样访问 "检查元素" 功能:

  • 右键单击元素并选择 " 检查元素 "。
  • 在顶部菜单栏中,导航到 "开发 > 显示 Web 检查器"。
  • 键盘上的 Cmd + 选项 + I。

Safari 工具的初始布局与浏览器略有不同,但是,与 Chrome 和 Firefox 一样,你可以通过单击检查器窗口左上角的图标轻松自定义它。

检查元素工具的 5 种常见用途

现在你已经知道如何访问 "检查元素" 工具了,让我们看看一些有用的操作。有吨的可能性,但下面的用途是一些最常见的。请注意,我们将使用这些示例 Chrome,但这些功能在其他浏览器中的工作方式应类似。

1. 在网站上查找 CSS 的类名称和样式

利用检查元素的最有用方法之一是查找页面的级联样式表 (CSS) 中的详细信息。这很方便,有几个原因。首先,如果你只是浏览互联网,遇到一个网站,你真的喜欢的风格,你可以偷看CSS收集一些想法,为你自己的网页设计。

它也在你自己的网站上很有用。例如,如果元素看起来不太正确,你可以快速检查它,以确保它使用正确的 CSS。

有两种使用检查元素检查样式的基本方法。如果要快速查看单个项目,可以在预览窗格中将鼠标悬停在该项目上,以查看有关其的一些基本信息:

在网站上查找 CSS 的类名称和样式

在这里,你可以看到配色方案,字体,边距,还有一些其他的信息。在详细的窗格中,该工具还突出显示了相关代码,以便你准确查看发生了什么。单击预览中的元素将更新样式窗格以显示其 CSS:

查看某个元素当前的样式

如果将鼠标悬停在元素上似乎没有执行任何操作,请确保检查器窗格中的光标图标以蓝色突出显示:

启用选择工具

如果你知道要查找的特定 CSS 类或样式,并且想要查看使用它的每个元素,也可以使用搜索函数。打开检查器后,按键盘上的 Ctrl + Shift + F(Mac 上的 Cmd + Shift + F)。这将打开一个搜索框,你可以在其中搜索页面的代码相关结果将突出显示,就像搜索文档一样。

2. 对站点进行故障排除

检查元素工具非常方便地排除故障。例如,如果元素的颜色或字体看起来不太正确,你可以使用该工具快速检查它,正如我们在上一节中所述。

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

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

最后,内置调试器是一个更高级的工具,可用于查看任何被引发在幕后的错误消息。要访问它,请单击检查器窗口顶部的控制台:

查看控制台里的错误信息

还有其他选项卡可用于查看源、网络活动等。要访问完整列表,请单击检查器顶部的双箭头图标。

3. 编辑文本以预览更改

检查元素的最佳用途之一是快速预览对页面的文本、字体或颜色的更改。这样,就可以在页面中直接修改内容。

要编辑元素,请右键单击该元素并选择"检查 "。这将打开该工具,该元素的代码在焦点。如果已打开"检查元素",还可以单击预览窗格中的项目以突出显示相关代码。

接下来,只需双击代码即可编辑。例如,我们在此更改了某一行文字:

使用审查工具修改页面上的内容

4. 预览图像更改

检查元素还便于预览图像更改。这是尝试不同图像尺寸的极好方法。

只需在预览窗格中选择要更改的图像,然后在 HTML 窗格中双击其 URL,将图像的 URL 填入。

甚至有一个方便的按钮,将 URL 复制到剪贴板。同样,请记住,在检查器中所做的任何更改都只是暂时的,并且只对你可见。

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

最后,检查元素的另一个有用功能是能够模拟不同的屏幕大小,甚至特定设备。这使你能够测试站点的响应能力,并准确了解其在各种移动外形的显示方式。

打开检查器后,单击看起来像堆叠手机和平板电脑的图标。

这将启用设备仿真。请注意,在打开检查器时,默认情况下可能会启用它。使用页面周围的控点调整页面预览的大小,或单击预览窗格顶部的下拉列表以选择各种设备:

选择其他移动设备

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

无论你是网络开发新专家还是经验丰富的专业人士,检查元素工具都是一个强大的实用程序,绝对应该在你的武器库中。它易于访问,几乎普遍可用,使各种操作快速和容易。

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

Aini99

Aini99

本网站搬运了CC社区和XJ社区的cskzwr数据,大家可以在这里查询cskzwr数据,下载cskz地图和demo,同时还提供了一些kz视频制作教程。