你不知道的 Chrome 调试工具技巧 第六天：命令菜单

准备好掌握 Chrome 调试工具命令菜单的秘密武器了吗？如果你一直遵循我的 24 天技巧之旅，你一定已经对 DevTools 变得非常熟悉了。今天，我们将深入探讨命令菜单，发现它隐藏的功能。

简介

命令菜单是 Chrome 调试工具中一个不起眼的菜单，但它却包含了一系列强大的命令，可以让你快速有效地调试代码。要访问命令菜单，请执行以下操作：

1. 打开 Chrome DevTools（按 F12 或 Cmd + Option + I）
2. 点击三点菜单图标
3. 选择“更多工具”
4. 选择“命令菜单”

有用的命令

命令菜单提供了各种有用的命令，包括：

• Toggle Device Toolbar： 在设备栏和浏览器窗口之间切换。
• Dock to Side of Window： 将 DevTools 停靠在窗口的侧面。
• Show Layer Tree： 显示页面中元素的层级树。
• Capture Screenshot： 截取页面的屏幕截图。
• Start Page Trace： 记录页面的性能数据。
• Start CPU Profile： 记录 CPU 使用情况。
• Start Heap Profile： 记录内存使用情况。
• Start JavaScript Profile： 记录 JavaScript 执行情况。

快捷键

除了菜单命令外，许多命令还可以通过键盘快捷键访问。这使得在调试会话中快速执行操作变得非常方便。以下是几个有用的快捷键：

• Esc： 关闭命令菜单。
• Enter： 执行所选命令。
• Cmd + Option + C（Mac）/Ctrl + Alt + C（Windows）： 截取屏幕截图。
• Cmd + Option + P（Mac）/Ctrl + Alt + P（Windows）： 启动页面跟踪。
• Cmd + Option + CPU（Mac）/Ctrl + Alt + CPU（Windows）： 启动 CPU 剖析。
• Cmd + Option + H（Mac）/Ctrl + Alt + H（Windows）： 启动堆剖析。
• Cmd + Option + J（Mac）/Ctrl + Alt + J（Windows）： 启动 JavaScript 剖析。

自定义命令

你还可以使用命令菜单来自定义自己的命令。这对于创建适合自己工作流程的快捷方式非常有用。要自定义命令，请按照以下步骤操作：

1. 打开命令菜单。
2. 点击“更多命令”选项。
3. 点击“新建命令”按钮。
4. 输入命令名称和。
5. 输入要执行的命令。
6. 点击“保存”。

总结

命令菜单是 Chrome 调试工具中一个强大的工具，它提供了各种命令和快捷方式，以简化和加速调试过程。通过掌握命令菜单，你可以提高工作效率并更有效地解决代码问题。请务必充分利用它，释放调试的全部潜力。