想象一下这个场景：你接手了一个项目，代码里有几十个文件。你看到一个报错，里面提到了一个叫 formatPrice 的函数——但你不确定这个函数定义在哪个文件里。
你怎么办？
一个个文件点开看？太慢了。用编辑器的全局搜索？但如果项目是在浏览器里跑的，有些文件是动态加载的，编辑器里搜不到。
这时候你需要的是 DevTools 的搜索功能——它能直接在所有已加载的资源中搜索，不管这些资源是静态文件、动态脚本、还是从 CDN 加载的第三方库。
DevTools 提供了两种搜索方式：
当前面板内搜索：在元素、控制台、源代码等单个面板中快速查找。
全局搜索：在所有已加载的资源文件中搜索任何文本。
这两种方式各有各的用途。当前面板搜索帮你快速定位当前上下文中的内容，全局搜索则帮你跨文件查找——两者配合使用，你就能在 DevTools 中快速找到任何你想要的代码、数据或元素。
小提示：这一章的核心就是两个快捷键——Ctrl/Cmd + F 和 Ctrl/Cmd + Shift + F。记住它们，你就能在任何调试场景中快速定位目标。
一、两种搜索方式概览
在开始详细讲解之前，先对两种搜索方式有一个整体认识：
特性 | 当前面板搜索 | 全局搜索 |
|---|---|---|
快捷键 | Ctrl/Cmd + F | Ctrl + Shift + F / Cmd + Shift + F |
搜索范围 | 当前面板中已打开的内容 | 所有已加载的资源文件 |
支持的面板 | 元素、控制台、源代码、网络、性能等 | 专门的面板（Search 面板） |
典型场景 | 在当前文件中找某个函数 | 跨文件找某个变量、类名或 API 调用 |
两个快捷键只差一个 Shift，但功能完全不同。日常开发中，这两个快捷键的使用频率都非常高——记住它们，你就能在 DevTools 中快速找到任何东西。
二、当前面板内搜索（Ctrl/Cmd + F）
当前面板内搜索是最常用的搜索方式——你在哪个面板工作，就在哪个面板里搜索。
快捷键
操作系统 | 快捷键 |
|---|---|
Windows / Linux | Ctrl + F |
Mac | Command + F |
支持的面板
并非所有面板都支持搜索，但以下核心面板都支持：
面板 | 搜索范围 | 特殊功能 |
|---|---|---|
元素面板（Elements） | DOM 树 | 支持按选择器和 XPath 搜索 |
控制台面板（Console） | 日志消息 | 在输出历史中搜索 |
源代码面板（Sources） | 当前打开的源文件 | 支持替换（Replace）功能 |
网络面板（Network） | 网络请求的标头、载荷和响应体 | 支持在请求列表中搜索 |
性能面板（Performance） | Main 轨道中的活动和 Network 轨道中的请求 | — |
元素面板中搜索
在元素面板中按 Ctrl/Cmd + F，搜索框会出现在面板底部。
你可以搜索的内容包括：
文本内容：输入 Hello，找到所有包含“Hello”文本的 DOM 节点。
标签名：输入 div，找到所有 <div> 元素。
CSS 选择器：输入 .header，找到所有 class 为 header 的元素。
XPath：输入 //div[@id="app"]，用 XPath 语法定位元素。
小提示：多多动手练习上面的 CSS 选择器搜索，你会体会更深、收获更多。
搜索结果会以黄色高亮显示在 DOM 树中。你可以使用搜索框旁边的上下箭头按钮，或者直接按 Enter 键在匹配结果之间跳转。
源代码面板中搜索
在源代码面板中，选择相应的文件，按下 Ctrl/Cmd + F，搜索框会出现在当前文件的下方。
除了查找，源代码面板的搜索还支持 替换（搜索框左侧a◡b图标）功能——你可以直接在 DevTools 中修改代码，然后保存更改。这对于快速修复 bug 或临时测试非常有用。
小提示：源代码面板中的替换功能会直接修改 DevTools 内存中的代码，不会修改你硬盘上的源文件。刷新页面后改动就会丢失——所以可以放心大胆地用。
控制台面板中搜索
在控制台面板中按 Ctrl/Cmd + F，可以搜索控制台中所有的输出日志。
当控制台里有几百行日志时，这个功能特别有用——你不需要一行一行地翻，直接搜关键词就能定位到目标日志。
网络面板中搜索
在网络面板中按 Ctrl/Cmd + F，可以搜索网络请求列表中的所有内容——包括请求的 URL、请求头、请求体、以及响应内容。
比如，你想知道某个 API 请求是否返回了 "success" 这个关键词——在网络面板中搜一下，所有包含这个词的请求都会高亮显示。
三、全局搜索（Ctrl/Cmd + Shift + F）
当前面板搜索只能搜当前打开的内容。如果你需要跨文件搜索——比如在所有 JS 文件中找 formatPrice 这个函数定义在哪里——就需要用到全局搜索。
快捷键
操作系统 | 快捷键 |
|---|---|
Windows / Linux | Ctrl + Shift + F |
Mac | Command + Option + F |
如何打开全局搜索
除了快捷键，还有几种方式可以打开全局搜索：
通过 DevTools 菜单：点击右上角的三个点（⋮）→ 更多工具（More tools） → 搜索（Search）。
通过抽屉菜单：按 Esc 打开底部抽屉，然后在左上角选择 更多工具 → 搜索。
通过命令菜单：按 Ctrl/Cmd + Shift + P，输入 search 或 搜索，选择对应命令。
如何使用全局搜索
打开全局搜索面板后，你会看到一个搜索输入框：
在搜索框中输入你想要查找的文本。
按 Enter 键开始搜索。
DevTools 会扫描所有已加载的资源文件，列出所有匹配结果。
每个结果都会显示：文件名、行号、以及匹配内容所在的代码行。
点击任意一个搜索结果，DevTools 会自动切换到源代码面板，打开对应的文件，并滚动到匹配的位置。
高级搜索选项
全局搜索面板提供了两个重要的搜索选项：
区分大小写（Enable case sensitive search） ：开启后，搜索会严格区分大小写。比如搜 User 不会匹配 user。
正则表达式（Enable regular expressions） ：开启后，你可以使用正则表达式进行更复杂的模式匹配。
正则表达式搜索示例：
搜索 function\s+\w+ —— 找到所有函数定义。
搜索 \b(color|bg)\b —— 找到所有包含 color 或 bg 的地方。
搜索 \/\/.*TODO —— 找到所有注释中的 TODO。
小建议：正则表达式搜索是一个强大的高级功能。如果你还不熟悉正则表达式，可以先从简单的文本搜索开始，等有需要的时候再慢慢学习正则的用法。
管理搜索结果
全局搜索面板还提供了几个管理搜索结果的工具：
刷新：如果你的代码发生了变化，点击刷新按钮重新执行搜索。
展开或折叠所有结果 ：
Windows / Linux：按 Ctrl + Shift + { 或 Ctrl + Shift + }
Mac：按 Command + Option + { 或 Command + Option + }
清除结果（Clear）：清空当前的搜索结果列表。
四、搜索设置：搜索匿名和内容脚本
在 DevTools 的设置中，有一个与搜索相关的选项值得了解。
打开设置（按 F1 或 ?）打开设置面板，在 Sources 中勾选 Search in anonymous and content scripts 选项。开启这个选项后，全局搜索会扫描所有已加载的 JavaScript 文件——包括 Chrome 扩展程序中的脚本。如果你在调试涉及扩展程序的页面，这个选项会非常有用。
默认情况下这个选项是关闭的，因为搜索扩展脚本会产生大量结果，可能会干扰你正常调试的注意力。只有在确实需要搜索扩展脚本时才开启它。
五、实战场景：什么时候用哪种搜索？
说了这么多，你可能在想：“我到底该用 Ctrl/Cmd + F 还是 Ctrl/Cmd + Shift + F？”
这里给你一个简单的判断标准：
用 Ctrl/Cmd + F（当前面板搜索）当：
你已经在某个面板中，想快速找到当前上下文里的内容。
在元素面板中找一个 DOM 节点。
在源代码面板中找一个函数定义（你知道它在当前文件里）。
在控制台里找一条特定的日志输出。
在网络面板里找一个特定的请求。
用 Ctrl/Cmd + Shift + F（全局搜索）当：
你不知道目标在哪个文件里。
你想知道某个变量、函数、类名在整个项目中被用在了哪些地方。
你想搜索第三方库的源码（比如想看看 React 内部某个函数的实现）。
你想用正则表达式做模式匹配搜索。
简单来说：知道在哪 → 用 Ctrl/Cmd + F；不知道在哪 → 用 Ctrl/Cmd + Shift + F。
六、常见问题
Q1：全局搜索搜不到我想要的代码？
检查以下几点：
确认文件已经加载：全局搜索只搜索“已加载”的资源。如果某个文件还没有被加载到浏览器中，它不会出现在搜索结果里。
检查是否开启了区分大小写：如果你开启了区分大小写，搜 sichen 是搜不到 SiChen 的。
检查“Search in anonymous and content scripts”设置：如果你要搜索的是扩展程序中的脚本，需要开启这个选项。
Q2：全局搜索和源代码面板里的搜索有什么区别？
特征 | 全局搜索 | 源代码面板搜索 |
|---|---|---|
范围 | 所有已加载的文件 | 当前打开的单个文件 |
替换功能 | 不支持 | 支持 |
快捷键 | Ctrl/Cmd + Shift + F | Ctrl/Cmd + F |
简单来说，全局搜索是“跨文件找”，源代码面板搜索是“在当前文件里找”。
Q3：可以在网络面板中搜索响应内容吗？
可以。在网络面板中按 Ctrl/Cmd + F，DevTools 会搜索请求列表中的所有内容，包括请求的 URL、标头、载荷和响应体。
这对于调试 API 接口特别有用——比如你想确认某个接口返回的数据里是否包含特定字段，直接在网络面板里搜一下就行了。
Q4：搜索结果太多怎么办？
如果搜索结果太多，可以尝试：
使用更精确的关键词：比如搜 getUserData 而不是搜 get。
开启区分大小写：缩小匹配范围。
使用正则表达式：更精确地控制匹配模式。
在特定面板中搜索：如果你知道目标在哪个面板，用 Ctrl/Cmd + F 而不是全局搜索。
总结
在这一章中，我们系统学习了 DevTools 的搜索功能：
当前面板搜索（Ctrl/Cmd + F） ：
在元素、控制台、源代码、网络等面板中快速查找。
元素面板支持选择器和 XPath 搜索。
源代码面板支持替换功能。
网络面板支持搜索请求标头、载荷和响应。
全局搜索（Ctrl/Cmd + Shift + F） ：
在所有已加载的资源文件中搜索任何文本。
支持区分大小写和正则表达式。
点击结果可直接跳转到源代码中的对应位置。
可通过菜单、抽屉、命令菜单等多种方式打开。
搜索设置 ：
“Search in anonymous and content scripts” 控制是否搜索扩展脚本。
搜索功能是 DevTools 中最常用的功能之一——你在调试过程中几乎每天都会用到。熟练掌握 Ctrl/Cmd + F 和 Ctrl/Cmd + Shift + F 这两个快捷键，能让你在大型项目中快速定位目标，大幅提升调试效率。
下一章预告：我们将进入远程调试的世界——学习如何用电脑调试手机上的页面，让移动端调试不再困难。
本章练习
打开任意一个网页，在元素面板中按 Ctrl/Cmd + F，搜索一个你感兴趣的 CSS 类名或标签名，观察搜索结果在 DOM 树中的高亮显示。
切换到控制台面板，在控制台中输出一些日志（可以用 console.log 生成几条），然后用 Ctrl/Cmd + F 搜索其中一条日志的内容。
切换到源代码面板，打开一个 JS 文件，用 Ctrl/Cmd + ` 搜索一个关键词。尝试使用替换功能（如果有替换按钮）修改一段代码，然后刷新页面看看改动是否丢失。
按 Ctrl/Cmd + Shift + F 打开全局搜索，输入一个你项目中的函数名或变量名（比如 fetch 或 console），查看搜索结果——看看这个关键词在哪些文件中被使用了。
在全局搜索中，开启“区分大小写”开关，搜索 user 和 User，观察搜索结果有什么不同。
在全局搜索中开启“正则表达式”开关，输入 function\s+\w+，看看能找到多少个函数定义。
