浏览器调试工具入门与实用技巧

打开调试工具的几种方式

平时写网页或者改样式，最常用的工具就是浏览器自带的调试工具。打开方式特别简单：在页面上右键选择“检查”，或者直接按 F12 键，Mac 上可以用 Command + Option + I。刷新页面的时候按住 Ctrl + Shift + J（Windows）也能快速调出控制台。

有些朋友习惯用鼠标点来点去，其实快捷键更省时间。比如用 Ctrl + Shift + C 可以开启元素拾取模式，这时候把鼠标移到页面上，就能实时看到对应元素的 HTML 和 CSS。

查看和修改页面元素

点开“Elements”标签页，左边是网页结构，右边是样式面板。你可以点中某个 div 或 p 标签，右边立刻显示它的所有 CSS 规则。试着改一下颜色或者字体大小，页面会马上反应出来。这个功能特别适合调试布局错乱的问题。

比如你发现按钮位置偏了，点中它，在右边样式区找到 margin 或 padding，直接修改数值试试效果。调好了再把新值抄到源码里，比反复保存刷新快多了。

监控网络请求

切换到“Network”选项卡，刷新页面，就能看到所有资源加载情况：HTML、CSS、JS、图片、接口请求一个不落。点击某个请求，能看到状态码、耗时、请求头、返回内容。

如果网页里有个数据没出来，可以在这里找对应的 API 请求。点进去看 Response 返回的是不是空的，或者 Status 显示 404、500。有时候后端接口地址改了前端没同步，一眼就能看出来。

调试 JavaScript 代码

“Sources”或“Debugger”标签用来打断点。找到页面引入的 JS 文件，点行号可以加断点。当代码执行到这里会暂停，你可以看当前变量的值，一步步往下走。

举个例子：表单提交时总报错，你在 submit 事件处理函数的第一行设个断点。触发提交后程序停住，鼠标悬停在变量上就能看到值对不对，比如用户名是不是空字符串，手机号有没有正确提取。

function validateForm() {
    const email = document.getElementById('email').value;
    console.log(email); // 临时加一行打印
    if (!email) {
        alert('邮箱不能为空');
        return false;
    }
}

实在搞不清问题，就在关键位置加 console.log() 输出变量，信息会显示在“Console”面板里。虽然土但管用。

模拟手机设备

点左上角一个手机图标，页面就变成响应式视图。可以选择 iPhone、Pixel 等常见机型，看网页在小屏幕上的表现。旋转按钮能切换横竖屏，Network Throttling 还能模拟慢速网络。

做移动端适配时特别有用。比如你在电脑上写的页面，在手机模式下文字重叠了，可以直接在 Elements 里调整 CSS，边改边看效果。

清除缓存与强制刷新

有时候改了代码页面却没更新，大概率是缓存问题。长按刷新按钮，弹出菜单里选“清空缓存并硬性重新加载”，或者快捷键 Ctrl + F5（Mac 是 Command + Shift + R）。

这招对付 CSS 不生效、JS 老版本最有效。上线更新后用户反馈界面异常，也可以让他们这么操作，大概率解决。