如果你看过上一章，应该已经尝到了一些实用技巧的甜头。但你可能也发现了一个问题：DevTools 的功能太多了——几十个面板、上百个设置选项，想找到某个功能的时候，经常要在菜单里翻半天。
有没有一种方法，能让你不用鼠标、不用记路径、不用翻菜单，输入几个字母就能直达任何功能？
答案是：命令菜单。
命令菜单是 DevTools 的“控制中心”——它提供了一个统一的入口，让你可以快速导航到任意面板、执行各种操作、打开任意文件。你只需要记住一个快捷键，剩下的交给键盘就可以了。
如果你用过 VS Code 的命令面板（Command Palette），那你会对命令菜单感到非常熟悉——因为命令菜单的灵感正是来源于它。
学会命令菜单，意味着你不再需要记住每个功能在哪个菜单的哪个层级下面。你只需要知道“我想做什么”，然后在命令菜单里搜一下就行了。
小提示：这一章的核心只有一件事——记住 Ctrl/Cmd + Shift + P 这个快捷键。只要你记住了它，命令菜单的大门就为你敞开了。
一、什么是命令菜单？
简单来说，命令菜单是 DevTools 的快速命令执行器。
DevTools 有几十个面板和几百个功能——元素面板、控制台、网络、性能、Lighthouse、CSS Overview……每个功能都有各自的入口。有的在顶部的标签栏里，有的藏在“更多工具”的子菜单里，还有的在设置面板的某个角落。
命令菜单把这些分散的入口全部统一了起来。
你只需要按下 Ctrl + Shift + P（Windows/Linux）或 Command + Shift + P（Mac），就会弹出一个搜索框。在搜索框里输入你想做的事情（比如“network”或“性能”），命令菜单就会自动匹配并列出相关的命令。选中之后按回车，DevTools 就会直接执行——切换面板、修改设置、运行操作，一气呵成。
它的核心价值有三点：
快速：省去了在菜单和面板之间来回切换的时间。
易发现：不知道某个功能在哪？输入关键词就能找到。
键盘驱动：手不用离开键盘，操作流畅度大幅提升。
二、如何打开命令菜单？
打开命令菜单有两种方式：
方式一：键盘快捷键（推荐）
操作系统 | 快捷键 |
|---|---|
Windows / Linux | Ctrl + Shift + P |
Mac | Command + Shift + P |
这是最快的方式。无论你当前在浏览器的哪个位置——哪怕页面本身处于焦点状态——只要按下这个组合键，命令菜单就会弹出来。
方式二：点击菜单
点击 DevTools 右上角的三个点图标（⋮）→ 选择 Run command（运行命令）。
小建议：强烈推荐用快捷键方式。Ctrl/Cmd + Shift + P 是命令菜单的“钥匙”，记住这一个组合键，你就能打开整个 DevTools 的宝库。
三、命令菜单的基本使用
打开命令菜单后，你会看到一个输入框，里面默认有一个 > 符号，前面跟着 “Run” 字样。
使用方法非常简单：
按下 Ctrl/Cmd + Shift + P 打开命令菜单。
输入你想要执行的操作的关键词（比如 elements、network、dark）。
命令菜单会自动列出匹配的结果。
用上下箭头选择，或直接用鼠标点击。
按回车执行。
整个过程通常只需要几秒钟。你不需要记住命令的完整名称——模糊搜索会自动匹配。
举个例子：快速切换到网络面板
假设你现在在元素面板里调试样式，突然想看看页面的网络请求情况。
不用鼠标去点标签栏——直接按 Ctrl/Cmd + Shift + P，输入 net，命令菜单会立刻显示 “Show Network” 选项。按回车，你就直接到了网络面板。
整个过程手不用离开键盘，比用鼠标去找标签快了不止一倍。
四、命令菜单能做什么？
命令菜单可以执行 DevTools 中几乎所有重要操作。以下是一些常见的用途分类：
1. 切换面板
这是命令菜单最常用的功能。输入面板名称，就能直接跳转：
输入 elements → 切换到元素面板。
输入 console → 切换到控制台面板。
输入 sources → 切换到源代码面板。
输入 network → 切换到网络面板。
输入 performance → 切换到性能面板。
输入 application → 切换到应用面板。
输入 css overview → 打开 CSS Overview 面板。
2. 修改设置
很多设置选项也可以通过命令菜单快速调整：
输入 dark → 切换到深色主题。
输入 dock → 调整 DevTools 停靠位置（底部/右侧/左侧/独立窗口）。
输入 chinese → 切换界面语言为中文。
输入 disable javascript → 禁用 JavaScript。
3. 执行特定操作
除了切换面板和修改设置，命令菜单还能执行各种具体操作：
输入 screenshot → 截图相关命令（区域截图、全屏截图等）。
输入 reload → 重新加载页面。
输入 clear → 清除控制台。
输入 coverage → 打开代码覆盖率分析。
4. 打开文件
命令菜单不仅可以执行命令，还可以打开文件。
默认情况下，命令菜单是“运行命令”模式（输入框前面有 > 符号）。如果你想打开一个文件，可以：
删除 > 符号，然后输入文件名。
或者直接用 Ctrl + P（Windows/Linux）或 Command + P（Mac）打开“打开文件”模式。
在“打开文件”模式下，DevTools 会搜索所有已加载的资源文件（JS、CSS、HTML 等），帮你快速定位到目标文件。
5. 查看帮助
打开命令菜单后，先删除输入框里默认的 > 字符，再输入 ?，就能查看其他可用的操作。
快捷小技巧： 按下Ctrl /Cmd+ P 后，直接输入 ？，就可以省略删除 > 字符的步骤。
五、进阶技巧：Ctrl/Cmd + P 打开文件
除了 Ctrl/Cmd + Shift + P，命令菜单还有一个“孪生兄弟”——Ctrl + P（Windows/Linux）或 Command + P（Mac）。
这两个快捷键的区别在于：
快捷键 | 模式 | 用途 |
|---|---|---|
Ctrl/Cmd + Shift + P | 运行命令 | 执行操作、切换面板、修改设置 |
Ctrl/Cmd + P | 打开文件 | 在已加载的资源中搜索并打开文件 |
Ctrl/Cmd + P 在调试大型项目时特别有用——你不需要在源代码面板的文件树里翻找，直接输入文件名就能跳转。
小建议：把 Ctrl/Cmd + Shift + P 和 Ctrl/Cmd + P 这对快捷键记在一起——一个用来“做事情”，一个用来“找文件”。
六、实战演练：几个常用的命令菜单操作
以下是在日常开发中高频使用的几个命令菜单操作，建议你立刻打开 DevTools 试一试：
切换深色/浅色主题
打开命令菜单，输入 dark，选择 “Switch to dark theme”，按回车。想切回浅色？输入 light 就行。
调整 DevTools 停靠位置
打开命令菜单，输入 dock，你会看到几个选项：dock to bottom、dock to left、dock to right、undock。选一个，DevTools 的位置立刻改变。
快速切换到任意面板
打开命令菜单，输入面板名称的前几个字母。比如输入 ele 就能看到 “Show Elements Panel”，输入 net 就能看到 “Show Network Panel”。
截取页面区域
打开命令菜单，输入 screenshot，选择 “Capture area screenshot”。然后你可以在页面上拖拽选取一个区域，DevTools 会自动截取并保存为图片。
禁用 JavaScript
打开命令菜单，输入 disable javascript，选择对应命令按回车。页面会立即重新加载，并且 JavaScript 被禁用——这对于测试页面的渐进增强策略非常有用。
七、为什么命令菜单值得你花时间掌握？
对于初中级开发者来说，命令菜单可能是投入产出比最高的一个工具。
你只需要记住一个快捷键（Ctrl/Cmd + Shift + P），就能获得以下回报：
省时间：不用在菜单和面板之间来回切换，每次操作节省几秒钟，一天下来累积的时间非常可观。
省脑力：不用记住每个功能在哪个菜单的什么位置，只需要知道“关键词”就够了。
提升探索欲：当你不知道某个功能在哪时，打开命令菜单搜一下就能找到——这让学习 DevTools 新功能变得更轻松。
更专注：手不用离开键盘去摸鼠标，思维不会被打断。
命令菜单的设计哲学很简单：工具应该适应人的思维，而不是让人去记忆工具的布局。你想做什么，直接搜，直接做。
总结
在这一章中，我们深入学习了命令菜单：
它是什么：DevTools 的快速命令执行器，统一了所有功能和设置的入口。
怎么打开：Ctrl + Shift + P（Windows/Linux）或 Command + Shift + P（Mac）。
能做什么：
切换任意面板（输入面板名称即可）。
修改设置（主题、停靠位置、语言等）。
执行操作（截图、禁用 JS、重新加载等）。
打开文件（用 Ctrl/Cmd + P）。
怎么探索：输入 ? 查看所有可用操作。
核心价值：一个快捷键替代所有菜单操作，让 DevTools 的使用从“鼠标驱动”变成“键盘驱动”。
命令菜单是 DevTools 中最具“杠杆效应”的工具——花最小的学习成本，获得最大的效率提升。从今天开始，养成“想做什么先按 Ctrl/Cmd + Shift + P”的习惯，你会发现 DevTools 的使用体验提升了一个档次。
下一章预告：我们将学习如何在 DevTools 中禁用 JavaScript——一个在测试页面健壮性时非常实用的功能。
本章练习
用命令菜单切换到网络面板（输入 network），再切换到性能面板（输入 performance），再切换回元素面板（输入 elements）。全程不要用鼠标点击标签栏。
用命令菜单把 DevTools 的主题从浅色切换到深色，再切回来。试试输入 dark 和 light 分别能得到什么结果。
用命令菜单调整 DevTools 的停靠位置——先停靠到底部，再停靠到右侧，再取消停靠变成独立窗口。
按 Ctrl/Cmd + P，输入一个你当前页面中存在的文件名（比如 app.js 或 style.css），看看能否快速定位到该文件。
用命令菜单输入 screenshot，选择 “Capture area screenshot”，在页面上截取一个区域，保存图片看看效果。
