前言

前端开发离不开浏览器调试，90% 的 bug 都可以通过开发者工具快速定位：接口报错、JS 逻辑异常、样式错乱、布局偏移、接口 403/500、跨域、缓存问题。

很多人只会简单console.log，不会断点调试、Network 抓包、Console 高级用法、条件断点、DOM 断点。本文全程图文式详解 + 可测试代码 + 每步操作讲解，新手看完直接变身调试高手。

---

一、打开浏览器调试工具

打开方式

1. 鼠标右键 → 检查
2. 快捷键：F12 / Ctrl + Shift + I

核心五大面板：

• Elements：调试 HTML 结构、CSS 样式
• Console：控制台打印、代码临时运行
• Network：抓包、查看接口请求 / 响应
• Sources：断点调试 JS 代码
• Application：缓存、Cookie、LocalStorage、SessionStorage

---

二、Elements 元素 & 样式调试（样式错乱必备）

2.1 核心作用

• 实时修改 HTML 结构、临时增删元素
• 实时改 CSS 颜色、宽高、边距、定位
• 查看样式继承、覆盖、失效原因
• 定位样式被哪个选择器覆盖

2.2 实操技巧

1. 左上角箭头：点击后可选中页面任意元素
2. 右侧 Styles：可直接改数值、勾选 / 取消样式
3. 划掉的样式：代表被更高优先级覆盖
4. computed：查看最终生效的计算样式

2.3 常见排错

• 样式不生效：看是否被划掉、权重不够
• 布局错位：看盒模型 margin/padding/border
• 移动端适配：直接改 width、缩放调试

---

三、Console 控制台高级调试（不止 console.log）

3.1 基础打印 & 分组打印

测试代码

js

// 普通打印
console.log("普通日志")
// 错误警告
console.error("报错信息")
console.warn("警告信息")

// 分组折叠日志
console.group("用户信息")
console.log("姓名：张三")
console.log("年龄：20")
console.groupEnd()

3.2 打印对象表格形式

比 log 看对象清晰百倍

js

const list = [
  {id:1, name:'小明'},
  {id:2, name:'小红'}
]
console.table(list)

3.3 计时执行耗时

测代码执行效率

js

console.time("循环耗时")
for(let i=0;i<100000;i++){}
console.timeEnd("循环耗时")

3.4 条件打印

满足条件才输出

js

const flag = true
flag && console.log("条件满足才打印")

3.5 $0 快速获取当前选中元素

在 Elements 选中元素，控制台输入：

js

$0.style.color = 'red'
$0.click()

直接操作 DOM，不用写代码。

---

四、Network 网络抓包教程（接口调试核心）

4.1 核心作用

• 查看请求地址、请求方式、请求参数
• 查看后端返回数据、报错信息
• 排查 404、403、500、跨域、请求参数错误
• 查看接口响应耗时、排查接口慢

4.2 关键面板介绍

• Headers：请求头、响应头、请求方式、接口地址
• Payload：请求参数（Query/Body）
• Response：后端返回原始数据
• Preview：格式化后的返回 JSON

4.3 筛选抓包类型

• All：所有请求
• XHR/Fetch：只看前端接口请求（最常用）
• JS/CSS/Img：静态资源

4.4 实操常用技巧

1. 勾选 Disable cache：禁止缓存，强制刷新最新代码
2. 右键接口 → Copy as fetch 直接复制请求代码
3. 查看 500 错误：看 Response 里后端报错堆栈
4. 403 错误：看 Headers 里 Token、跨域配置

4.5 模拟接口请求

控制台粘贴 fetch 直接测试接口：

js

fetch('/api/user/list')
.then(res=>res.json())
.then(data=>console.log(data))

---

五、Sources 断点调试（JS 逻辑排错神器）

5.1 什么是断点

代码执行到指定行暂停，可以一步步看变量、看执行流程、找逻辑 bug。

5.2 基础断点使用步骤

1. F12 → Sources
2. 找到对应 js/vue 文件
3. 点击行号出现蓝色箭头 = 打上断点
4. 操作页面触发代码，自动暂停

调试快捷键

• F8：放行到下一个断点
• F10：单步跳过（不进入函数内部）
• F11：单步进入（进入函数内部）
• Shift+F11：跳出当前函数

5.3 代码示例（可用来练习断点）

js

function calc(a, b) {
  let sum = a + b
  let avg = sum / 2
  return avg
}

let res = calc(10, 20)
console.log(res)

在 let sum = a + b 打断点，执行时可实时看 a、b、sum 变量值。

5.4 条件断点（高级）

只满足条件才暂停，适合循环、列表遍历

1. 行号右键 → Add conditional breakpoint
2. 输入条件：i === 5循环到 i=5 才停下，不用一步步点。

5.5 DOM 断点

监听元素被修改 / 删除 / 子节点变化自动断下Elements → 选中元素 → 右键 Break on →

• subtree modifications 子节点变化
• attribute modifications 属性变化
• node removal 元素移除

适合排查：元素莫名消失、样式被 JS 篡改。

---

六、Application 缓存与存储调试

6.1 查看本地存储

• LocalStorage / SessionStorage：查看、修改、删除存储数据
• Cookies：查看网站 cookie、Token
• Cache：查看静态资源缓存

6.2 清理缓存

调试前端缓存旧代码：Application → Storage → Clear storage 一键清除所有缓存。

---

七、前端高频 Bug 调试套路

1. 样式错乱 → Elements 看样式覆盖、盒模型
2. 接口报错 → Network XHR 看请求参数、响应结果
3. 逻辑不对 → Sources 断点一步步看变量
4. 本地缓存旧代码 → Application 清缓存 + Disable cache
5. JS 报错爆红 → Console 看报错堆栈、定位文件和行号
6. 元素莫名消失 → DOM 断点监听元素变化

---

八、全文总结

1. Elements：调试 HTML 结构、CSS 样式、排查样式覆盖和布局问题
2. Console：不止 log，支持表格、计时、分组、$0 快速操作 DOM
3. Network：抓包看接口请求参数、响应、404/403/500、跨域
4. Sources：断点调试、单步执行、条件断点、DOM 断点，专治逻辑 Bug
5. Application：管理 LocalStorage、Cookie、清理缓存

熟练掌握这套浏览器调试技巧，不用瞎猜、不用到处 console.log，任何前端 Bug 都能快速定位，开发效率直接翻倍。