打开浏览器开发者工具是第一步
很多人写完 HTML 页面后发现效果不对，第一反应是反复检查代码。其实更高效的方式是直接按 F12，打开浏览器的开发者工具。无论是 Chrome、Edge 还是 Firefox，这套工具都能让你实时查看页面结构、样式和运行状态。
比如你写了个 div 死活不显示，点开“Elements”面板一看，原来是 class 名拼错了，或者被 CSS 设置了 display: none。这种问题在源码里盯半天也不一定看得出来，但开发者工具一展开，立马暴露。
利用元素面板实时修改结构
在 Elements 面板里，你可以直接点击任意 HTML 元素进行编辑。试着删掉一个标签，或者临时加个 style 属性，页面会立刻反映变化。这特别适合调试布局错乱的问题。
举个例子，你做的表单按钮跑到了文字下面，可以在面板里把 button 的 display 从 block 改成 inline-block，看看是不是就好了。如果生效，说明问题出在默认样式上，回头再去改源码就行。
<button style="display: inline-block;">提交</button>检查控制台输出的错误信息
有时候页面看起来没问题，但功能失灵。这时候得看 Console 面板。HTML 虽然不会报语法错误，但如果引入了 JS 脚本，而脚本因为 DOM 没加载完就执行，就会报错“Cannot read property of null”。
这种情况通常是因为 JavaScript 代码写在了头部，而操作的元素还没解析到。解决办法很简单：把 script 标签移到 body 底部，或者用 window.onload 包一层。
<script>\n window.onload = function() {\n const elem = document.getElementById('myDiv');\n elem.style.color = 'red';\n };\n</script>用网络面板查资源加载失败
图片不显示？字体没生效？可能是路径错了。Network 面板能清楚告诉你哪些资源加载失败了。比如你写了 <img src="images/photo.jpg">，但实际文件夹叫 imgs，这一行请求就会标红。
曾经有次同事调了一下午背景图，最后发现是路径里多打了个 s。这类低级错误太常见，Network 面板一扫就现形。
模拟移动设备查看响应式效果
现在网页都讲究适配手机，但不是每个人都会拿真机去测。开发者工具里的设备切换按钮（那个小手机图标）可以模拟不同屏幕尺寸。拖动窗口时配合 Elements 面板观察类名变化，能快速判断媒体查询有没有起作用。
比如你设置了 @media (max-width: 768px) { .nav { display: none; } }，但在小屏幕上导航还在，那就可以在模拟器里看这个样式规则是否被覆盖或者压根没命中。
善用断点定位动态内容问题
如果页面内容是通过 JavaScript 动态插入的，比如用 innerHTML 拼接一大段 HTML，结果渲染出来不对，光看源码没用——因为源码里根本没有那段结构。
这时候要在 JS 代码里下断点，一步步执行，观察变量值和 DOM 变化。比如拼字符串时少了个闭合标签，导致后续结构全部错位，断点停在那一行，就能看到生成的字符串到底长什么样。
console.log('<div class="item">' + item.name + '</div'); // 少了个 >？别忽视 HTML 语义和标签闭合
有些问题不是浏览器能帮你提示的。比如忘了闭合 p 标签，或者在 div 里嵌套了另一个块级元素却不知道它不合法。虽然页面照样显示，但可能引发意想不到的样式冲突。
有个经典坑：在 p 标签里放了一个 div。HTML 规范不允许这样，浏览器会自动在遇到 div 时关闭 p，导致结构变形。你以为的嵌套关系其实根本不存在。
<p>这是段落<div>这是区块</div></p>