前面九章，我们花了大量时间学习如何用 Sources 面板调试 JavaScript 的逻辑问题——设置断点、单步执行、监视变量、查看调用栈。这套流程你已经很熟悉了。
但你有没有遇到过这样的情况：代码逻辑没问题，页面却卡得要命？点击按钮后要等好几秒才有反应，滚动页面时一卡一卡的，动画掉帧严重……这些问题不是“逻辑错误”，而是性能问题。
排查性能问题，逻辑调试那一套思路也管用——你仍然可以用断点来定位问题——但出发点不一样了：你不再问“这段代码对不对”，而是问“这段代码为什么这么慢”。
而性能问题的根源，往往藏在那些你平时不太注意的地方：某个循环执行了太多次、某个函数被频繁调用、某段代码引发了强制回流……要找到这些问题，你需要知道代码在运行时到底花了多少时间、花在了哪里。
这一章，我们来学习 Sources 面板中两个与性能分析密切相关的能力：
性能分析的入口：如何从 Performance 面板的火焰图跳转到 Sources 面板，精确定位到耗时的那一行代码。
黑盒脚本 ：如何让调试器自动跳过第三方库的代码，让你集中精力分析自己的业务逻辑。
小提示：这一章的内容分为两个相对独立的部分。第一部分讲的是 Sources 面板与 Performance 面板的联动——这是“性能分析”的入口；第二部分讲的是黑盒脚本——这是“让调试更专注”的工具。你可以根据实际需要分别掌握。
一、Sources 面板与性能分析的关系
你可能会有疑问：“性能分析不是 Performance 面板的事情吗？和 Sources 面板有什么关系？”
确实，Performance 面板是 Chrome DevTools 中专门用于性能分析的工具——你可以在那里录制页面运行过程，生成火焰图，查看每一帧的渲染情况。
但 Performance 面板的价值不止于“看”——它还提供了从性能数据直接跳转到源代码的能力。
当你录完性能数据，在火焰图或表格视图中看到某个函数调用耗时特别长时，你可以点击它，DevTools 会自动在 Sources 面板中打开对应的源文件，并高亮显示那一行代码。
从“发现性能瓶颈”到“定位到具体代码行”，中间只需要一次点击。
具体怎么操作？
第一步：录制性能数据
打开 DevTools，切换到 Performance 面板。
点击录制按钮（●），开始记录。
在页面上执行你想要分析的操作（点击按钮、滚动页面、切换路由等）。
点击停止录制。
第二步：查看性能数据
录制完成后，Performance 面板会生成一份详细的性能报告，包含火焰图、调用树（Call Tree）、自底向上（Bottom-Up）等视图。
第三步：跳转到 Sources 面板
在火焰图或表格视图中，找到你怀疑有性能问题的函数调用：
在火焰图中：点击任意一个函数调用条，DevTools 会在下方的摘要面板中显示该函数的信息，同时 Sources 面板会自动打开并定位到对应的代码行。
在调用树或自底向上视图中：点击函数名称旁边的链接，同样会跳转到 Sources 面板。
在 Sources 面板中能做什么？
跳转到 Sources 面板之后，你可以：
查看代码上下文：看到耗时函数周围的完整代码，理解它为什么耗时。
设置断点：在关键位置设置断点，重新运行操作，用单步执行的方式深入分析。
查看调用栈：了解这个函数是从哪里被调用的，完整的调用链路是什么样的。
修改代码验证：直接在 Sources 面板中修改代码，验证优化方案是否有效。
小建议：性能分析和逻辑调试是两种不同的工作，但它们使用同一套工具——Sources 面板。排查性能问题时，可以先用 Performance 面板“扫描”全局，发现可疑的函数后跳转到 Sources 面板“深挖”细节。这种“宏观扫描 → 微观定位”的工作流，是排查性能问题最高效的方式之一。
二、黑盒脚本（Ignore List）——让调试更专注
如果说“性能分析”解决的是“代码为什么慢”的问题，那“黑盒脚本”解决的就是另一个让人头疼的问题：调试时被第三方库的代码干扰。
问题场景
你在调试自己的业务代码，设置了一个断点，按 F10 单步执行——结果代码跳进了一个你完全不认识的函数里。仔细一看，原来是 React 或 Vue 框架内部的代码，或者是某个第三方库的实现。
你不想看这些代码，但每次单步执行都会“陷”进去，得按好几次 Shift + F11（单步跳出）才能回到自己的代码。如果第三方库的调用层次很深，这个过程会非常烦人。
更麻烦的是，调用栈（Call Stack）面板里塞满了第三方库的函数调用帧，你很难找到自己的代码在哪里。
什么是黑盒脚本？
黑盒脚本（Blackboxing）是 Chrome DevTools 中的一个功能，它允许你将某些脚本标记为“黑盒”——调试器会自动跳过这些脚本。
当一个脚本被标记为黑盒后：
单步执行时会自动跳过：按 F10 或 F11 时，调试器不会进入黑盒脚本的内部。
调用栈中会隐藏：黑盒脚本的内部调用帧不会显示在 Call Stack 面板中。
断点不会触发：在黑盒脚本中设置的断点不会生效。
异常不会暂停：黑盒脚本中抛出的异常不会触发暂停。
最终的效果是：你调试的是自己的应用代码，而不是第三方库的代码。
小建议：黑盒脚本的前身称作 "Blackboxing"，在较新版本的 Chrome 中，该功能在设置中被更名为忽略列表（Ignore List）。尽管名称有所变化，但功能与之前完全一致。为与时俱进，文将统一使用"忽略列表"来指代这一功能。
如何配置忽略列表？
配置忽略列表有三种方式，适用于不同的场景。
方式一：右键单个文件（最快捷）
这是最快的方式，适合临时忽略某个特定的文件。
在 Sources 面板的 Page 标签页中，找到你想要忽略的脚本文件。
右键点击文件名。
选择 Add script to ignore list（注意：只有当所选文件为 JS 文件时，该选项才会出现；若所选文件不是 JS 文件，则不会显示此选项。）
之后，该脚本就会被添加到忽略列表中。在文件树中，被忽略的文件名会显示为灰色。
如果想把文件从忽略列表中移除，同样在文件名上右键，选择 Remove from ignore list。
方式二：在编辑器中右键
如果你正在编辑器中查看某个文件，也可以直接在编辑器区域右键，选择 Add script to ignore list。
方式三：通过设置批量配置（适合长期使用）
如果你需要批量忽略某类文件（比如所有 node_modules 下的文件、所有 .min.js 文件），可以通过设置来配置正则表达式规则。
打开 DevTools，按 ? 进入Settings 面板。
在左侧菜单中找到 Ignore List。
点击右下方 Csutom exclusion rules 下方的 Add regex rule 按钮进行添加操作。
常用的匹配规则示例：
规则 | 说明 |
|---|---|
.*\.min\.js | 忽略所有压缩的 .min.js 文件 |
/node_modules/.* | 忽略所有 node_modules 目录下的文件 |
.*/jquery.*\.js | 忽略所有 jQuery 文件 |
https://cdn\.jsdelivr\.net/.* | 忽略从特定 CDN 加载的文件 |
你可以用 | 符号组合多个规则，比如 jquery\..*\.js|include\.postload\.js。
一般排除规则：
在 Ignore List 设置中，你还可以勾选三个额外的Ceneral exclusion rules：
Content scripts injected by extensions ：由扩展程序注入的内容脚本。
Known third-party scripts from source maps ：来源映射中的已知第三方脚本。
Anonymous scripts from eval or console ：来自 eval 或控制台的匿名脚本。
小提醒：勾选就是排除，例如，勾选 Content scripts injected by extensions 后，在进行调试时，由扩展程序注入的内容脚本被自动排除（忽略）。
这几个选项在调试时很有用——有时候代码暂停在了某个浏览器扩展的脚本里，而你根本不知道那是哪来的。
小建议：对于大多数项目，最简单的配置是添加一条 node_modules/.* 规则，一次性忽略所有第三方依赖。这样你在调试时就不会被任何第三方库的代码干扰了。
临时查看被忽略的代码
有时候，你虽然把某个库添加进了忽略列表中，但偶尔需要临时看一眼它的内部代码（比如你想确认某个异常是不是第三方库本身的问题）。
这时候，你不需要删除规则。只需在 Call Stack 面板中，勾选 Show ignore-listed frames ，所有被隐藏的调用帧就会临时显示出来。看完之后取消勾选，恢复原来的状态即可。
三、忽略列表应用场景
场景一：调试包含大量第三方库的页面
你的页面加载了 jQuery、Lodash、D3 等多个第三方库。调试时调用栈里充满了这些库的内部函数调用，很难找到自己的代码。
把 node_modules/.* 添加到忽略列表后，所有第三方库的调用帧都会被隐藏，调用栈只显示你自己的代码。
场景二：调试压缩后的生产代码
生产环境的代码通常是压缩过的（.min.js），几乎不可读。调试时如果进入了这些代码，不仅难理解，还容易卡住。
把 .*\.min\.js 添加到忽略列表中后，调试器就会自动跳过所有压缩文件。
四、性能分析与忽略列表的结合使用
性能分析和忽略列表虽然解决的是不同的问题，但它们在实际工作中经常需要配合使用。
典型的工作流是这样的：
发现性能问题：用户在反馈中说“页面加载很慢”或“点击按钮后卡顿”。
录制性能数据：打开 Performance 面板，录制页面操作过程。
定位瓶颈函数：在火焰图或调用树中，找到一个耗时特别长的函数。
跳转到 Sources 面板：点击该函数，DevTools 自动跳转到 Sources 面板并高亮对应代码行。
深入分析：在 Sources 面板中设置断点，重新执行操作，用单步执行的方式分析该函数的执行过程。
排除干扰：若调试过程中频繁步入第三方库代码，可将相关文件加入到忽略列表中，让调试更专注。
验证修复：在 Sources 面板中修改代码验证修复方案，确认后同步到源文件。
这套工作流把 Performance 面板的“宏观扫描”能力和 Sources 面板的“微观定位”能力结合在一起，是排查性能问题最高效的方式之一。
五、重要提醒
1. 忽略列表不是“删除”代码
把某个脚本加入忽略列表，只是让调试器在调试时跳过它，并不会影响脚本在页面上的正常执行。页面功能完全不受影响。
2. 不要盲目把文件添加到忽略列表
如果某个第三方库可能就是问题的根源（比如它抛出了异常），把它添加到忽略列表反而会让你错过重要的线索。只有在你确定某个库没有问题、不想被它的内部实现干扰时，才把它添加到忽略列表中。
3. 定期复查忽略列表配置
项目依赖会更新，第三方库的版本会变化。之前忽略列表的某个文件，在新版本中可能变成了问题的根源。定期检查和更新忽略列表配置是个好习惯。
4. 性能和调试的视角不同
Performance 面板告诉你“代码花了多少时间”，Sources 面板告诉你“代码在做什么”。两者结合使用，才能既看到“宏观”的性能画像，又看到“微观”的代码细节。
总结
在这一章中，我们学习了 Sources 面板中与性能分析相关的两个核心能力：
性能分析的入口：
Performance 面板的火焰图、调用树、自底向上等视图中的函数调用都可以点击。
点击后会自动跳转到 Sources 面板，精确定位到对应的代码行。
可以在 Sources 面板中进一步设置断点、单步执行、深入分析。
黑盒脚本（Ignore List） ：
让调试器自动跳过被标记的脚本，避免被第三方库的代码干扰。
三种配置方式：
右键文件名 → 选择“Add script to ignore list”（最快）。
右键编辑器 → 选择“Ignore List”。
Settings → Ignore List → 添加正则表达式规则（适合批量配置）。
常用规则 .*\.min\.jsnode_modules/.*。
临时查看：在 Call Stack 中勾选“Show ignore-listed frames”。
性能分析与忽略列表的结合：
Performance 面板负责“发现”性能瓶颈。
Sources 面板负责“定位”和“分析”具体代码。
忽略列表让分析过程更专注，不被第三方库干扰。
性能分析和逻辑调试是前端开发中两种不同的工作，但它们共享同一套工具——Sources 面板。掌握了性能分析的入口和忽略列表的配置方法，你就能在 Sources 面板中更高效地排查性能问题，同时避免被无关的代码干扰。
下一章预告：我们将进入 Sources 面板系列的最后一章——总结与实战演练，把前面十章的所学内容串起来，完成一个完整的调试流程。
