谷歌浏览器支持五种CSS调试方法：一、启用本地覆盖功能持久化保存样式；二、在Elements面板编辑并保存CSS；三、手动注入自定义CSS文件映射到域名；四、通过Console动态注入临时样式；五、在Styles侧边栏禁用单条CSS规则快速排查。
如果您在调试网页时需要临时修改页面的CSS样式，但又不想直接编辑源代码或通过开发者工具手动输入，谷歌浏览器提供了本地样式注入与CSS覆盖功能。以下是实现此功能的具体步骤：
一、启用CSS覆盖功能
CSS覆盖功能允许您将修改后的样式持久化保存到本地文件中，并在刷新后自动重新应用，避免每次调试都需重复操作。
1、在谷歌浏览器中打开目标网页，按 F12 或右键选择“检查”打开开发者工具。
2、点击右上角三个点图标，选择“设置”（Settings），切换至“Preferences”选项卡。
3、向下滚动至“Network”区域，勾选“Enable local overrides”选项。
4、点击下方提示中的“Select folder for overrides”，选择一个空文件夹作为覆盖存储目录（如 Desktop/overrides）。
5、刷新页面，此时开发者工具的“Sources”面板中会出现“Overrides”标签页，且状态栏显示“Overrides enabled”。
二、通过Elements面板直接编辑并保存CSS
该方法适用于对当前页面已加载的样式表进行实时修改并持久化，修改内容会自动写入本地覆盖目录对应路径下的文件中。
1、在开发者工具中切换到“Elements”面板，定位到需要修改样式的HTML元素。
2、在右侧“Styles”侧边栏中，找到对应CSS规则（可能来自内联样式、style标签或外部CSS文件）。
3、双击任意CSS属性值（如 color: #000 ）进行编辑，输入新值后按 Enter 确认。
4、修改完成后，在“Styles”面板顶部点击任意已修改的CSS文件名（显示为斜体且带“override”标识）。
5、按 Ctrl+S（Windows/Linux）或 Cmd+S（macOS）保存更改，系统将自动在Overrides文件夹中创建匹配路径的副本文件。
三、手动注入自定义CSS文件
当需要全局注入调试用CSS（例如重置UI、高亮特定类名），可通过新建CSS文件并映射到当前页面域名来实现自动加载。
1、在Overrides文件夹中，按网站域名结构创建子路径，例如：chrome-extension://abc123/ 对应文件夹为 chrome-extension_abc123/；https://example.com/ 对应文件夹为 example.com/。
2、在对应域名文件夹内新建文件，命名为 style.css（或其他合法CSS文件名）。
3、在该文件中编写调试所需CSS规则，例如：* { outline: 1px solid red !important; }。
4、返回开发者工具“Sources” > “Overrides” > 对应域名文件夹，右键点击 style.css，选择“Map to network resource”。
5、在弹出对话框中，输入目标页面实际加载的任意CSS资源URL（如 https://example.com/main.css），点击“Submit”完成映射。
四、使用Console执行动态样式注入
该方式无需文件系统操作，适合快速验证CSS逻辑，所有注入样式仅在当前会话有效，刷新即失效。
1、在开发者工具中切换到“Console”面板。
2、输入以下代码并回车执行：
const style = document.createElement('style'); style.textContent = 'body { background: yellow !important; }'; document.head.appendChild(style);
3、如需注入多条规则，可将CSS字符串换行拼接，或使用反引号包裹多行样式文本。
4、若需移除注入样式，执行：style.remove();
五、禁用特定CSS规则进行隔离调试
在Elements面板中临时停用某条CSS声明，有助于快速判断该样式是否引发布局异常或视觉问题，不涉及文件写入。
1、在“Elements”面板中选中目标元素。
2、在右侧“Styles”侧边栏中，找到对应CSS规则块。
3、点击某一行CSS声明前的复选框（如 display: flex 的左侧方框），取消勾选即可禁用该条规则。
4、可连续禁用多个声明，每项状态独立，勾选恢复即刻生效。
5、禁用状态在页面刷新后自动重置，无需额外清理操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
