按f12或ctrl+shift+i（win/linux）/cmd+option+i（macos）直接打开开发者工具；elements面板编辑html仅影响运行时dom，刷新即失效，且不触发vue/react响应式更新。
浏览器开发者工具怎么开
直接按 F12 或 Ctrl+Shift+I（Windows/Linux）/ Cmd+Option+I（macOS），绝大多数现代浏览器都支持。别去菜单里翻“更多工具”——慢、容易点错，而且有些隐藏菜单在无痕模式下还不显示。
常见错误现象：点了没反应？先确认页面没被 iframe 隔离，或者当前标签页不是空白页或 about:blank；再检查是否误开了“控制台”但没切到“元素”面板——Elements 标签才是改 HTML 的主战场。
- 改完
innerHTML或手动编辑节点后，刷新就丢，这是正常行为——开发者工具改的是运行时 DOM，不是源文件 - 右键元素 →
编辑为 HTML可直接改结构，但不触发 Vue/React 等框架的响应式更新，改了也白改 - 用
console.dir($0)能快速查看当前选中元素的完整对象，比只看渲染结果更准
HTML语法错误为什么浏览器不报错
因为 HTML 解析器天生容错——<div><p></p></div>
真正要警惕的是那些“静默失效”的写法：
立即学习“前端免费学习笔记（深入）”；
-
class拼成calss：不会报错，但样式不生效，且document.querySelector('.xxx')找不到 - 自闭合标签写成
<img src="x" alt="HTML怎么调试_HTML代码调试技巧【攻略】" >：HTML5 不允许，浏览器会忽略 ，但后续兄弟节点可能被吞掉 - 属性值不加引号，比如
<div data-id="123abc">：遇到空格或特殊字符（如 <code>data-id=foo bar）就会截断，变成data-id="foo"怎么定位“明明写了却没显示”的元素
优先查
display: none、visibility: hidden和opacity: 0，这三者在“元素”面板里都能一眼看到——展开样式区，搜索框输dis或vis就能高亮。更隐蔽的情况是父容器溢出裁剪：
- 父级有
overflow: hidden且子元素position: absolute超出边界，元素存在但不可见 -
z-index层级被盖住，注意只对position不是static的元素生效 - 用
box-sizing: border-box时，宽高包含 padding/border，容易误判尺寸是否撑开
快捷操作：在“元素”面板里勾选右上角的
:hover、:active等伪类，或点击左上角的鼠标图标，悬停页面就能高亮对应 DOM 节点。修改HTML后样式/交互异常怎么办
不是所有改动都“所见即所得”。比如删掉一个
<div class="container">，可能让 CSS 选择器 <code>.container > .item全体失效；又或者移除了某个id，导致document.getElementById('modal')返回null，后续 JS 报Cannot read property 'show' of null。实操建议：
- 改结构前先搜一下这个 class/id 在 JS 里有没有被引用：
Ctrl+F页面源码（不是 Elements 面板）或全局搜索项目代码 - 用
console.log(document.querySelector('你的选择器'))确认元素是否真被选中，别只信肉眼 - 如果用了 Web Components 或 Shadow DOM，普通
querySelector查不到内部节点，得用shadowRoot.querySelector
最常被忽略的一点：HTML 属性变更（比如改
disabled）不会自动触发 JS 绑定的事件监听器重绑——那是框架或手写逻辑该干的事，原生 HTML 不负责“联动”。 - 父级有
