📝 课前小测

题目：在Chrome浏览器中，打开开发者工具的快捷键是？

A. Ctrl + S B. Alt + Tab C. F12 或 Ctrl + Shift + I D. Ctrl + P

（答案在文章末尾～）

3第2篇：浏览器开发者工具——Chrome DevTools

💡 学习目标：掌握 Chrome DevTools 的核心面板，学会用 Console 调试 JavaScript，理解网页的”内部构造”。

一、什么是开发者工具？

做前端开发时，经常需要知道：

• 这个文字是什么 HTML 标签？为什么样式没生效？

• JavaScript 报错了，错误在哪一行？

• 网页加载了一个图片，它从哪个地址加载的？

这些问题的答案，都藏在浏览器的开发者工具（DevTools）里。

几乎所有现代浏览器都内置了开发者工具，其中 Chrome DevTools 功能最全面、使用最广泛，是前端工程师每天都会用到的工具。

二、打开DevTools的三种方式

方式一：快捷键（最常用）

按 F12 打开。或者 Ctrl + Shift + I（I 是 Inspection 的首字母）。

方式二：右键菜单（最直接）

在网页任意位置右键 → 选择”检查”，浏览器自动跳转到该元素在 HTML 中的位置。

方式三：通过Chrome菜单

点击右上角 ⋮ → 更多工具 → 开发者工具

三、Elements面板：查看和修改HTML/CSS

Elements 面板分左右两栏：

┌─────────────┬─────────────────────────────┐
│  HTML结构   │  选中元素的CSS样式          │
│             │                             │
│  
     │  .card {                    │
│    
标题 │    width: 400px;          │
│    内容  │    color: #333;  ← 可以双击│
│  
    │  }                          │
└─────────────┴─────────────────────────────┘

💡 实时修改样式（不需要改代码）

在右侧 CSS 面板中，双击任意数值（比如 16px），改成 24px，按回车——网页上这个元素的文字大小立即变大。刷新页面后恢复，因为修改的是浏览器内存中的数据，不是源代码。

这个功能用来调试样式特别方便，可以反复调整参数直到效果满意，再去改源代码。

💡 快速定位元素

点击面板左上角的 🔍 选择元素 图标（或者按 Ctrl + Shift + C），然后把鼠标移到网页上点击，DevTools 会自动跳转到对应 HTML 代码位置。

四、Console面板：JavaScript控制台

Console（控制台）是 JavaScript 的”实验田”——可以直接写代码、立即看到结果。

🔬 实验1：输出各种信息

打开 Console 面板（在工具栏点 Console 标签），在底部输入框输入：

console.log("你好，Console！");
console.log(2026);
console.log(true);

按回车，屏幕下方依次显示：

你好，Console！
2026
true

🔬 实验2：变量操作

在 Console 里直接输入变量名，可以查看变量的值：

let name = "小明";
let age = 18;
name
// "小明"
age
// 18
2026 - age
// 2008

🔬 实验3：修改网页内容（仅本地测试用）

在 Console 里输入：

document.body.innerHTML = "
网页被我改了！
";

网页内容瞬间改变。这只是修改了浏览器显示，刷新页面后恢复。

⚠️ 警告：不要在正式网站上执行这个操作！这是纯本地调试技巧。

🔬 实验4：常见Console命令

// 普通信息
console.log("普通信息");

// 警告（黄色）
console.warn("警告信息");

// 错误（红色）
console.error("错误信息");

// 表格形式输出（数组、对象特别有用）
console.table([
  { 姓名: "苹果", 颜色: "红色" },
  { 姓名: "香蕉", 颜色: "黄色" }
]);

// 输出对象（点击可以展开查看详情）
console.log({ 姓名: "小明", 年龄: 18, 城市: "北京" });

五、Sources面板：查看和调试JS源代码

Sources 面板可以查看网页加载的所有 JavaScript 文件，并设置断点来逐步执行代码，观察每一步变量的变化。

什么是断点？

断点就像程序里的”暂停键”——代码执行到断点那一行时会自动停下来，方便你查看此时各个变量的值，找出哪里出了问题。

设置断点的方法：

1. 在 Sources 面板打开一个 JS 文件

2. 点击代码行号左侧，会出现一个蓝色标记，这就是断点

3. 触发这段代码执行，浏览器会自动停在断点处

调试面板按钮说明：

六、Network面板：查看网络请求

Network 面板记录了网页发出的所有网络请求——HTML、CSS、JavaScript、图片、字体、API 请求等。

刷新页面观察请求列表

1. 打开 Network 面板

2. 按 `F5` 刷新页面

3. 会看到密密麻麻的请求记录，每一行代表一个文件请求

认识请求列表的列：

七、本篇总结

✅ DevTools 打开方式：F12 / Ctrl+Shift+I / 右键"检查"
✅ Elements 面板：查看HTML结构和CSS样式，双击数值可实时调试
✅ Console 面板：JavaScript实验田，console.log()输出调试信息
✅ Sources 面板：设置断点逐步调试JavaScript
✅ Network 面板：查看所有网络请求的详情

本篇新学命令：

*下篇预告：版本控制第一步——Git与GitHub，学会管理代码历史记录，不再担心改错代码！*

📝 学完了，来检验一下成果吧！

1. 打开Chrome开发者工具的三种方式中，哪个需要按两个快捷键？

A. 直接按 F12 B. Ctrl + Shift + I C. 右键选择”检查” D. 点击Chrome菜单

2. 在Console面板中，console.table() 最适合用于输出哪种数据？

A. 长篇文本内容 B. 数字和计算结果 C. 数组或对象（以表格形式清晰展示） D. 错误信息

3. 在Elements面板中双击CSS数值并修改后，刷新页面会怎样？

A. 修改被保留，因为已经写入源代码 B. 修改被保留，因为浏览器的缓存机制 C. 修改消失，因为修改的是浏览器内存，不是源代码 D. 浏览器会报错

答案：C, B, C

解析：

1. `F12` 是一个键，`Ctrl + Shift + I` 是两个键的组合，`右键→检查”` 需要鼠标操作。 三种方式都可以打开 DevTools，其中快捷键是开发者最常用的方式。

2. `console.table()` 会把数组或对象以整整齐齐的表格形式展示出来，特别适合查看有多条记录的数据（如学生成绩列表、商品信息等）。`console.log()` 更通用适合任何数据，`console.warn` 和 `console.error` 分别用于警告和错误级别。

3. DevTools 中的样式修改是”即时生效”的，但只在浏览器内存里，刷新页面后恢复。这正是 DevTools 的设计用意——让你放心调试，不用担心改坏源代码。确认效果满意后，再去源代码里改。