Chrome DevTools Elements面板直接修改样式仅生效于运行时，刷新即失效；持久化需定位并编辑源CSS文件或HTML中的内联样式。
Chrome DevTools 的 Elements 面板怎么改样式才不白改
改完立刻生效，但刷新就消失——这是新手最常踩的坑。因为直接在 Elements 面板里双击修改的是运行时样式，不是源码。真要持久化，得先定位到对应 CSS 文件（左下角会显示 style.css:24 这类路径），再点进去改；如果样式来自内联 或 属性，就得切到 Sources 面板找对应 HTML 文件。
常见错误现象：用 Ctrl+Z 撤销后发现样式没恢复，其实是撤销了 DOM 结构变动而非样式；或者勾选/取消某个 checkbox 后样式异常，其实是被 :checked 伪类或 JS 动态 class 控制了。
- 临时调试：直接在
Styles右侧面板编辑值，支持颜色拾取器、长度单位自动换算（比如输1rem回车自动转成像素值） - 禁用某条规则：点击左侧小方框即可，比删掉再重输快得多
- 查样式来源冲突：被划掉的属性说明被更高优先级规则覆盖，悬停能看到具体是哪个选择器赢了
如何用“强制状态”调试 :hover/:focus/:active
鼠标移开就看不到 :hover 效果？Elements 面板右键元素 → Force state，勾选对应伪类即可锁定。这个功能对下拉菜单、按钮反馈、表单校验提示特别有用。
注意：:focus 强制后可能掩盖真实焦点逻辑（比如 Tab 键顺序或 autofocus 行为），所以验证交互流程时得关掉再测；:active 持续时间极短，强制后反而方便检查按下态的 padding/margin 变化是否合理。
立即学习“前端免费学习笔记（深入）”；
- 移动端模拟：在
DevTools右上角切换设备图标，启用Toggles device toolbar后，Force state仍可用，但需配合触摸模拟 - 组合状态如
:hover:focus无法直接强制，得靠手动加临时 class（见下一条）
临时加 class 或改 DOM 调试响应式或 JS 绑定样式
有些样式只在特定 class 存在时才生效（比如 .is-open 控制侧边栏展开），光看 CSS 规则不够，得让元素“假装”拥有那个状态。在 Elements 面板中右键元素 → Edit as HTML，直接在 class="..." 里追加，比如改成 class="nav is-open"。
更安全的做法是用控制台执行：document.querySelector('.nav').classList.add('is-open')，这样不会意外破坏原有结构。如果 JS 监听了 DOMSubtreeModified 或用 MutationObserver 响应 class 变化，手动编辑 HTML 可能触发预期外行为。
- 快速清空所有 class：在
Elements面板里选中元素，按Delete键删掉整个class属性，比一个个删值快 - 想测试多个 class 组合？用空格分隔，比如
class="btn btn-primary is-loading"，不用反复开关 - 注意 class 名大小写和连字符：CSS 里写
.btn-primary，JS 里必须用'btn-primary'，写成'btn_primary'不生效
哪些插件真能提升 CSS 调试效率
官方工具够用，但以下插件解决的是“重复劳动”问题：比如颜色值转换、选择器复用、响应式断点快切。别装一堆华而不实的“CSS 生成器”，重点看是否和 DevTools 深度集成。
ColorZilla 提供 eyedropper 和渐变编辑器，但 Chrome 本身已内置颜色拾取；CSS Peeper 能一键提取页面所有用到的字体、颜色、间距，适合做设计走查；Window Resizer 比 DevTools 自带设备模拟多出预设分辨率（比如 iPhone SE 2022），适合批量截图。
- 警惕“自动加前缀”类插件：Autoprefixer 已是构建流程标配，运行时加前缀可能掩盖兼容性问题
- 插件权限要细看：标称“读取网页数据”的，实际可能抓取 CSS 内容上传服务器，敏感项目建议禁用
- 真正省时间的是快捷键：比如
Ctrl+Shift+P（MacCmd+Shift+P）呼出命令菜单，输show console或toggle grid比翻菜单快得多
复杂布局（比如 Grid/Flex 嵌套）调试时，别只盯着单个元素的 computed 样式，Layout 选项卡里的网格线、对齐指示器、溢出标记才是关键线索——这些信息默认不显示，得手动开启。
