适用人群

0–3 年前端开发经验，希望系统掌握 Chrome DevTools 调试能力、提升 JavaScript 问题排查效率的开发者。

学习目标

从“只会用 console.log 调试”到“能熟练运用断点、条件断点、代码段等专业调试手段，独立定位和解决 JavaScript 运行时问题”。

Sources（源代码）面板是 Chrome DevTools 中最核心的调试面板。它集文件浏览、代码编辑与 JavaScript 调试三大功能于一身，是前端开发者排查 JavaScript 问题的主战场。

本系列教程建立在Chrome DevTools 基础系列课程之上，聚焦于 Sources 面板的深入学习。它将带领你从面板的基本结构入手，逐步深入到断点调试、代码修改、性能分析等高级技巧，帮助你最终能够熟练运用 Sources 面板，解决日常开发中的各类调试难题。

以下是 Chrome DevTools Sources 面板的学习目录大纲，共分为四大部分，涵盖十个章节和终章总结与实战演练篇。

第一部分：认识 Sources 面板（第 1-2 章）

第 1 章：Sources 面板概览

学习目标：建立对 Sources 面板的整体认知，了解其三大核心组成部分及其协作关系。

Sources 面板是 Chrome DevTools 中专门用于查看、编辑和调试网页资源的核心工具。本章将带你认识 Sources 面板的整体面貌——它由文件导航区（File Navigator） 、代码编辑器（Code Editor） 和  JavaScript 调试区（JavaScript Debugging） 三大部分组成。你将了解每个区域的功能定位，以及它们如何协同工作，共同实现对 JavaScript 运行期的监控与调试。

学习建议：打开任意网页，按 F12 进入 Sources 面板，逐一观察三个区域的布局和内容，建立直观印象。

第 2 章：打开 Sources 面板

学习目标：掌握多种打开 Sources 面板的方式，能够根据不同场景选择最快捷的方法。

打开 Sources 面板有多种方式：

  • 命令菜单（推荐）：按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令菜单，输入 sources，选择 Show Sources panel。

  • 鼠标点击：DevTools 顶部标签栏直接点击 Sources 标签。

  • 菜单路径：DevTools 右上角菜单⋮→更多选项 → 更多工具 → 来源。

学习建议：重点掌握命令菜单的打开方式——它是最快的途径，也为你后续学习其他面板打下基础。

第二部分：文件查看与代码编辑（第 3-4 章）

第 3 章：查看文件——Page 标签页

学习目标：学会在 Page 标签页中浏览和定位页面加载的所有资源文件。

Sources 面板的 Page 标签页 以树形结构展示了页面加载的所有资源。其组织方式为：

  • 顶层（top） ：表示 HTML 主文档框架，每个页面都有。

  • 第二层：表示来源（origin），如 developers.google.com。

  • 第三层及以下：表示从该来源加载的目录和资源文件。

点击任意文件，即可在编辑器区域查看其内容——支持查看任何类型的文件，图片会显示预览。

学习建议：打开一个复杂页面，在 Page 标签页中逐层展开，观察资源的组织方式，尝试找到页面中的 JavaScript 文件和 CSS 文件。

第 4 章：编辑 CSS 与 JavaScript

学习目标：掌握在 Sources 面板中直接编辑代码并实时查看效果的能力。

Sources 面板的 编辑器（Editor） 允许你直接修改 CSS 和 JavaScript：

  • CSS 修改：修改后立即生效，无需刷新页面。

  • JavaScript 修改：修改后需按 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存，仅函数内部的修改会生效，因为 DevTools 不会重新运行整个脚本。

  • 错误提示：编辑器会自动在语法错误、无效的 @import 和 url() 等位置显示下划线和内联错误提示。

重要提醒：刷新页面后，所有在 DevTools 中做的 CSS 和 JavaScript 修改都会丢失。如需持久化修改，需要配置 Workspace（工作区）。

学习建议：找一个你熟悉的页面，尝试在 Sources 面板中修改一个元素的背景色和一段函数的返回值，体验即时编辑的效果。

第三部分：JavaScript 调试核心（第 5-8 章）

第 5 章：断点（Breakpoints）——调试的起点

学习目标：理解断点的概念，掌握设置、管理和使用断点的基本方法。

断点（Breakpoint）是调试器自动暂停 JavaScript 执行的位置。当代码暂停时，你可以检查变量、在控制台执行命令、单步跟踪代码。

设置断点的方法：

  • 行号断点：在编辑器左侧的行号上点击，出现蓝色标记即表示断点已设置。

  • 条件断点：在行号上右键单击，选择“Add conditional breakpoint”，输入条件表达式——只有当表达式为 true 时才会触发。

管理断点：

  • 右侧面板列出所有断点，点击可快速跳转。

  • 取消勾选可临时禁用断点。

  • 右键选择 Remove 可删除断点。

  • 再次点击断点可删除断点。

学习建议：在示例页面中设置几个断点，观察代码执行到断点处时页面的变化，感受“暂停”的效果。

第 6 章：调试器控制与单步执行

学习目标：掌握代码暂停后的调试控制方法，能够逐行跟踪代码执行。

