Chrome DevTools Sources 面板系列课程第1章
如果你已学完前面Chrome DevTools 基础系列内容，相信现在的你对它的整体面貌已有了清晰的认识——打开、自定义，乃至用命令菜单快速跳转，都不在话下。
但你可能也注意到了一个问题：前面的章节更像是一张“全景地图”，带你浏览了 DevTools 的每一块区域。而真正深入某个具体功能的探索，才刚刚开始。
在所有 DevTools 的面板中，有一个面板几乎可以说是前端开发者最常驻留的地方——它就是 Sources（源代码）面板。
为什么是它？
因为前端开发的核心工作，说到底就是三件事：写代码、看代码、调代码。而 Sources 面板正好把这三件事融合在了一起——你可以在这里查看页面加载的所有资源文件，可以直接在浏览器里编辑 CSS 和 JavaScript 并实时看到效果，更重要的是，你可以在这里对 JavaScript 进行逐行调试，像侦探一样一步步追踪代码的执行过程。
如果说 DevTools 是一套工具箱，那 Sources 面板就是工具箱里那把最常用、最核心的扳手。
这一章，我们先从整体上认识 Sources 面板——它长什么样、由哪几部分组成、每部分负责什么。后面的章节会逐一深入每个功能模块。
小提示：这一章是“认识篇”，目的是建立整体印象。建议你打开 Chrome 浏览器，按 F12 切换到 Sources 面板，一边读一边对照着看。
一、Sources 面板是什么？
用一句话概括：Sources 面板是 Chrome DevTools 中用于查看、编辑和调试网页资源的核心工具。
资源”这个词在这里涵盖的范围很广——包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片，以及页面加载的其他任何文件。
但 Sources 面板不只是一个“文件查看器”。它的真正威力在于交互：
查看：你可以浏览页面加载的所有资源，点开任意文件查看源码。
编辑：你可以直接在浏览器里修改 CSS 和 JavaScript，改动会实时(css)生效。
调试：你可以在 JavaScript 代码中设置断点，让代码在特定位置暂停，然后逐行执行、观察变量变化。
这三个功能——查看、编辑、调试——共同构成了 Sources 面板的三大支柱。
二、如何打开 Sources 面板？
打开 Sources 面板有多种方式，我们重点推荐最快捷的一种：
通过命令菜单（推荐）：
打开 DevTools（按 F12或 Ctrl/Cmd + Shift + I）。
按 Ctrl + Shift + P（Windows/Linux）或 Command + Shift + P（Mac）打开命令菜单。
输入 sources，选择 Show Sources panel，按回车。
通过鼠标点击：
直接点击 DevTools 顶部的 Sources 标签页。
或者点击右上角“更多选项”（⋮）→ 更多工具 → 来源。
小建议：命令菜单的方式最快，也最符合“键盘驱动”的高效操作习惯。如果你已经习惯了用 Ctrl/Cmd + Shift + P 调出命令菜单，那打开 Sources 面板也就是输入几个字母的事。
三、Sources 面板的三大组成部分
当你第一次打开 Sources 面板时，可能会觉得信息有点多——左侧有文件列表，中间是代码，右侧还有一些面板。但别担心，它的结构其实非常清晰。
Sources 面板由三个核心区域组成：
┌────────────────────────────────┐
│ Sources 面板 │
├────────┬──────────────┬────────┤
│ ① │ ② │ ③ │
│ 文件导航区 │ 代码编辑器 │ JavaScript │
│ (File │ (Code Editor) │ 调试区 │
│ Navigator) │ │ (JavaScript │
│ │ │ Debugging) │
├────────┴──────────────┴────────┤
│ ④ 底部抽屉（按 Esc 可打开/关闭，控制台等工具） │
└────────────────────────────────┘下面我们逐一来看每个区域的功能。
① 文件导航区（File Navigator）
文件导航区位于 Sources 面板的左侧，它以树形结构列出了当前页面加载的所有资源文件。
点击 Page 标签页，你可以看到所有文件的组织方式：
顶层（top）：表示 HTML 主文档框架。你访问的每个页面都会有这个顶层节点。
第二层：表示来源（origin），比如 developers.google.com。
第三层及以下：表示从该来源加载的目录和资源文件。
你可以把它理解为一个“浏览器视角的项目文件树”——它展示的不是你电脑硬盘上的文件，而是浏览器从网络加载到内存中的所有资源。
点击任意文件，它的内容就会在中间的代码编辑区显示出来。即使是图片文件，也会显示预览。
② 代码编辑器（Code Editor）
代码编辑器位于 Sources 面板的中间，是文件导航区的“搭档”——你在左侧点击哪个文件，它的源码就会在这里显示。
这个编辑器并不仅仅是用来“看”代码的，它还支持直接修改：
修改 CSS：改完立即生效，不需要刷新页面。
修改 JavaScript：改完后按 Ctrl+S（Windows/Linux）或 Command+S（Mac）保存，修改会生效。
编辑器还会自动帮你发现代码中的问题——语法错误、无效的 CSS @import 语句、包含无效 URL 的 HTML href 属性等，都会在编辑器中用下划线和内嵌提示标记出来。
小建议：把 Sources 面板的编辑器想象成一个“轻量级的 IDE”。虽然它不能完全替代 VS Code 这样的专业编辑器，但在调试过程中，它能让你快速验证想法，而不用反复切换窗口。
③ JavaScript 调试区（JavaScript Debugging）
JavaScript 调试区位于 Sources 面板的右侧，这是整个 Sources 面板中最核心、最强大的部分。
它包含了调试 JavaScript 所需的各种工具：
Watch（监视）：添加你关心的变量或表达式，调试器会在每一步执行后自动显示它们的当前值。
Breakpoints（断点） ：列出你设置的所有断点，可以快速跳转、临时禁用或删除。
Call Stack（调用栈） ：显示当前执行位置向上追溯的所有函数调用链。
Scope（作用域） ：显示当前作用域中的所有变量及其值。
这些工具会在你设置断点、代码暂停执行时发挥巨大作用。后面的章节我们会逐一深入讲解。
④ 底部抽屉（按 Esc 打开）
在 Sources 面板中按 Esc 键，底部会弹出一个抽屉（Drawer） ，里面可以容纳控制台（Console）等工具。
这个设计非常贴心——当你调试代码时，经常需要一边看源码一边在控制台执行命令。有了底部抽屉，你就不用来回切换面板了：上面看代码、下面敲命令，互不干扰。
小建议：养成按 Esc 打开/关闭底部抽屉的习惯。调试时在控制台里查看变量、执行测试代码，会比切换到 Console 面板再切回来流畅得多。
四、一个完整的例子：理解三部分如何协同工作
光看文字描述可能还不够直观。让我们用一个具体的例子，看看这三个区域是如何协同工作的。
第一步：找到文件
在左侧的文件导航区的 Page 标签页中，展开目录树，找到对应的 JavaScript 文件（比如 main.js），点击它。
第二步：查看代码
文件内容显示在中间的代码编辑器中。你浏览代码，找到了按钮点击事件的处理函数。
第三步：设置断点并调试
在代码编辑器中，点击某一行代码的行号，设置一个断点（会出现一个蓝色标记）。然后在页面上点击按钮——代码执行到断点处时会自动暂停。
此时，右侧的 JavaScript 调试区 开始发挥作用：
Call Stack 告诉你当前函数是从哪里被调用的。
Scope 显示当前所有变量的值。
Watch 可以让你追踪特定表达式的变化。
你还可以按 F10（或 F9） 单步执行代码，观察每一行执行后发生了什么。
整个过程——从找到文件、查看代码，到设置断点、逐步调试——全部在 Sources 面板中完成，不需要切换到任何其他面板。
五、Sources 面板能帮你做什么？
总结一下，Sources 面板的核心能力可以归纳为四个方面：
1. 查看文件
在 Page 标签页中浏览页面加载的所有资源——HTML、CSS、JavaScript、图片等。点击即可查看源码或预览。
2. 编辑 CSS 和 JavaScript
直接在浏览器中修改代码，实时看到效果。CSS 修改立即生效，JavaScript 修改保存后生效。
3. 调试 JavaScript
通过设置断点、单步执行、监视变量等方式，深入排查 JavaScript 的逻辑问题。这是 Sources 面板最核心、最不可替代的功能。
4. 创建和运行代码段（Snippets）
将常用的调试脚本保存为代码段，随时在任意页面上运行。比如，你可以保存一段注入 jQuery 的代码，以后在任何页面上点两下按钮就能运行。
小建议：代码段是一个经常被忽视但非常实用的功能。如果你发现自己经常在控制台里反复输入同一段代码，不妨把它保存为代码段。
六、重要提醒：修改会丢失
在使用 Sources 面板编辑代码时，有一个非常重要的行为需要了解：
当你刷新页面时，DevTools 会清除你在 Sources 面板中做的所有 CSS 和 JavaScript 修改。
也就是说，你在浏览器里改的代码，只是改了内存中的版本。刷新页面后，浏览器会重新从服务器加载原始文件，你之前的所有修改就消失了。
如果你想把这些修改保存到本地文件系统中，需要配置 Workspace（工作区） ——我们会在后面的章节中详细讲解。
七、一个简单的代码示例
让我们通过一个简单的例子，感受一下 Sources 面板的基本操作。
假设你有这样一个 HTML 页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sources 面板示例</title>
</head>
<body>
<button id="btn">点击我</button>
<p id="output">等待点击...</p>
<script>
function greet(name) {
return '你好，' + name + '！';
}
document.getElementById('btn').addEventListener('click', function() {
const message = greet('开发者');
document.getElementById('output').textContent = message;
});
</script>
</body>
</html>在 Sources 面板中，你可以这样做：
查看文件：在 Page 标签页中找到这个 HTML 文件（或内联脚本），点击查看源码。
设置断点：在 const message = greet('开发者'); 这一行的行号上点击，设置一个断点。
触发断点：点击页面上的按钮，代码会在断点处暂停。
检查变量：在右侧的 Scope 面板中，查看当前作用域中的变量值。
单步执行：按 F10 进入 greet 函数内部，观察返回值。
继续执行：按 F8 让代码继续运行，页面上会显示“你好，开发者！”。
这就是 Sources 面板最基础的调试流程。后面的章节会带你深入每一个步骤的细节。
建议：使用临时起一个静态服务（不写代码、不装依赖）来进行测试。
进到项目目录后：
# serve（Vercel 出品，默认 3000，推荐） npx serve . npx serve ./dist -p 3000 # 指定端口 npx serve . -s # SPA：未知路由回退 index.html npx serve . -l 0.0.0.0:3000 # 允许局域网/手机访问 # http-server（默认 8080） npx http-server . -p 8080 -c-1 -o # -c-1 禁缓存，-o 自动开浏览器 npx http-server . --cors -a 0.0.0.0 # live-server（带热刷新，默认 8080） npx live-server . --port=3000 --no-browser
总结
在这一章中，我们认识了 Sources 面板的整体面貌：
它是什么：Chrome DevTools 中用于查看、编辑和调试网页资源的核心工具。
怎么打开：通过命令菜单（Ctrl/Cmd + Shift + P → 输入 sources）或直接点击标签页。
三大组成部分：
文件导航区（左侧） ：以树形结构展示页面加载的所有资源。
代码编辑器（中间） ：查看和编辑源码，支持实时修改 CSS 和 JavaScript。
JavaScript 调试区（右侧） ：包含 Watch、Breakpoints、Call Stack 等调试工具。
底部抽屉：按 Esc 打开，可容纳控制台等工具。
四大核心能力：查看文件、编辑 CSS/JS、调试 JavaScript、创建代码段。
重要提醒：刷新页面后，在 Sources 面板中做的所有修改都会丢失。
Sources 面板是前端开发者调试 JavaScript 的主战场。它把“看代码、改代码、调代码”三件事整合在同一个界面中，让你不需要在多个工具之间来回切换。
从下一章开始，我们将深入 Sources 面板的每一个功能模块——从如何打开它，到如何设置断点、如何单步执行、如何创建代码段——一步步带你成为 Sources 面板的熟练使用者。
下一章预告：我们将学习打开 Sources 面板的多种方式，并了解 Page 标签页中文件的组织逻辑——让你能快速找到想要查看的文件。
本章练习
打开任意一个你熟悉的网页，按 F12 进入 DevTools，然后切换到 Sources 面板。观察它的三个主要区域分别显示了什么内容。
在 Sources 面板的左侧文件导航区中，展开 Page 标签页的目录树，找到当前页面的 HTML 文件和至少一个 JavaScript 文件。点击它们，观察中间编辑器区域的变化。
在编辑器区域找到一个 JavaScript 函数，在函数内部的某一行行号上点击一下——你会看到一个蓝色的断点标记出现。然后在右侧的 Breakpoints 面板中，你应该能看到这个断点已经被记录了。
按 Esc 键打开底部抽屉，观察控制台出现在底部。再按一次 Esc，抽屉关闭。
找一个包含按钮交互的页面，在按钮的点击事件处理函数中设置一个断点，然后点击按钮，观察代码在断点处暂停时右侧调试区的变化。
