你刚改完一行 JavaScript，刷新页面，按钮点不动了；或者 CSS 调了半天，文字颜色死活不变——这时候别急着删代码，前端调试过程其实就藏在浏览器里，而且比你想的更直接。
打开开发者工具，是第一步也是最常用的一步
在 Chrome、Edge 或 Firefox 里，按 F12 或右键选择「检查」，就能呼出开发者工具。它不是摆设，而是你每天写前端时最该盯着看的地方。比如页面加载后控制台报红：「Uncaught TypeError: Cannot read property 'length' of undefined」，不用猜，点开错误信息旁边的文件名和行号，立刻跳转到出问题的那行 JS。
console.log 不是土办法，是探路标
很多人觉得加 console.log 很 low，其实不然。它就像在迷宫里扔小石子，帮你确认程序到底走到了哪：
const user = getUserById(123);
console.log('user:', user); // 看看是不是 undefined
if (user && user.profile) {
console.log('profile loaded');
renderProfile(user.profile);
}只要看到控制台没输出「profile loaded」，你就知道问题出在 user.profile 这一层，不用往下盲调。
断点调试，让代码“停下来说话”
在 Sources 面板里，点击某行 JS 左侧的行号，打个断点（蓝色小圆点）。再触发对应操作（比如点按钮），代码会停在那里，你可以鼠标悬停变量看值，用右侧的 Scope 面板查当前作用域，还能一步步点「Step over」慢慢走。这比反复刷新 + console 更精准。
Network 面板盯紧请求，很多“页面空白”其实是接口没通
页面该显示数据却一片空？切到 Network 标签，刷新，看 XHR 或 Fetch 请求的状态码。404 表示接口地址错了，500 是后端崩了，而 200 却返回空数组？那就得去 Response 里看真实数据长啥样。有时候后端字段名变了（比如把 user_name 改成 username），前端还按老名字取值，自然拿不到东西。
Elements 面板改样式，所见即所得
CSS 不生效？别急着改源码。在 Elements 面板里，直接点中元素，右边 Styles 栏能看到所有生效的样式，被划掉的是被覆盖的，没划掉的是起效的。勾选/取消某个 color 前面的复选框，实时看效果；双击属性值还能当场编辑——改顺眼了，再抄回你的 CSS 文件里。
调试不是修仙，也不靠玄学。它就是一遍遍观察、假设、验证的过程。你写的每一行 HTML、CSS、JS，浏览器都清清楚楚，只是你还没学会怎么问它要答案。