当代码在断点处暂停后，调试区提供了完整的控制能力：

控制操作

快捷键（Win/Linux）

快捷键（Mac）

说明

暂停/继续

F8

F8

暂停脚本/继续执行直到下一个断点

单步执行

F9

依版本/工具栏而定

执行下一条语句

单步跳过

F10

F10

执行当前行，不进入函数内部

单步进入

F11

F11

执行当前行，进入函数内部

步出/跳出函数

Shift+F11

Shift+F11

执行完当前函数的剩余代码，跳出

Watch（监视） ：在右侧面板中添加表达式，DevTools 会在每一步执行后自动显示其当前值，是跟踪变量变化的利器。

Call Stack（调用栈） ：显示当前执行位置向上追溯的所有函数调用链，帮助你理解代码的执行路径。

学习建议：找一个包含函数调用的简单脚本，用不同的单步执行方式走一遍，观察每一步执行后变量值的变化。

第 7 章：debugger 命令与高级断点技巧

学习目标：掌握 debugger 命令的使用，以及日志点（Logpoint）等高级调试技巧。

debugger 命令：在代码中直接写入 debugger; 语句，当浏览器执行到这一行时，如果 DevTools 处于开启状态，会自动暂停。这比在 Sources 面板中手动设置断点更灵活——你可以在代码中精确控制暂停位置。

Logpoint（日志点） ：在行号上右键选择“Add logpoint”，输入表达式后，每当代码执行到该行，表达式的值会自动输出到控制台。与 console.log 不同，Logpoint 不需要修改源代码，且不会暂停代码执行。

学习建议：在你的项目中尝试用 debugger 命令替代部分 console.log，感受它带来的调试精度提升。

第 8 章：代码段（Snippets）——可复用的调试脚本

学习目标：学会创建和管理代码段，将常用的调试脚本保存下来随时复用。

代码段（Snippets） 是你可以保存并在任何页面上反复运行的 JavaScript 脚本。它类似于书签小程序（bookmarklet），但功能更强大。

Bookmarklet是保存在浏览器书签（收藏夹）里的 JavaScript 小程序。它的“网址”是以 javascript: 开头的。当你点击这个书签时，浏览器不会跳转页面，而是会把冒号后面的 JavaScript 代码注入到当前正在浏览的网页中并执行。

典型应用场景：假设你经常需要在控制台中输入一段代码来注入 jQuery 库，以便在控制台中使用 jQuery 命令。你可以将这段代码保存为一个代码段，以后只需点击几下按钮即可运行，无需重复输入。

DevTools 会将代码段保存到文件系统中，关闭浏览器后依然存在。

学习建议：创建一个用于快速注入常用库的代码段，或者创建一个用于提取页面特定数据的代码段，体验“一次编写，随时复用”的便利。

第四部分：进阶能力（第 9-10 章）

第 9 章：Workspace（工作区）——让修改持久化

学习目标：理解 Workspace 的作用，学会配置工作区以实现代码修改的持久化保存。

默认情况下，在 Sources 面板中修改代码后刷新页面，所有改动都会丢失。Workspace（工作区）解决了这个问题——它将 DevTools 中的修改直接保存到你本地文件系统中的源代码文件。

配置 Workspace 后，你在 Sources 面板中编辑 CSS 或 JavaScript，修改会自动同步到本地文件，真正实现“在浏览器中调试，在编辑器中保存”的无缝体验。

学习建议：当你需要频繁调整样式或调试复杂逻辑时，配置 Workspace 可以显著提升效率——建议在本地开发项目中尝试配置。

第 10 章：性能分析与黑盒脚本

学习目标：学会利用 Sources 面板的性能分析功能，排查复杂性能问题。

Sources 面板还集成了性能分析相关的能力：

  • 性能分析（Performance） ：在 Sources 面板中可以通过右侧的调试工具分析脚本的执行时间，定位性能瓶颈。

  • 黑盒脚本（Blackboxing） ：将第三方库或框架的脚本标记为“黑盒”，调试时会自动跳过这些文件中的代码，让你专注于自己的业务逻辑。

  • 调用栈分析：通过 Call Stack 面板分析函数调用链路，理解复杂代码的执行流程。

学习建议：当你在调试中频繁进入第三方库的代码时，学习使用黑盒脚本功能可以大幅提升调试效率。

第 11 章：终章总结与实战演练篇

学习目标：综合运用前 10 章所学的 Sources 面板技能，完成一个从问题发现到修复验证的完整调试流程。

这一章，我们用一个完整的实战案例，把前面十章的技能串起来。你会看到一个真实的调试场景：一个待办事项应用，有逻辑错误、有性能问题、有第三方库干扰。我们会一步步排查，每一步都用到不同的 Sources 面板技能。

总结

本系列教程系统介绍了 Chrome DevTools Sources 面板的核心功能，帮助你从"会用 console.log"进阶到"熟练运用断点、单步执行、代码片段、Workspace 等专业调试手段"。学完本系列教程后，你将能够独立定位并解决 JavaScript 的逻辑错误、性能瓶颈与运行时异常，也懂得将调试修改持久化到本地源码，最终提升日常开发与问题排查效率。