如何在谷歌浏览器开发者工具中直接修改并保存本地CSS文件？

Chrome开发者工具可通过Overrides功能将CSS实时修改自动保存至本地文件夹：先授权文件夹、映射CSS资源、再在Styles面板编辑后按Ctrl+S保存，修改即写入本地。

你需要在调试网页时实时调整CSS样式，并让这些改动自动写入本地项目文件，避免手动复制粘贴或反复刷新——这要求Chrome开发者工具与你的本地文件系统建立真实、可写的映射关系，而非仅做临时编辑。

启用Overrides并授权本地文件夹

打开Chrome开发者工具（F12 或 Ctrl+Shift+I），切换到 Sources 面板。

在左侧边栏底部找到 Filesystem 节点，点击下方的 + Add folder to workspace 按钮。

选择一个空文件夹（例如 D:chrome-overrides 或 ~/chrome-overrides），Chrome会弹出系统级权限提示，必须点击 Allow 才能获得读写能力；拒绝后无法回退，需删掉该文件夹重新添加。

授权成功后，该文件夹会出现在 Filesystem 下，名称旁带绿色勾选标记，表示已就绪。

将页面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 字样，未显示说明映射未生效或路径不一致。

这一步操作起来很简单，直接改完按保存快捷键就行。但要注意：如果源 CSS 是由构建工具（如 Webpack/Vite）动态注入的内联样式或 style 标签，它不会出现在 Page 列表里，也无法被映射——此时需改用 Source Maps + 工作区方式调试原始 SCSS/LESS 文件。