前面几章，我们深入学习了断点调试的各种技巧——行断点、条件断点、日志点、debugger 命令……你现在已经能在 Sources 面板中熟练地排查各种 JavaScript 问题了。
但调试过程中，你是不是还遇到过这样的场景：
你需要在控制台中反复输入同一段代码，比如注入 jQuery 库、提取页面数据、或者清除 localStorage。
你写了一段调试用的脚本，关掉 DevTools 之后就没有了，下次要用又得重新写。
你在一个页面上测试了一段代码，想在其他页面上也用，但得重新输入一遍。
这些小场景看似不起眼，但累积起来非常消耗时间。
代码段（Snippets） 就是用来解决这个问题的。
代码段是你在 Sources 面板中创建、保存、随时复用的 JavaScript 脚本。它们就像“放在浏览器里的工具箱”——把你常用的代码片段存进去，任何时候、任何页面，点几下就能运行。
这一章，我们来学习代码段的完整用法：从创建、编辑到运行，从管理到实际应用场景。
小提示：这一章的内容偏“工具型”。建议你打开 DevTools，跟着文章创建一个自己的代码段，亲手体验一下“一次编写，随时复用”的便利。
一、什么是代码段（Snippets）？
用一句话概括：代码段是你在 DevTools 中创建并保存的 JavaScript 脚本，可以在任何页面上随时运行。
官方文档对代码段的定位非常清晰：“如果你发现自己反复在控制台中输入相同的代码，不妨考虑把它保存为一个代码段。”
代码段的核心特点
特点一：可复用
代码段保存在 DevTools 中，关掉浏览器再打开，它还在。你创建一次，就可以在任何页面上反复使用——不需要重新输入，不需要从别处复制粘贴。
特点二：可访问页面上下文
代码段可以访问当前页面的 JavaScript 上下文——也就是说，你在代码段里写的代码，和在控制台里直接输入的代码，效果是一样的。你可以操作 DOM、调用页面上的函数、读取和修改变量。
特点三：可调试
代码段支持完整的调试功能——你可以在代码段中设置断点、单步执行、查看 Scope 和 Watch。它就像你项目里的普通 JavaScript 文件一样，可以在 Sources 面板中完整地调试。
特点四：持久化存储
DevTools 会将代码段保存到文件系统中，即使你关闭浏览器、重启电脑，代码段依然存在。
代码段 vs 书签小程序（Bookmarklet）
官方文档提到，代码段是书签小程序（bookmarklet）的替代方案。
书签小程序是把 JavaScript 代码保存在浏览器的书签中，点击书签就能在页面上运行代码。它曾经是很多开发者的“随身工具”，但有两个明显的缺点：一是代码长度有限制（书签的 URL 长度不能太长），二是写起来很麻烦（要把代码压缩成一行）。
小建议：如果你以前用过书签小程序，现在可以把它们“迁移”到代码段中。代码段的功能更强，管理也更方便。
二、代码段能帮你做什么？
以下是几个典型的应用场景：
场景一：注入第三方库
你经常需要在控制台中使用 jQuery 来操作 DOM，但页面本身没有加载 jQuery。每次都要手动创建 <script> 标签注入。把这个过程保存为代码段，以后点一下按钮就能注入。
场景二：数据提取
你需要在页面上提取特定数据——比如抓取所有商品的价格、提取所有用户的邮箱、或者统计页面上某种元素的数量。写一个代码段来提取这些数据，随时运行、随时查看结果。
场景三：页面操作工具
你经常需要在调试时清空 localStorage、修改 Cookie、或者重置页面状态。把这些操作封装成代码段，调试时一键运行。
场景四：调试辅助脚本
你在调试过程中写了一段辅助脚本——比如模拟用户点击、自动填充表单、或者遍历 DOM 树找出特定元素。这些脚本可能只在当前调试会话中有用，但如果你觉得以后还会用到，保存为代码段就一劳永逸了。
场景五：学习和实验
你在学习某个 JavaScript 特性时，写了一段测试代码。把这段代码保存为代码段，以后想复习的时候直接打开运行，不需要重新写一遍。
三、如何打开代码段面板
在开始创建代码段之前，先找到它的“家”——代码段面板。
方法一：通过 Sources 面板导航
打开 DevTools，切换到 Sources 面板。
在左侧的文件导航区中，点击顶部的 >> 双箭头，选择 Snippets 标签页。
方法二：通过命令菜单
打开命令菜单：Ctrl + Shift + P（Windows/Linux）或 Command + Shift + P（Mac）。
输入 snippets，选择 Show Snippets，按 Enter。
方法三：通过命令菜单直接创建
如果你想更快，可以直接在命令菜单中创建代码段：
打开命令菜单。
输入 snippet，选择 Create new snippet，按 Enter。
DevTools 会直接创建一个新的代码段，并打开编辑器让你开始编写。
小建议：方法三是最快的——从命令菜单直接创建，一步到位。如果你已经熟悉了命令菜单的操作，推荐用这种方式。
四、创建和管理代码段
创建新的代码段
在 Sources 面板中创建：
打开 Snippets 面板。
点击 New snippet 按钮（+ 号）。
输入代码段的名称，按 Enter 确认。
在编辑器中编写你的 JavaScript 代码。
按 Ctrl + S（Windows/Linux）或 Command + S（Mac）保存。
通过命令菜单创建：
在 DevTools 中的任意位置，打开命令菜单（Ctrl/Cmd + Shift + P）。
输入 snippet，选择 Create new snippet。
按 Enter 执行。
代码段面板会按字母顺序排列你保存的所有代码段。
编辑代码段
在 Snippets 面板中，点击你想要编辑的代码段名称。
代码段会在编辑器中打开。
修改代码，然后按 Ctrl/Cmd + S 保存。
小提示：如果代码段名称旁边出现了一个星号（*），说明你还有未保存的修改。
重命名代码段
在 Snippets 面板中，右键点击代码段名称。
选择 Rename（重命名）。
输入新的名称，按 Enter 确认。
删除代码段
在 Snippets 面板中，右键点击代码段名称。
选择 Remove（删除）。
删除操作不可撤销——删除前确认一下这个代码段确实不再需要了。
五、如何运行代码段
代码段创建好之后，运行它非常简单。有两种方式：
方式一：在 Sources 面板中运行
在 Snippets 面板中，点击你想要运行的代码段名称。
代码段在编辑器中打开后，点击编辑器底部操作栏中的 Ctrl + Enter 按钮。
或者直接按快捷键：Ctrl + Enter（Windows/Linux）或 Command + Enter（Mac）。
运行后，代码段中的代码会在当前页面上执行。如果代码中有 console.log 输出，控制台抽屉会自动弹出显示结果。
方式二：通过命令菜单运行
在 DevTools 中的任意位置，打开命令菜单（Ctrl/Cmd + Shift + P）。
输入 !（删除 > 后再输入 ！），后面跟上代码段的名称（比如 !jQueryInject）。
按 Enter 运行。
这种方式特别适合“手已经在键盘上”的场景——你不需要切换到 Sources 面板，在任何面板中都能直接运行代码段。
按 Ctrl/Cmd + P 或 Ctrl/Cmd + O 打开文件面板后输入 !，即可直接进入运行代码段模式，省去通过 Ctrl/Cmd + Shift + P 打开命令面板再删除 > 的多余步骤。
小建议：! + 代码段名称 是在命令菜单中运行代码段的“快捷语法”。记住这个技巧，你就能在任何面板中快速运行常用的代码段。
六、在代码段中调试
代码段不只是“运行脚本”的工具——它还支持完整的调试功能。
你可以在代码段中做任何你在普通 JavaScript 文件中能做的调试操作：
设置断点：在代码段的某一行点击行号，设置行断点。
单步执行：代码暂停后，用 F10、F11 逐行跟踪。
查看 Scope：在右侧的 Scope 面板中查看所有变量的值。
添加 Watch：在 Watch 面板中追踪特定表达式。
这意味着你可以把代码段当作一个“实验沙盒”——在代码段中编写和调试一段逻辑，确认无误后再把它复制到项目源码中。
小建议：当你在项目中遇到一个复杂的逻辑问题，不确定怎么写的时候，先在代码段里写一版、调试通过，再复制到项目里。这种方式比直接在项目里改、保存、刷新、再改的效率高得多。
七、一个完整的示例
让我们通过一个完整的示例，把代码段的创建和使用流程串起来。
场景
你经常需要在控制台中用 jQuery 来操作 DOM，但很多页面并没有加载 jQuery。你每次都要手动输入一段创建 <script> 标签的代码来注入 jQuery。这个操作你一天可能要重复好几次。
操作步骤
第一步：创建代码段
按 F12 打开 DevTools，切换到 Sources 面板。
在左侧导航区中，切换到 Snippets 标签页。
点击 New snippet，输入名称 jQueryInject，按 Enter。
第二步：编写代码
在编辑器中输入以下代码：
// 注入 jQuery 到当前页面
const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
script.crossOrigin = 'anonymous';
document.head.appendChild(script);
// 等待 jQuery 加载完成后，在控制台输出提示
script.onload = function() {
console.log('jQuery 已加载，版本：' + jQuery.fn.jquery);
};按 Ctrl/Cmd + S 保存。
第三步：运行代码段
在任意页面上，打开 DevTools，切换到 Snippets 面板，点击 jQueryInject，然后点击编辑器底部的 Ctrl + Enter 按钮（或按 Ctrl/Cmd + Enter）。
页面加载了 jQuery，控制台输出 jQuery 已加载，版本：3.7.1。
第四步：在控制台中使用 jQuery
现在你可以在控制台中正常使用 $ 或 jQuery 了：
$('h1').css('color', 'red');第五步：在其他页面上使用
切换到另一个页面，重复第三步——同一个代码段，同样的效果。
一次编写，随处运行。
八、代码段 vs 控制台
代码段和控制台都可以执行 JavaScript，但它们各有各的适用场景：
维度 | 控制台（Console） | 代码段（Snippets） |
|---|---|---|
代码是否保存 | 不保存，关闭就没了 | 永久保存 |
是否可复用 | 每次都要重新输入 | 一次编写，随时运行 |
代码长度 | 适合短代码 | 适合长代码和多行脚本 |
是否支持断点调试 | 不支持 | 完整支持 |
适用场景 | 快速验证、单条命令 | 常用脚本、复杂逻辑 |
小建议：一个简单的判断标准——如果你觉得这段代码“以后可能还会用”，就保存为代码段；如果只是“临时试一下”，就在控制台里写。
九、一些实用的代码段示例
以下是一些你在日常开发中可能会用到的代码段示例，供你参考和扩展：
示例一：提取页面中的所有链接
// 提取页面中所有链接的 URL 和文本
const links = Array.from(document.querySelectorAll('a'));
const result = links.map(a => ({
text: a.textContent.trim(),
href: a.href
}));
console.table(result);示例二：清除 localStorage 并刷新
// 清空本地存储并刷新页面
localStorage.clear();
console.log('localStorage 已清空');
location.reload();示例三：统计页面中的元素数量
// 统计各种 HTML 元素的数量
const counts = {};
document.querySelectorAll('*').forEach(el => {
const tag = el.tagName.toLowerCase();
counts[tag] = (counts[tag] || 0) + 1;
});
console.table(counts);小建议：随着你使用 DevTools 的时间越来越长，你会积累一批属于自己的“常用代码段”。不妨专门建一个代码段来存放这些工具脚本，它们会成为你调试工具箱中不可或缺的一部分。
总结
在这一章中，我们学习了代码段（Snippets）的完整用法：
什么是代码段：在 DevTools 中创建并保存的 JavaScript 脚本，可在任何页面上随时运行。
核心特点：可复用、可访问页面上下文、可调试、持久化存储。
主要用途：注入第三方库、提取页面数据、执行页面操作、调试辅助、学习和实验。
如何操作：
打开 Snippets 面板：Sources → Snippets 标签，或命令菜单输入 snippets。
创建代码段：点击 New snippet，或命令菜单选择 Create new snippet。
编辑代码段：点击代码段名称，在编辑器中修改，按 Ctrl/Cmd + S 保存。
运行代码段：点击编辑器底部的 Ctrl + Enter 按钮，或按 Ctrl/Cmd + Enter。
从命令菜单运行：输入 ! + 代码段名称。
管理代码段：右键可重命名或删除。
代码段 vs 控制台：控制台适合临时验证，代码段适合保存和复用。
调试支持：代码段支持断点、单步执行、Scope 和 Watch 等完整调试功能。
代码段的价值在于“复用”——把你反复需要执行的代码保存下来，以后在任何页面上都能一键运行。它就像你放在浏览器里的“工具箱”，帮你省去重复输入的时间，让调试工作更加高效。
下一章预告：我们将学习 Workspace（工作区）——如何让在 DevTools 中做的代码修改自动保存到本地文件系统中，实现真正的“在浏览器中调试，在编辑器中保存”。
