第1章 1.2 浏览器与开发者工具

上一章我们聊了 JavaScript 的「前世今生」——从网景公司的一个小项目，怎么一路逆袭成互联网的「水电煤」。你知道了 JavaScript 诞生于 1995 年，和 Java 其实没啥血缘关系（就是名字蹭热度），也了解了它现在能在浏览器、手机、电脑、甚至航天飞机上跑。

但是！知道历史有个屁用啊——你总得会动手写代码才行吧？

好，这一章我们就来解决一个灵魂拷问：

「我的代码写完后，跑在哪儿？怎么看它到底跑没跑？跑得对不对？」

🎯 开场 3 分钟：为什么要学这个？

你有没有遇到过这种情况：

• 照着教程敲了一段代码，刷新浏览器——啥都没发生，也不知道哪里错了
• 想看看网页上的数据到底长啥样，只能右键「查看网页源代码」——好家伙，满屏乱码根本看不懂
• 听说「断点调试」很厉害，但你打开开发者工具瞄了一眼——全是英文，一堆面板，不知道从哪下手

这就是今天要解决的问题。

学完这一章，你能：
1. 打开浏览器的「开发者工具」，看懂它的基本布局
2. 用 C\n\n\n\n\n\nonsole（控制台） 直接跑代码、打印变量、调试逻辑
3. 用 Sources（源代码） 面板打个断点，一行一行看代码怎么执行的
4. 用 Network（网络） 面板观察网页是怎么请求数据的

🧱 基础 25 分钟：核心概念

什么是浏览器开发者工具？

生活类比：

想象你去餐厅吃饭，菜端上来不对味。你跟服务员说「这菜有问题」，服务员能进厨房查看——哪里盐放多了、哪道工序搞错了，全都一目了然。

开发者工具就是浏览器的「厨房监控」——你能看到网页「后厨」里，HTML 怎么拼的、CSS 怎么画的、JavaScript 代码一行一行怎么跑的。

怎么打开？

也可以右键页面 → 「检查」/「Inspect」

打开后，你会看到这样一个界面（以 Chrome 为例）：

Console（控制台）—— 你的代码「练兵场」

Console 是开发者工具里最最最常用的面板，没有之一。

你可以把它理解成一个可以直接执行 JavaScript 的黑框框——你敲一行，它就执行一行，立刻给你结果。

怎么用？

按 Cmd + Option + J（Mac）或 Ctrl + Shift + J（Windows）可以直接打开 Console 面板。

或者在开发者工具里点「Console」标签页。

来看个例子——在 Console 里直接算数学：

> 1 + 1
< 2

你输入 1 + 1，按回车，下面就输出 2。这有啥稀奇的？——好，问题来了，它能做的可不止算数学。

打印变量：

> let name = "小明"
< undefined
> console.log(name)
< "小明"

注意：let name = "小明" 后面返回的是 undefined（因为赋值语句本身没有返回值），但 console.log(name) 打印出了 "小明"。

来点正经的——用 Console 验证你的代码逻辑：

> let age = 18
< undefined
> if (age >= 18) {
...   console.log("成年人")
... } else {
...   console.log("未成年")
... }
< "成年人"

这就是 Console 的核心用法：你想验证什么，直接敲进去看结果，不用刷新页面、不用写 HTML 文件。

Elements（元素）面板 —— 看网页的「骨架」

Elements 面板用来查看和编辑页面的 HTML 和 CSS。

想象你买了一个宜家家具，发现有块板子装错了——你可以打开「元素」面板，直接看到所有「板子」（HTML 标签）是怎么拼起来的，还能临时修改「颜色」「尺寸」（CSS）看效果。

举个例子：

1. 打开任意网页
2. 按 Cmd + Option + I 打开开发者工具
3. 点左上角的「箭头图标」或按 Cmd + Shift + C
4. 鼠标移动到页面任意位置，下面的 Elements 面板就会高亮对应的 HTML 元素

<!-- 假设你鼠标悬停在一个按钮上 -->
<button class="btn-primary">点我</button>

点开后还能看到它的 CSS：

.btn-primary {
background-color: blue;  /* 背景是蓝色 */
color: white;           /* 文字是白色 */
padding: 10px 20px;     /* 内边距 */
}

你可以双击 CSS 值临时修改，立刻看到效果——比如把 blue 改成 red，按钮颜色就变了。刷新页面就恢复原样，这是临时的。

Sources（源代码）面板 —— 代码的「慢动作回放」

Sources 面板是断点调试的主战场。

断点（Breakpoint）是什么？

生活类比：

想象你在看球赛，突然说「等等，回放一下刚才那个进球」——裁判就倒回去，从那个关键动作开始一帧一帧看。

断点就是这个「回放」功能——你让代码在某个地方「暂停」，然后一行一行往下走，看每行代码执行后变量变成了什么。

怎么打断点？

1. 打开 Sources 面板
2. 在左侧文件树找到你的 JS 文件（或者在 Console 里输入代码触发）
3. 点击行号，就会出现一个蓝色标记——这就是断点

let total = 0;

