「Chrome 开发者模式」Element面板调试前端样式

一、前言

在前端开发过程中，快速调试和调整网页样式是非常重要的。Google Chrome浏览器内置了强大的开发者工具（DevTools），可以帮助我们实时查看和修改页面元素及其样式。本文简单介绍了如何使用Chrome的“Elements”标签来调整页面样式。

二、Chrome开发者工具

中文文档：（遇事不决看文档！）概览 | Chrome DevTools | Chrome for Developers开始使用 Google Chrome 内置的网络开发者工具。https://developer.chrome.google.cn/docs/devtools/overview?hl=zh-cn

概览  |  Chrome DevTools  |  Chrome for Developers

1. 打开

点击“F12”或右键“检查”打开开发者工具，进入"Elements"面板，Elements 面板提供了一个可用于检查和操控 DOM 的强大界面。您可以利用 DOM 树（类似于 HTML 文档）选择特定的 DOM 节点，并使用其他工具进行修改。

2. 标签页作用：

• Styles：
  • 查看和调试所有样式表中应用于某个元素的 CSS 规则。
  • 查找任何无效、被替换、无效或其他无法正常运行的 CSS。
  • 通过添加声明、应用类以及与 Box 模型交互，修改元素。
  • 使用 DOM 树中的标记访问容器修改选项。
• Computed：列出在 Chrome 呈现某个元素时应用于元素的已解析属性。
• Layout：包含用于修改 grid 和 flexbox 叠加层的选项。
• Event Listeners：列出所有事件监听器及其属性。让您可以查找事件监听器的来源并过滤被动监听器或屏蔽监听器。
• DOM Breakpoints：列出从“Elements”面板添加的 DOM 更改断点，并可让您启用、停用、移除或显示这些断点。
• Properties：选择一个 DOM 节点以检查该对象的自己的属性和继承的属性，并对其进行排序。

三、CSS样式调试

1. 查看和更改CSS样式

• 左上角使用检查模式选中进行调试的元素，当 Inspect mode 图标为蓝色时，选择器选择器处于有效状态。

• 启用开发者工具检查模式（选择器选择器）后，您可以将鼠标悬停在页面上的元素上。检查模式提示会根据元素的不同显示如背景颜色、文本颜色、字体属性、内外边距等样式属性。

• 点击元素后，系统会在元素面板 DOM 树中突出显示相应的 DOM 元素，并在Styles标签页中列出相关样式。

2. 更改CSS

DOM Tree列出了元素的属性和值，同时在Styles标签页中列出相关样式。您可以进行如下操作

2.1 向元素添加CSS声明

在 Styles 标签页下找到 element.style ，输入background-color，回车，输入red，回车，可以看到元素的背景色样式已经被应用。

 同时，在 DOM 树中，您可以看到系统已对该元素应用内嵌样式声明。

2.2 向元素添加CSS类

点击 .cls。开发者工具会显示一个文本框，您可以在其中为所选元素添加类。

2.3 向添加伪状态

点击 .hov。界面下方会出现可被切换的所有伪类，选中时会展示相应的效果。例如选中 :hover 会悬停时的效果

2.4 更改元素的尺寸

点击Styles标签操作栏的图标查看边框模型。可以双击修改内外边框的边距值。

四、总结

本文简要介绍了如何使用Chrome Tools查看和更改CSS样式，仅供大家参考。如果想要掌握开发者模式的功能，一定要阅读官方文档！