如何使用浏览器检查元素工具进行前端调试
如果您与许多网站合作，您可能一直在寻找更快、更有效的方法来完成工作。如果是这样，在大多数主要浏览器中可用的Inspect Element（检查元素工具）可能是一个有用的东西。有了它，您可以快速识别CSS类、预览页面上元素的更改、在移动设备上模拟站点等等。
在本文中，我们将介绍检查元素工具，并向您展示如何在最流行的Web浏览器中访问它。然后，我们将向您介绍一些示例，说明如何将其用作Web开发工作流程的一部分。
什么是检查元素?
检查元素（Inspect Element）是一种工具，通常可在浏览器的开发工具中找到，它可让你查看和操作构建任何网页的 HTML、CSS 和 JavaScript 代码。
打开检查元素工具时，它会显示构建网站的各个代码段。
你可以高亮显示页面部分，以显示相应的源代码。另外，点击原始源代码中的一行，也会高亮显示渲染页面上与之匹配的可视化元素。这种前端代码和设计之间的联系可以让你了解网站是如何构建的。
注：检查元素工具允许数字营销人员在不对实时网站进行任何更改的情况下，查看特定更改对网页外观的影响。这有助于测试新的 CTA 按钮、下拉菜单、配色方案和其他设计元素。您甚至还可以查看网站在不同设备上的响应情况。
您可以调整文本内容、颜色、字体、布局、动画等，以预览变化。网页外部保持不变，刷新后本地视图会恢复到原始状态。
适用于哪些人？
虽然检查元素工具主要被视为网络开发人员的工具，但其实际用途并不局限于编码。以下是各种角色的受益方式：
- 开发人员：调试布局问题，测试代码编辑，提高网站性能。
- 设计人员：可视化新的风格创意，跨设备预览设计。
- 营销人员：检查搜索引擎优化数据、导出图标/图像并在本地修改文本。
- 作家：匿名截图和本地编辑文章。
- 支持：发现问题并记录。
- 学生：学习网络技术的实施。
从本质上讲，任何与网站有关的人，无论是构建、设计、运行、撰写还是使用网站，都可以通过检查发现新的视角。
让我们来看看为什么要开始检查网络元素。
为什么要检查网站元素？
让我们来探索检查元素工具功能的主要功能，了解网站是如何构建的。
1. 调试和修复问题
查找和修复错误是检测工具的一个重要用例。当网站出现故障时，开发人员可以深入代码进行故障排除，以确定是否是样式、布局、响应速度等方面的问题。
导致页面出错的元素会直观地显示在检查器中，让开发人员能够快速缩小问题代码的范围。
由于可以对数值进行实时调整，以非破坏性方式测试修复，因此很容易找到修复方法。
检查工具还提供对控制台面板的访问。这样就可以进行更高级的调试，并运行自定义 JavaScript 查看页面的反应。
因此，在处理前端和后端网站错误时，检查元素工具可以提供强大的功能来揭示问题的根源。
2. 了解网站开发
对于仍在学习 HTML、CSS 或 JavaScript 的新开发人员来说，检查工具对学习过程有很大帮助。通过元素检查工具，您可以看到您在网站上试图实现的专业实现。最终，它能帮助你改进实现。
您还可以测试更改 HTML 中的元素和内容对页面的影响。
例如，调整边距值以观察间距变化，或使用 CSS 后代选择器锁定嵌套元素。与阅读教科书上的示例相比，真实世界的背景更能让人印象深刻。
此外，看到专业网站开发人员如何构建和优化网站，还能为你的网页编码提供蓝图。实验能力加上热门网站的可查看源代码，有助于快速成长。
3. 测试设计和内容
网页设计师经常使用检查工具来快速模拟风格变化。可以即时测试各种变化，如新字体、调整元素大小、调色板等，而不会影响生产代码。
例如，比较字体以确定理想的可读性，或更改按钮颜色以查看它们的外观。有了检查元素工具，您就可以在浏览器中完成这些操作，而无需在 Photoshop 或 Figma 等外部设备中进行更改。
同样，对于撰稿人和营销人员来说，在本地修改文本有助于预览内容和布局调整。从测试段落宽度到检查元数据，无需访问内容管理系统（CMS）后台即可轻松进行编辑，这一点非常有价值。
4. 查看SEO数据
在考虑网页的搜索引擎优化和社交元时，浏览器开发工具提供了重要的洞察力。检查元标签-描述、标题、OG标签-最关键的是影响链接在 SERP 中的显示方式和分享方式。
例如，大多数社交网络都会读取 og:title og:description 信息。所有这些信息都在网站的 <head> 元素中。
5. 检查性能
检查元素工具还能进行网络性能审核，以提高网站的整体速度和加载行为。在 Chrome 浏览器中，”网络” 选项卡会显示加载时间线，其中包括每个元素所需的时间。
在检查页面时，你可以查看总下载时间和资源请求，并将这些数据分解为单个元素。找出哪些图片、字体或 JavaScript 文件会降低性能。然后，直接解决这些问题：压缩资产、实施缓存并推迟非必要的脚本。
网络检测还可以通过节流来模拟移动或无线网络连接缓慢的情况。通过测量模拟连接的加载时间，发现可用性缺陷。网页在 3G 上是否仍能正常运行？某些文件是否会阻止渲染？这些信息可以帮助您提高网站的整体页面速度。
6. 更多作用
这只是通过检查元素工具所能实现的表面现象。我们主要关注的是开发人员的使用案例，但设计师、撰稿人和营销人员无需编码专业知识也能实现前面讨论的许多目标。你还会发现，分析可访问性和安全漏洞也经常会用到检查功能。
现在，希望你能更好地理解通过检查网页所能实现的一切，在进入实际操作之前，让我们快速了解一下这些工具是如何工作的。
如何在主要浏览器中访问检查元素工具
检查元素工具是一种实用程序，可让您查看任何网页的底层源代码。此外，您可以使用它进行临时更改并实时查看结果，同时保持原始源代码不变。如果您需要测试更改或诊断问题，这将非常有用。如果您遇到一个具有您喜欢的功能的网站并且很好奇它是如何实现的，它也可以派上用场。
大多数主要浏览器（包括Chrome、Firefox和Safari）都提供了此工具的变体。让我们看看如何在每个中访问它。
Chrome检查元素工具
在Chrome中可以通过三种方式访问检查元素工具：
- 右键单击页面上的元素并选择Inspect（检查）。
- 单击窗口右上角的三点菜单，然后选择“更多工具”>“开发者工具”。
- 按键盘上的 Ctrl + Shift + C （在 Mac 上为Cmd + Option + C ）。
当该工具打开时，它会向您显示一个拆分视图。一方面，您可以预览正在检查的网站，以及一些用于调整视图和模拟不同屏幕分辨率的控件：
另一方面，有几个包含信息的窗格。顶部窗格是页面的 HTML。将鼠标悬停在部分代码上将突出显示右侧页面的相关区域：
下面是一个显示页面信息的窗格。此处显示的详细信息因您选择的选项卡而异。在上面的屏幕截图中，它显示了页面的CSS样式。
底部窗格只是关于Chrome 开发者工具的新闻和更新。您可以通过单击X安全地关闭它以减少混乱。
最后，您可以通过单击HTML窗格右上角的三点菜单并选择停靠选项之一来更改这些窗格的位置。
1. 打开开发者工具
首先将 Chrome 浏览器（或任何基于 Chromium 的浏览器）导航到要检查的任何网页。右键单击页面上的任意位置，然后从上下文菜单中选择 “检查”。
或者使用上述键盘快捷键。
默认情况下，DevTools 会停靠在大屏幕浏览器窗口的底部。你也可以将其作为单独窗口打开或更改停靠位置-点击 “检查元素” 窗口右上角的三个竖点。
无论在哪里渲染，首先看到的都是主元素面板，其中显示了所有 HTML 代码。
在顶部还可以访问其他各种分析选项卡：控制台、源代码、网络等。
根据 检查元素窗口的打开位置，其中一部分将显示以 <html> 开头的页面源代码。当你点击代码中的不同内容时，右侧（或下方）会显示样式，包括字体、颜色、边距、衬垫等。
代码和外观之间的这种联系有助于理解和尝试更改。不过，在进行任何操作之前，我们先来看看如何高效地锁定元素进行检查。
2. 查找要检查的元素
随着页面越来越长、越来越复杂，在开发工具中通过视觉扫描查找所需的元素并定位其代码可能会变得枯燥乏味。取而代之的是使用节点选择工具。
在 Chrome DevTools 中，单击左上角（检查器窗口）的图标，该图标类似与光标交叉的选择器（或按 Ctrl/Cmd+Shift+C）。
现在，你的鼠标将切换元素选择模式。将鼠标悬停在页面上的任何可视实体上，注意检查器代码是如何自动突出显示其 DOM 节点的。
现在，点击页面上的任何元素都会直接高亮显示使该元素出现在页面上的代码。你还可以在 HTML 代码的右侧或下方看到样式。还可以使用搜索框或搜索选项卡查找元素。另外，Ctrl+F (Windows) 和 Cmd+F (Mac) 也可以！
让我们看看选中元素后可以编辑什么。
3. 与 DOM 交互
检查元素功能还提供了一种与文档对象模型（DOM）交互的方式–文档对象模型是编辑器中可见的页面元素的结构化表示。
开发人员可以直接在 Chrome DevTools 中利用 DOM 重塑内容、样式和交互性。
一些常见的元素操作方法包括：
- 通过直接编辑内容字段来编辑文本。
- 切换 CSS 样式（如颜色和字体），以便在 CSS 面板中直观地测试样式更改。
- 修改链接和按钮等组件属性以重塑功能。
- 重新排列结构元素，为其他布局提供原型。
DOM 会根据检查器视图中的更改实时更新。因此，任何调整都会在浏览器中即时预览，然后在刷新时重置，从而降低了开发过程中的实验风险。
4. 测试响应性
除了编辑单个元素，检查器工具还提供了测试各种设备和视口响应性的环境。
Chrome DevTools 包括设备模式模拟。您可以选择预设来模拟标准的手机或平板电脑分辨率和触摸功能。或者使用更高级的选项来手动配置精确尺寸、像素比、CPU 节流和其他指标。
这样可以快速验证以下方面：
- 不同断点的布局。
- 移动用户的触摸目标间距。
- 低功耗设备上的网站性能。
- 不同硬件上的可访问性。
在开发过程中在模拟移动屏幕上预览页面的能力有助于完善响应性和渐进增强交付。在各种模拟设备上进行测试可确保广泛的浏览器和设备支持。
Firefox检查元素工具
Firefox中的检查元素工具与Chrome的非常相似，可以通过类似的方式访问：
- 右键单击页面上的元素并选择“检查元素”。
- 单击 Firefox 窗口右上角的汉堡菜单，然后选择更多工具 > Web开发工具。
- 按键盘上的 Ctrl + Shift + C （在 Mac 上为Cmd + Option + C）。
Firefox默认将信息窗格放在屏幕底部：
但是，您可以通过单击三点菜单并选择其他选项轻松移动它们。
1. 查看 DOM 属性
在分析复杂界面时，焦点状态和动态效果依赖于 HTML 属性而不是 CSS。右键单击 “查看器” 视图中的任意元素，选择 “显示 DOM 属性“。
这将显示与节点相关的所有本地属性。您可以直接在此编辑值，通过检查器修改组件行为，而无需修改代码。
例如，调整范围滑块的最小/最大值和步进增量，直观地设置边界，更改复选框/无线电按钮名称组切换，覆盖数据集属性钩子不同的远程数据，等等，不胜枚举。
2. 直观地使用方框模型图
在网站上移动光标时，Firefox 会显示填充、边框和页边距，从而方便检查。
单击任何节点时，”检查器” 面板会在三种状态之间切换：弹性盒、盒模型和叠加网格。
当你想测试元素的间距、填充和边距是否应用得当时，这将非常有用。
此外，它还能让你更直接地修复任何问题，因为你可以通过点击特定元素，精确地查看影响这些元素的 CSS 样式。几何分析可以帮助初学者更快地掌握空间关系。
3. 使用颜色选择器编辑颜色
在检查工具中，单击任何接受背景、边框等颜色的属性旁边的任何色块。它会显示颜色滑块、alpha 设置和颜色选择器，以便从打开的页面中提取颜色。
您无需再花时间猜测颜色代码或检查设计资产中使用的代码。只需从页面上的现有元素甚至图像中挑选即可。
Safari检查元素工具
在Mac计算机上，Safari Web浏览器也提供了检查元素工具。但是，访问它还有一个额外的步骤——您需要启用Safari开发人员工具。
为此，请前往屏幕顶部的菜单栏并导航至Safari>偏好设置>高级。然后，您可以选中相关框以启用开发工具：
启用后，您可以像在其他浏览器中一样访问检查元素工具功能：
- 右键单击一个元素并选择检查元素。
- 在顶部菜单栏中，导航到 开发>显示页面检查器。
- 按 键盘上的Cmd + Option + I 或 Cmd+Opt+C。
Safari工具的初始布局与浏览器略有不同：
但是，与Chrome和Firefox一样，您可以通过单击检查器窗口左上角的图标轻松对其进行自定义。
1. 时间轴和网络速度
与大多数其他浏览器类似，Safari 检查器中的时间线功能强大。资源列表可帮助你立即确定哪些文件导致了渲染延迟，以及原因是什么。你还可以查看哪些脚本阻碍了页面加载。
2. 网站层的 3D 视图
如果你想分析构成网站的图层，只需进入 “Layers（图层）” 选项卡，就会看到所有图层的完整 3D 模型
检查元素工具常见用途
现在您知道如何访问“检查元素”工具，让我们看看您可以使用它执行的一些有用操作。有很多可能性，但以下用途是一些最常见的用途。请注意，我们将在这些示例中使用 Chrome，但这些功能在其他浏览器中的工作方式应该类似。
1. 在网站上查找CSS类
您可以利用检查元素的最有用的方法之一是在页面的层叠样式表 (CSS) 中查找详细信息。由于几个原因，这很方便。首先，如果您只是在浏览互联网并遇到一个您非常喜欢其风格的网站，您可以查看 CSS 以收集一些您自己的网页设计的想法。
它在您自己的网站上也很有用。例如，如果一个元素看起来不太正确，您可以快速检查它以确保它使用正确的 CSS。
使用检查元素工具检查样式有两种基本方法。如果您想快速查看单个项目，可以在预览窗格中将鼠标悬停在其上以查看有关它的一些基本信息：
在这里，您可以在我们的博客上看到标题的配色方案、字体、边距等。在详细窗格中，该工具还会突出显示相关代码，以便您可以准确了解发生了什么。单击预览中的元素将更新样式窗格以显示其CSS：
如果将鼠标悬停在元素上似乎没有做任何事情，请确保检查器窗格中的光标图标以蓝色突出显示：
如果您知道要查找的特定CSS类或样式并希望查看使用它的每个元素，您还可以使用搜索功能。在检查器打开的情况下，按键盘上的 Ctrl + Shift + F （在 Mac上为Cmd + Shift + F ）。这将打开一个搜索框，您可以在其中搜索页面的代码。 相关结果将突出显示，就像您在搜索文档一样。
2. 对站点进行故障排除
检查元素工具对于解决问题非常方便。例如，如果元素的颜色或字体看起来不太正确，您可以使用我们在上一节中描述的工具快速检查它。
您还可以从“检查元素”工具直接编辑页面的HTML。只需双击要更改的代码即可对其进行编辑。
请注意，网站上的代码实际上 并未更改——如果您刷新页面，它将恢复到其原始形式。但是，此功能对于快速测试和故障排除非常有用。
最后，内置调试器是一种更高级的工具，您可以使用它来查看页面的任何错误消息。要访问它，请单击检查元素工具窗口顶部的Console控制台：
还有其他选项卡可用于查看来源、网络活动等。要访问完整列表，请单击检查器顶部的双箭头图标。
注：平时使用我们的主题或者插件的站长，当遇到异常问题，使用此种方法查找故障并通过工单提交错误信息截图给我们，将有利于我们快速定位和解决问题。
3. 编辑文本以预览更改
检查元素工具的最佳用途之一是快速预览页面文本、字体或颜色的更改。这样，您甚至无需登录WordPress仪表板就可以准确地看到您的想法。
要编辑元素，请右键单击它并选择“检查”。 这将打开具有该元素代码焦点的工具。如果您已经打开了检查元素工具，您还可以单击预览窗格中的项目以突出显示相关代码。
接下来，只需双击代码以使其可编辑。例如，我们在这里更改了博客的标题：
您还可以更改颜色。只需选择元素并滚动 样式窗格即可找到相关部分。您可以单击颜色方块以调出颜色选择器：
如果您知道要使用的颜色，也可以直接编辑颜色的十六进制代码。
4. 预览图像变化
检查元素工具还可以轻松预览图像更改。这也是尝试不同图像尺寸的绝佳方式。
只需在预览窗格中选择要更改的图像，然后在HTML窗格中双击其URL：
然后，您可以粘贴不同图像的URL进行测试。如果图片在您的WordPress媒体库中，您可以在附件详细信息中快速找到URL：
甚至还有一个方便的按钮可以将URL复制到剪贴板。再次记住，您在检查器中所做的任何更改都只是暂时的，并且只对您可见，因此请随意尝试。
5. 使用设备仿真测试站点
最后，检查元素的另一个有用功能是能够模拟不同的屏幕尺寸甚至特定设备。这使您能够测试站点的响应能力，并准确了解它在各种移动设备形式下的显示效果。
打开检查元素工具，单击看起来像堆叠的手机和平板电脑的图标：
这将启用设备仿真。请注意，当您打开检查器时，它可能会默认启用。使用周围的手柄调整页面预览的大小，或单击预览窗格顶部的下拉菜单以选择各种设备：
您还可以输入特定的纵横比，甚至可以通过单击预览窗格顶部的“旋转”图标来检查移动设备旋转时页面的外观。要模拟各种传感器，例如位置和触摸，请单击检查器窗格中的三点菜单，然后选择更多工具 >传感器。
常见问题
您可以在任何网站上使用检查元素工具吗？
可以，检查元素工具适用于所有现代网站。不过，有些网站在服务器端渲染代码，只将 JavaScript 对象推送到前端。这样做一般是为了防止网络爬虫工具获取数据，而使用检查元素工具可能会让您难以理解网站结构。
在检查元素工具中所做的更改会永久保存吗？
不会。通过检查工具进行的任何编辑只能暂时在浏览器视图中本地呈现。刷新后会恢复默认的外部页面内容。更改不会对实际源文件产生任何影响。
其他用户能否看到检查网站时的调整？
其他浏览网站的用户无法查看检查元素工具编辑，即使在多台设备上登录同一浏览器配置文件也是如此。请将更改视为仅在您的机器上进行。
除了检查元素工具，还有其他开发工具吗？
当然有。如前所述，控制台、来源、网络和其他分析选项卡在开发过程中也非常有价值。此外，浏览器扩展还能进一步扩展 DevTools 的功能。
小结
无论您是 Web 开发新手还是经验丰富的专业人士，检查元素工具都是一个强大的实用程序，绝对应该在您的武器库中。它易于访问，几乎普遍可用，并且可以快速轻松地进行各种操作。
在本文中，我们演示了如何在Chrome、Firefox和Safari中访问检查元素工具。我们还向您展示了如何使用它来定位CSS类、对网站进行故障排除、临时更改文本和图像以及模拟移动设备。使用此工具包，您拥有使检查元素工具成为工作流程一部分所需的一切。
评论留言