BEM 调试核心在于养成“搜关键词→看 Computed→点击跳源码”肌肉记忆；Computed 面板是主战场，支持属性搜索、权重对比、源码穿透；Elements 面板禁用类、断点监听、精准搜索可大幅提升效率；getComputedStyle() 会隐藏类名来源，需交叉验证。
Chrome DevTools 本身不强制要求任何配置，但 BEM 要真正提升调试效率，必须配合特定操作习惯和面板用法——否则类名再规范也白搭。
Computed 标签页才是 BEM 调试主战场
别在 Styles 面板里手动滚动找规则。BEM 类名的语义优势只有在 Computed 面板里才爆发出来：
- 搜索某个 CSS 属性（如
padding、color），命中行带小箭头的即为生效的 BEM 规则，点击直接跳转源码 - 对比
modal__close和.modal.is-open .modal__close哪条胜出？Computed 里一眼可见，不用猜权重 - 按住
Ctrl（Windows）或Cmd（macOS）再点击属性值，能穿透@import定位到原始 SCSS 文件
Elements 面板禁用类比改代码快十倍
动态验证 Modifier 是否起作用，别反复保存、刷新、切回 DevTools：
- 在 Elements 面板中，直接取消勾选
card__content--expanded前的复选框，实时观察样式变化 - 右键元素 →
Break on→Attribute modification，JS 修改class列表时自动断点，方便追踪动态加类逻辑 - 搜
__content或--expanded比搜content准得多——BEM 类名不是给人读的，是给 Ctrl+F 用的
getComputedStyle() 会彻底隐藏 BEM 类名来源
这是最常被忽略的盲区：运行时查不到样式归属，纯靠猜会卡死调试流。
立即学习“前端免费学习笔记（深入）”；
-
getComputedStyle(btn).padding只返回"16px"，完全不体现它来自button--large还是button__icon--large - 验证
form__field--error是否生效？别查 JS，直接看 Elements 面板 class 列表有没有这个字符串 - Modifier 切换逻辑复杂时，优先用 DevTools 的 class 列表 + Computed 属性交叉验证，而不是依赖 JS 控制台输出
BEM 的调试价值不在命名本身，而在你是否养成了「搜关键词 → 看 Computed → 点击跳源码」这一串肌肉记忆；一旦漏掉其中一环，再标准的类名也只是摆设。