for (let i = 1; i <= 5; i++) {
total = total + i;  // ← 在这一行打断点
console.log("当前 i:", i, "当前 total:", total);
}

console.log("最终结果:", total);

代码运行到 total = total + i 这行时会暂停，你可以在右侧看到：
- i 的当前值
- total 的当前值
- 调用栈（怎么走到这儿的）

按「继续」按钮（▶️）或 F8 继续执行到下一个断点。

Network（网络）面板 —— 观察网页的「快递单」

Network 面板记录了页面向服务器发的所有「请求」。

生活类比：

你在网上下单后，会有一堆快递在跑——Network 面板就是你的「快递追踪器」，每个请求什么时候发的、带了什么东西、服务器回了什么，全都记录在案。

有什么用？

• 看网页加载时请求了哪些文件（HTML、CSS、JS、图片）
• 看 AJAX/Fetch 请求返回了什么数据（API 调用）
• 分析请求耗时，优化网页性能

举个例子：

打开 Network 面板，刷新一个新闻网站，你会看到一堆条目：

点击其中一条，还能看到详情：
- Headers：请求头、响应头
- Payload：发送的数据
- Response：服务器返回的内容
- Timing：各个阶段的耗时

🔥 实战 35 分钟：3 个递进的小项目

项目 1：Console 里的计算器（5 分钟）

目标：学会用 Console 直接做数学运算

1. 打开浏览器，进入任意网页
2. 按 Cmd + Option + J 打开 Console
3. 敲以下代码：

// 小明的购物清单计算总价
let 鸡蛋 = 5.5;
let 面包 = 12.8;
let 牛奶 = 3.2;

let 总价 = 鸡蛋 + 面包 + 牛奶;
console.log("小明的购物清单总价是：", 总价, "元");

// 如果超市打 8 折
let 折后价 = 总价 * 0.8;
console.log("打 8 折后只需要：", 折后价.toFixed(2), "元");

预期输出：

小明的购物清单总价是： 21.5 元
打 8 折后只需要： 17.20 元

解释：.toFixed(2) 是把数字保留 2 位小数的方法，不然会显示 17.2 而不是 17.20。

项目 2：用 Elements 面板修改网页样式（10 分钟）

目标：学会用开发者工具实时修改页面样式

1. 打开任意新闻网站（比如 https://news.ycombinator.com）
2. 按 F12 打开开发者工具
3. 点左上角的「检查元素」按钮（箭头图标）
4. 鼠标点击页面上的某个标题文字
5. 在右侧 Styles 面板找到 color 属性，双击值改成 red
6. 找 font-size，改成 24px

你会看到文字立刻变大变红。刷新页面，一切恢复原样——因为你改的是「运行时」的状态，不是源文件。

完整操作流程：

// 在 Console 里也可以用 JS 临时修改页面
document.body.style.backgroundColor = "#f0f0f0";
// 把页面背景改成浅灰色

项目 3：断点调试「小明的成绩单」（20 分钟）

目标：学会用 Sources 面板打断点，一行一行看代码执行

场景：小明有 5 门考试成绩，要算总分和平均分，用断点看看每一步发生了什么。

完整代码：

// 小明的成绩单
let scores = [85, 92, 78, 96, 88];

let total = 0;
for (let i = 0; i < scores.length; i++) {
// === 在这行打断点 ===
total = total + scores[i];
}

let average = total / scores.length;

console.log("总分:", total);
console.log("平均分:", average.toFixed(1));

// 判断等级
if (average >= 90) {
console.log("等级: A");
} else if (average >= 80) {
console.log("等级: B");
} else {
console.log("等级: C");
}

断点调试步骤：

1. 把以上代码保存为 HTML 文件，用浏览器打开
2. 在 Sources 面板找到这个文件
3. 在 total = total + scores[i]; 这行点一下，打断点（出现蓝色标记）
4. 刷新页面，代码会在断点处暂停
5. 看右侧 Scope（作用域）面板，i 和 total 当前是多少
6. 按 F10（或点击「Step over」按钮）单步执行，看 total 怎么变化的
7. 按 F8（或「Resume」）继续执行到下一个断点

预期输出：

总分: 439
平均分: 87.8
等级: B

加一个需求：如果平均分 >= 90 显示「A」，但在断点里你发现 average 是 87.8，怎么判断哪行出了问题？

用断点就能一眼看出来：total 累加到 439，除以 5 得到 87.8，所以是成绩不够 90，不是代码写错了。

💪 进阶 20 分钟：常见坑 + 性能小贴士

坑 1：Console 里的 console.log 打印对象

// ❌ 错误示范：打印对象后再修改
let user = { name: "小明", age: 18 };
console.log(user);
user.age = 20;
console.log(user);  // 两次打印都是 { name: "小明", age: 20 }

问题：Chrome 的 Console 会引用对象，不是快照。所以你第一次打印后修改了对象，再打开控制台输出，发现两次都一样。

// ✅ 正确做法：打印时用 JSON 快照
let user = { name: "小明", age: 18 };
console.log(JSON.parse(JSON.stringify(user)));  // 快照
user.age = 20;
console.log(user);  // 原对象

