「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-cnhttps://developer.chrome.google.cn/docs/devtools/overview?hl=zh-cn

1. 打开

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

2. 标签页作用：

Styles：

左上角使用检查模式选中进行调试的元素，当 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样式，仅供大家参考。如果想要掌握开发者模式的功能，一定要阅读官方文档！
启用开发者工具检查模式（选择器选择器）后，您可以将鼠标悬停在页面上的元素上。检查模式提示会根据元素的不同显示如背景颜色、文本颜色、字体属性、内外边距等样式属性。