用开发者工具取消勾选 Styles 面板中带删除线的 display: none 即可临时显示；或在 Console 执行 $$('[style*="display: none"], [hidden]').forEach(el => el.style.display = 'block') 快速批量恢复。
用 display: none 隐藏的元素怎么临时调出来看结构？
浏览器开发者工具本身不提供“一键显示所有隐藏元素”的按钮，但可以快速覆盖样式。关键不是“调开”，而是“绕过当前 CSS 规则”。
常见错误是直接在 Elements 面板里双击修改 style 属性，却忘了该元素可能被更高级的选择器（比如 .modal.is-hidden .content）强制设为 display: none，手动加 display: block 会被覆盖。
- 右键目标元素 → “Break on” → “attribute modifications”，可定位是谁在动态改
display - 在 Styles 面板中，找到带删除线的
display: none，点击左侧复选框取消勾选，它就立即生效了 - 想批量处理？在 Console 执行：
$$('[style*="display: none"], [hidden]').forEach(el => el.style.display = 'block')（注意：仅作用于内联样式，不触碰 class 或外部 CSS）
JavaScript 控制的弹窗打不开，怎么强制触发？
很多弹窗由事件监听器控制（比如 click、keydown），或依赖状态变量（如 isOpen === false）。盲目点按钮没反应，大概率是前置校验失败或事件没绑上。
先确认弹窗逻辑在哪：搜索源码中的 showModal、openPopup、toggleDialog 等函数名，或断点在 addEventListener('click', ...) 附近。
立即学习“前端免费学习笔记（深入）”；
- 如果函数可访问（非闭包私有），直接在 Console 调用：
showModal(); // 或 openLoginDialog(true)
- 如果被封装在模块/类里，尝试从全局对象找实例：
window.App?.dialog?.show(); // 或 document.querySelector('app-root')?.showDialog?.() - 模拟真实事件更稳妥：
document.getElementById('trigger-btn').dispatchEvent(new Event('click', {bubbles: true}));
用了 visibility: hidden 或 opacity: 0 的元素看不见但占位，怎么验证它真存在？
这两者不会影响文档流，所以元素还在，只是“不可见”。容易误判为“没渲染成功”或“被移除了”。
最直接的办法是用开发者工具的“选择元素”功能（Ctrl+Shift+C / Cmd+Shift+C），把鼠标悬停在预期位置——即使空无一物，只要 DOM 节点存在，就能高亮框选出来。
-
visibility: hidden：元素不可见，但能响应focus、pointer-events（除非显式禁用） -
opacity: 0：完全透明，但默认仍捕获鼠标事件；若同时有pointer-events: none，才真正“穿透过” - 快速检查是否被遮挡：在 Styles 面板临时加
outline: 2px solid red !important;，红色描边会穿透所有层
Chrome DevTools 里哪些快捷操作能省掉反复刷新？
每次改完 JS/CSS 就 Ctrl+R，效率低还可能丢失当前状态（比如表单已填内容、滚动位置、弹窗打开中）。
优先用运行时调试替代刷新：
- 在 Sources → Page 里找到对应 JS 文件，右键 → “Blackbox script” 可避免进入框架内部断点
- 修改 CSS 后按 Ctrl+S（Cmd+S），样式实时生效，无需刷新
- 改完 JS 函数逻辑？在 Console 里粘贴新函数体并执行，再手动调用测试，比重载页面快得多
- 要保留弹窗状态调试？右键 Elements 面板任意节点 → “Edit as HTML”，删掉
hidden属性或改class，DOM 即时更新
复杂交互里，隐藏逻辑常和状态管理耦合（比如 Redux 的 isModalOpen、Vue 的 v-if 响应式依赖），光改 DOM 往往没用——得去改对应的状态源或 store 数据。
