Chrome开发者工具可通过Overrides功能将CSS实时修改自动保存至本地文件夹。需授权空文件夹、映射CSS文件并启用覆盖模式，仅支持HTTP(S)页面，编辑后Ctrl+S即可写入本地。
你需要在调试网页时实时调整CSS样式，并让这些改动自动写入本地项目文件，避免手动复制粘贴或反复刷新——这要求Chrome开发者工具与你的本地文件系统建立真实、可写的映射关系，而非仅做临时编辑。
启用Overrides并授权本地文件夹
打开Chrome开发者工具（F12 或 Ctrl+Shift+I），切换到Sources面板。
在左侧边栏底部找到Overrides标签，点击【Select folder for overrides】按钮。
选择一个空文件夹（例如D:\chrome-overrides或~/chrome-overrides），系统会弹出操作系统级权限提示；必须点击Allow，拒绝后无法回退，需删除该文件夹重新添加。
立即学习“前端免费学习笔记（深入）”；
授权成功后，该文件夹会出现在Overrides下，名称旁带绿色勾选标记，表示已就绪。
将页面CSS资源映射到本地覆盖路径
方法一：通过Page标签右键映射
在Sources → Page标签下，展开当前页面域名，找到你要修改的CSS文件（如style.css）。
右键该文件 → 选择【Save for overrides】 → 在弹窗中保持默认路径（即刚才添加的文件夹内）→ 点击Save。
此时该文件会立即出现在Filesystem文件夹下，且Sources面板中对应文件名左侧会出现紫色圆点，表示已激活覆盖模式。
方法二：从Elements面板跳转后映射
在Elements面板中选中任意元素 → 右侧Styles区域找到某条样式规则 → 点击其右侧的文件名+行号（如style.css:42）→ 自动跳转至Sources中对应位置。
再对该文件右键 → 同样选择Save for overrides即可完成映射。
注意：只有通过HTTP(S)协议访问的页面才支持Overrides；file://协议打开的本地HTML文件无法启用此功能。
直接编辑并保存CSS到本地
第一步：在Elements → Styles面板中，点击任意CSS属性值（如background-color）进入编辑状态，输入新值后按Enter实时预览效果。
第二步：按Ctrl+S（Windows/Linux）或Cmd+S（Mac）保存——此时修改内容将直接写入你之前授权的本地文件夹中对应文件，无需另存为操作。
第三步：刷新页面，验证样式是否仍生效；若失效，检查Network面板中该CSS请求是否显示【from overrides】字样，未显示说明映射未生效或路径不一致。
