<p>应避免使用 * { border: 1px solid red } 调试，因其无差别应用导致页面混乱；推荐用 [data-debug] 或 .debug-outline 等显式标记配合 outline、!important 和多色区分，并通过 DevTools 临时注入或 CSS 自定义属性可控启用。</p>
直接用 * { border: 1px solid red } 会出事
这行 CSS 看似简单粗暴有效，但实际调试时大概率让你更难定位问题。它会给**所有元素**加红边，包括 <input>、<textarea>、伪元素、甚至 outline 被覆盖后失焦的按钮——结果是页面一片红，根本分不清哪个边是容器、哪个边是内容溢出。
真正有用的调试边界，得有选择性、可开关、不干扰交互：
- 避免用通配符
*，改用[data-debug]或.debug-outline这类显式标记 - 用
outline而非border，避免触发重排（border会改变盒模型尺寸） - 加
!important确保不被业务样式覆盖，但仅限调试阶段 - 颜色别只用红色，对不同层级用不同色：比如
outline: 1px dashed #00f表示父容器，outline: 1px dotted #f60表示子模块
Chrome DevTools 里临时启用比写死 CSS 更安全
你不需要把调试样式塞进项目文件。在 Chrome 的 Elements 面板右键任意节点 → “Add attribute” → 输入 style="outline: 1px solid #00f !important;"，就能单点高亮；或者在 Console 里执行：
document.querySelectorAll('*').forEach(el => el.style.outline = '1px dashed #00f')这样做的好处很实在：
立即学习“前端免费学习笔记（深入）”；
- 刷新即消失，不会误提交到代码库
- 可以配合
document.querySelector('main .card')精准作用于某类区块，避开表单控件和 SVG - 用
getComputedStyle(el).outline能立刻验证是否生效，不用反复切回 Styles 面板
想全局启用又可控？用 CSS 自定义属性 + :is()
如果真要写进样式表（比如团队共享调试配置），推荐这个组合：
:root {
--debug-outline: none;
}
body[data-debug] :is(section, article, aside, header, footer, main, .layout, .container) {
outline: var(--debug-outline);
}然后只需在 <body data-debug> 上开关，就能批量控制。关键点在于：
-
:is()兼容现代浏览器（Chrome 100+ / Firefox 100+ / Safari 15.4+），比写一堆重复选择器干净得多 - 只选语义化区块或明确命名的布局类，绕开
div、span这类泛型标签 -
--debug-outline设为none默认值，避免上线遗漏删除
border 影响布局时，box-sizing: border-box 不是万能解
很多人发现加了 border 后文字换行错乱、滚动条突然出现，就急着给所有元素加 box-sizing: border-box。但这治标不治本：
-
border-box只解决尺寸计算方式，不解决border本身侵占空间的事实 - Flex/Grid 容器内子项加
border，可能触发min-width: auto导致换行异常 - 真正该做的是：调试阶段用
outline；必须用border时，配合calc(width - 2px)或负margin补偿（但仅限极少数场景）
最常被忽略的一点：调试样式不该出现在生产环境的任何构建产物里，哪怕只是注释掉的 * { border }，也可能被 CSS 压缩工具误提或 HMR 残留。删干净比注释更可靠。