坑 2：Sources 面板找不到文件？

// ❌ 报错：SourceMap 错误，找不到 .map 文件
DevTools failed to load source map: Could not load content for...

这通常是因为：
1. 你用的是压缩过的 JS 文件（生产环境）
2. SourceMap 文件没生成或被删了

✅ 解决方法：在 Network 面板勾选「Search」来搜索源码，或者切换到 Readable 模式。

坑 3：Network 面板看不到请求？

// ❌ 常见问题：请求被缓存了，看不到实时请求
// 或者请求是 XHR/Fetch，但 Network 没勾选相应选项

✅ 解决方法：
1. 在 Network 面板顶部勾选「Fetch/XHR」筛选器
2. 勾选「Disable cache」禁用缓存
3. 刷新页面

坑 4：打断点打在循环里太卡？

// ❌ 错误示范：在循环内部打断点，每次迭代都停一下，很慢
for (let i = 0; i < 10000; i++) {
total += i;  // 断点设在这里会疯掉
}

✅ 正确做法：在循环外打断点，等进入循环后，用「条件断点」只在满足条件时停：

// 右键断点 → Edit breakpoint → 输入条件：i === 5000
// 这样只在 i 等于 5000 时才停
for (let i = 0; i < 10000; i++) {
total += i;
}

坑 5：Elements 面板改了不生效？

// ❌ 错误操作：在 Elements 面板改了 HTML，刷新后没了
// 或者改了 JS 变量，刷新页面又恢复

✅ 记住：Elements 面板的修改是临时的，只影响当前会话。刷新页面就恢复。

调试技巧：console.log 之外的选择

// 除了 console.log，这些也很有用
console.table([{name: "小明", score: 85}, {name: "小红", score: 92}]);
// 用表格形式打印数组对象

console.warn("注意：这个功能在旧版浏览器不支持");
// 黄色警告提示

console.error("请求失败了，错误码：404");
// 红色错误提示

console.time("耗时");  // 开始计时
// ... 你的代码 ...
console.timeEnd("耗时");  // 结束时打印耗时

✏️ 练习题 + 作业题

练习 1（2 分钟）：Console 初体验

• 输入：在 Console 里输入 10 * 5 + 3
• 预期输出：53
• 提示：直接敲数学表达式就行

练习 2（2 分钟）：加个判断

• 输入：在 Console 里判断 18 >= 18
• 预期输出：true
• 提示：JavaScript 里 >= 会返回布尔值

练习 3（5 分钟）：修改成绩

• 输入：把项目 3 的成绩 [85, 92, 78, 96, 88] 改成 [90, 95, 88, 100, 92]
• 预期输出：总分 465，平均分 93.0，等级 A
• 提示：直接在代码里改数字，用断点验证结果

练习 4（5 分钟）：Network 抓请求

• 输入：打开 Network 面板，刷新一个有登录功能的网站，找一个 POST 请求
• 预期输出：找到请求，看 Headers → Form Data 或 Payload 里发送的用户名密码字段
• 提示：登录后会在 Network 里留下 POST 记录

练习 5（5 分钟）：读懂报错

• 输入：在 Console 里输入 console.log(未定义的变量)
• 预期输出：ReferenceError: 未定义的变量 is not defined
• 提示：这个报错说的是「这个变量根本没声明过」，去 Sources 里加个 let 声明

作业：做一个「Console 小算盘」

需求描述：写一个 HTML 文件，打开后在 Console 里能运行一个「命令行计算器」

功能点：
1. 定义 add(a, b) 函数，返回两数之和
2. 定义 subtract(a, b) 函数，返回两数之差
3. 定义 multiply(a, b) 函数，返回两数之积
4. 定义 divide(a, b) 函数，返回两数之商（除以 0 时返回 Infinity）

加分项：
1. 再加一个 average(...nums) 函数，接受任意多个参数返回平均数
2. 在 Console 里调用你的函数，验证 add(10, 5) 返回 15

验收标准：
- 打开 HTML 文件不报错
- Console 里输入 add(10, 5) 显示 15
- 代码有适当注释

提交方式：把代码贴在评论区，或者扔 GitHub 贴链接

📚 总结 + 资源

这一章我们学了 3 个核心点：

1. 开发者工具是浏览器的「后厨监控」，能实时看到代码怎么跑的
2. Console 是练兵场，想验证什么直接敲进去，不用写文件
3. Sources 断点调试是神器，能让代码「慢动作回放」，一行一行看清楚

延伸学习资源：

1. Chrome DevTools 官方文档（英文，但最权威）
2. MDN Web Docs - 开发者工具（中文，入门友好）
3. 视频教程：B 站搜索「Chrome DevTools 教程」，跟着做一遍

互动钩子：

你在调试代码时，最常用开发者工具的哪个功能？Console？断点？还是 Network？评论区聊聊你是怎么用的，老粉优先回复！

📢 下章剧透：学会了看代码跑在哪，接下来就要真正「写」代码了。下一章我们会聊一个超级重要的概念——变量。什么是 let/const/var？它们有啥区别？「作用域」又是啥？小明去便利店买辣条能帮你理解……