按F12或Ctrl+Shift+I（Win/Linux）/Cmd+Option+I（macOS）打开Chrome DevTools，默认进入Elements面板；右键“检查”可直接定位元素；Shadow DOM需点击小箭头展开；修改为临时生效，刷新即丢失。
Chrome DevTools 里怎么调出 HTML 元素面板
直接按 f12 或 ctrl+shift+i（windows/linux） / cmd+option+i（macos），出来的就是 devtools，默认就定位在 elements 面板——它就是你想要的“html 工具栏”。
常见错误是按了 F12 却看到 Console 或 Network 标签页，那只是当前激活的面板不同，点顶部的 Elements 标签就能切过去。
- 右键网页任意位置 → “检查”（Inspect），会自动跳转到对应 HTML 节点并高亮，同时打开
Elements面板 - 如果 DevTools 是横向停靠在页面底部，
Elements标签在上方一排；如果是右侧停靠，标签在左侧竖排 - 某些浏览器扩展（比如广告屏蔽插件）可能劫持右键菜单，导致“检查”选项消失，此时坚持用快捷键最稳
为什么点开元素没反应，或者结构显示为空
大概率是页面用了 Shadow DOM、Web Component 或框架（如 Vue/React）动态挂载，原始 HTML 里确实没内容，DOM 是运行时生成的。
Elements 面板显示的是当前时刻的真实 DOM 树，不是源码里的 index.html。如果你刚打开页面就急着看，而 JS 还没执行完，节点自然为空。
- 等几秒再展开
，或刷新后立刻按Ctrl+Shift+C（选择元素模式），悬停到页面上真实存在的区域，松手就能定位到对应 DOM 节点 - 遇到
#shadow-root，点它旁边的小箭头才能展开内部结构——它默认折叠，不点就看不见里面 HTML - Vue 项目里，根节点常是
<div id="app"></div>，初始为空，得等mounted后才填充，别误以为工具坏了
Elements 面板里改了 HTML，刷新就没了，怎么持久化
它只是临时编辑内存中的 DOM，和源文件完全无关。改完看着有效，只是骗过了当前页面，关掉标签页就清空。
立即学习“前端免费学习笔记（深入）”；
真要改源码，得去编辑器里改项目文件；要是只想临时验证样式或交互逻辑，Elements 面板配合 Styles 面板改 CSS 更高效。
- 右键某个元素 → “Edit as HTML”，可批量改结构，但仍是临时的
- 想让修改保留到下次打开？做不到。除非用 Workspaces 绑定本地文件（高级功能，需配置映射，且只支持静态资源）
- 误操作删了关键节点？按
Ctrl+Z（Windows/Linux）或Cmd+Z（macOS）能撤回，比刷新靠谱
移动端调试时看不到 Elements 面板
不是没打开，是默认隐藏了。Chrome 的远程调试需要先连上手机，再手动选中设备和页面，Elements 面板才会出现。
步骤卡在“找不到设备”或“页面列表为空”，往往是因为 USB 调试没开、驱动没装、或 Chrome 版本不匹配。
- 手机开启“开发者选项”和“USB 调试”，用原装数据线连接，电脑弹窗点“允许”
- Chrome 地址栏输入
chrome://inspect，勾选“Discover USB devices”，下方应出现设备名 - 若显示 “Not allowed to inspect”，说明页面启用了
Content-Security-Policy: sandbox，或 WebView 未设置setWebContentsDebuggingEnabled(true)
真正麻烦的从来不是怎么打开面板，而是面板打开了，却不知道当前看到的 DOM 是谁渲染的、什么时候挂载的、有没有被框架代理掉——这些得结合 Sources 和 Console 一起看，单靠 Elements 解不了全貌。
