Chrome DevTools元素面板定位目标div：用Ctrl+Shift+C（Win）/Cmd+Shift+C（Mac）进入选择模式，悬停高亮双向同步；遇SVG/Canvas/Shadow DOM需手动展开#shadow-root；改样式后检查Computed面板的display、visibility、opacity等实际值。
Chrome DevTools 元素面板怎么快速定位目标 <div>
<p>点开 devtools（<code>f12 或 cmd+option+i），默认就在 elements 面板。页面上悬停元素，dom 树里会高亮对应节点；反过来，在树里点某个 <div>，页面也会高亮它。
<p>常见错误：右键“检查”没反应，其实是点了内联 SVG、Canvas 或 Shadow DOM 里的内容——这些不会直接映射到主 DOM 树，得手动展开 <code>#shadow-root 节点或切到 Rendering 面板看实际渲染层。
- 快捷键
Ctrl+Shift+C（Win）/Cmd+Shift+C（Mac）直接进入“选择元素”模式，比右键更稳，尤其适合 iframe 嵌套深的页面
- 选中元素后，右侧
Styles 面板显示所有生效样式，带删除线的是被覆盖的规则，点前面的复选框可临时禁用某条
- 修改
class 名或 style 属性时，直接双击值即可编辑，回车确认；改错按 Esc 撤销
为什么改了 display: none 页面还是没显示？
Ctrl+Shift+C（Win）/Cmd+Shift+C（Mac）直接进入“选择元素”模式，比右键更稳，尤其适合 iframe 嵌套深的页面Styles 面板显示所有生效样式，带删除线的是被覆盖的规则，点前面的复选框可临时禁用某条class 名或 style 属性时，直接双击值即可编辑，回车确认；改错按 Esc 撤销display: none 页面还是没显示？不是所有隐藏都靠 display。常见干扰项有：visibility: hidden、opacity: 0、父级 overflow: hidden 切掉了子元素、或者用了 transform: scale(0)。
实操建议：选中元素后，在 Computed 面板顶部搜 display，再往下拉看 visibility、opacity、transform 等关键属性的实际计算值。别只盯着 Styles 面板里写的那几行。
-
Computed面板里点属性名旁的箭头，能跳转到定义该值的原始 CSS 规则位置（含文件名和行号） - 如果看到
display: none是来自用户代理样式（user agent stylesheet），说明是浏览器默认行为，比如<option></option>在非<select></select>下就不可见 - 某些框架（如 Vue）会在元素上加
data-v-xxx属性做样式隔离，删掉它可能让 scoped 样式失效，反而暴露隐藏逻辑
box-sizing 设成 border-box 后尺寸还是不准？
因为 box-sizing 只影响当前元素自身盒模型，不影响子元素。如果父容器设了 padding，而子元素用 width: 100%，那子元素宽度 = 父内容区宽 + 父 padding，就会溢出。
立即学习“前端免费学习笔记（深入）”；
另一个高频坑：CSS 自定义属性（--size）没生效，但你在 Styles 面板里看到它被声明了——这不代表它被读取了，得看是否在作用域内被 var(--size) 调用，且没有拼写错误或层级覆盖。
- 在
Computed面板搜索width，看“actual width”数值，对比你期望的像素值，差多少就往哪查 - 用
Layout子面板（在Elements右侧）看盒模型可视化图，边框、padding、margin 是否重叠或塌陷 - 移动端调试时注意
viewport缩放或font-size继承导致的视口单位（vw/vh）偏差，这种不体现在box-sizing上，但直接影响布局
如何确认某个点击事件到底绑在哪一层？
右键目标元素 → “Break on” → “Attribute modifications” 没用，得选 “Event Listener Breakpoints”，然后勾选 click。再点页面，代码会停在绑定事件的 JS 行上。
但更常用的是直接看 Event Listeners 面板（在 Elements 右侧标签页）：选中元素后，这里列出所有监听器，包括捕获阶段（Capture）、冒泡阶段（Bubble）、以及绑定位置（文件名+行号）。注意“Ancestors”里可能有父级绑定的委托事件，比如 document.addEventListener('click', handler)。
- 如果列表为空，不代表没事件——可能是用
onclick="..."内联写的，这种会出现在Attributes里，而不是监听器列表 - React/Vue 等框架通常把事件挂到根容器，用合成事件机制分发，
Event Listeners面板里看不到组件内部@click，得看Components面板（需安装对应扩展） - 移除事件监听器不能靠删 HTML 属性，得用
removeEventListener；DevTools 里删了onclick属性，只是清掉内联绑定，JS 里绑的还在
