cloud
32 lines
914 B
Markdown
32 lines
914 B
Markdown
---
|
|
name: frontend-debug
|
|
description: 前端 bug 排查规范。用于样式异常、交互异常或状态不一致问题，按 CSS、DOM、JS 的顺序定位，避免盲改逻辑代码。
|
|
---
|
|
|
|
# 前端排查规范
|
|
|
|
## 排查顺序（必须按序）
|
|
|
|
1. CSS 层：检查 Computed Style，确认是否被覆盖
|
|
2. DOM 层：检查 class 是否正确挂载
|
|
3. JS 层：确认 state/ref 与渲染流程是否正确
|
|
|
|
## 常见坑
|
|
|
|
- CSS Modules 中，复合选择器优先级高于单类选择器
|
|
- “样式不生效”大多数是优先级和覆盖问题，不是 JS 问题
|
|
|
|
示例：
|
|
|
|
```css
|
|
.table td { color: #ccc; } /* (0,1,1) */
|
|
.valueChanged { color: #22c55e; } /* (0,1,0) -> 会被覆盖 */
|
|
.table td.valueChanged { color: #22c55e; } /* 修复 */
|
|
```
|
|
|
|
## 禁止项
|
|
|
|
- 未验证 CSS 前反复改 JS
|
|
- 一次性改多层（CSS/DOM/JS）导致回归难定位
|
|
- 凭感觉改，不看 DevTools 实际结果
|