Chrome DevTools不支持CSS断点调试，因CSS无执行栈和单步暂停能力；修改animation-duration等参数后需手动暂停重播、移除重加class或删整行animation才能生效，Animations面板仅捕获running状态的动画实例。
Chrome DevTools 本身不支持 CSS 断点调试——你看到的“断点错位”“打不准”，本质是误用了 JS 调试逻辑去套 CSS，而 CSS 没有执行栈、没有单步暂停能力。
为什么你在 Styles 面板改 animation-duration 没反应？
CSS 动画参数修改后不会自动重播，已运行的动画实例仍按旧值执行。DevTools 不会主动中断并重载样式，它只做“写入”，不触发“重计算+重播放”。
- 必须先点击动画时间轴旁的
⏸️手动暂停，再点▶️重播，否则改了也白改 - 若动画由 class 控制（如
class="fade"），需先el.classList.remove('fade')，再el.classList.add('fade') - 直接在 Styles 面板删整行
animation再重输，比只改duration子属性更可靠——这会强制销毁旧实例
为什么 Animation 面板一直显示 “Listening for animations”？
面板只捕获处于 running 状态的动画实例，静态声明、animation-play-state: paused、刚结束或 JS 驱动的动画都不会被收录。
- 检查元素是否真有生效的
animation或transition声明（仅写@keyframes不算） - 用右键 →
Force state→ 勾选:hover或:focus触发 transition 类动画 - 对 JS 控制的动画，执行：
el.style.animation = 'none'; setTimeout(() => el.style.animation = 'spin 1s', 10);
为什么断点“错位”到 JS 文件里？
Vue/React 项目中，你在源码写的 style 标签或 SCSS 文件，最终被 webpack 注入为 JS 字符串或内联 <style>，Source Map 映射失效时，DevTools 会把样式变更“归因”到生成它的 JS 模块上。
立即学习“前端免费学习笔记（深入）”；
- 确认构建配置中启用了
devtool: 'source-map'（Vue CLI 项目优先查vue.config.js） - 打开 Sources 面板，展开
webpack://，看是否有对应 .scss/.css 文件且带“源”图标 - 禁用所有 Chrome 扩展，尤其 CSS 相关插件（如 Stylebot、Dark Reader），它们可能劫持样式注入流程
最常被忽略的点：CSS 调试不是“设断点→等停→看变量”，而是“改→强制重触发→观察渲染结果”。别试图让样式“暂停执行”，它压根不执行。
