海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

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

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

让我们深入了解!

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

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

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

访问 Google Chrome 中的 Inspect 元素

在 Chrome 中可以通过三种方式访问​​ Inspect Element 工具:

  • 右键单击页面上的元素并选择 检查.
  • 单击窗口右上角的三点菜单并选择 更多工具 > 开发者工具。
  • Ctrl + Shift + C 在您的键盘上 (Cmd + 选项 + C 在 Mac 上)。

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

Chrome 中的检查元素工具。

海外社媒SNS代运营Tiktok代运营公司

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

突出显示一个元素以将其聚焦在 HTML 窗格中。

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

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

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

在 Mozilla Firefox 中访问 Inspect 元素

Firefox 中的 Inspect Element 工具与 Chrome 的非常相似,可以通过类似的方式访问:

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

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

Firefox 检查元素工具。

但是,您可以通过单击三点菜单并选择其他选项轻松移动它们。

在 Safari 中访问 Inspect 元素

在 Mac 计算机上,Safari Web 浏览器还提供了 Inspect Element 工具。 但是,访问它还有一个额外的步骤——您需要启用 Safari 开发人员工具。

为此,请前往屏幕顶部的菜单栏并导航至 Safari > 偏好 > 高级. 然后,您可以选中相关框以启用开发工具:

启用 Safari 的开发工具。

启用后,您可以像在其他浏览器中一样访问 Inspect Element 功能:

  • 右键单击一个元素并选择 检查元素.
  • 在顶部菜单栏中,导航到 开发 > 显示 Web Inspector。
  • Cmd + Option + I 在你的键盘上。

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

Safari 中的检查元素。

但是,与 Chrome 和 Firefox 一样,您可以通过单击检查器窗口左上角的图标轻松对其进行自定义。

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

现在您知道如何访问“检查元素”工具,让我们看看您可以使用它执行的一些有用操作。 有很多可能性,但下面的用途是一些最常见的。 请注意,我们将在这些示例中使用 Chrome,但这些功能在其他浏览器中的工作方式应该类似。

1. 在网站上查找 CSS 类

您可以利用 Inspect Element 的最有用方法之一是在页面的级联样式表 (CSS) 中查找详细信息。 由于几个原因,这很方便。 首先,如果您只是在浏览 Internet 并遇到一个您非常喜欢其风格的网站,您可以查看 CSS 以收集一些用于您自己的网页设计的想法。

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

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

将鼠标悬停在“检查元素”工具中时的样式信息。

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

显示在“检查元素”窗口中的 CSS 类。

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

在 Chrome 检查器中启用悬停视图选项。

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

2. 对站点进行故障排除

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

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

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

最后,内置调试器是一种更高级的工具,您可以使用它来查看在幕后抛出的任何错误消息。 要访问它,请单击 安慰 在检查器窗口的顶部:

检查元素调试控制台。

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

3. 编辑文本以预览更改

Inspect Element 的最佳用途之一是快速预览页面文本、字体或颜色的更改。 这样,您甚至无需登录 WordPress 仪表板就可以准确地看到您的想法。

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

接下来,只需双击代码以使其可编辑。 例如,我们在这里更改了博客的标题:

在 Google Chrome 中的 Inspect Element 工具中更改文本。

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

检查元素工具中的颜色选择器。

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

4. 预览图像变化

Inspect Element 还可以轻松预览图像更改。 这也是尝试不同图像尺寸的绝佳方式。

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

WordPress花园建议你也读一下这篇文章  3 个最好的 WordPress 工作板插件

“检查元素”窗格中的图像源代码。

然后,您可以粘贴不同图像的 URL 进行测试。 如果图片在您的 WordPress 媒体库中,您可以在附件详细信息中快速找到 URL:

在 WordPress 媒体库中识别图像的 URL。

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

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

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

打开 Inspector,单击看起来像堆叠的手机和平板电脑的图标:

打开 Inspect Element 设备模拟器。

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

检查元素工具中的设备选择菜单。

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

结论

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

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

您对使用 Inspect Element 有任何疑问吗? 在下面的评论部分让我们知道!

精选图片来自 Kinjugraphics/shutterstock.com。

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts