DevTools Tips: Faster DevTools navigation

Sofia Emelianova

Found yourself lost in DevTools? Learn how to:

• Pair panels and tabs you use frequently with the Drawer.
• Access panels and options with the Command Menu even if you forgot where they are.
• Disable automatic layout changes.
• Customize DevTools-specific shortcuts to your preferences.

Watch the video to see these tips in action or read on for highlights.

• Press Escape to open or close the Drawer.

  

• Click More Tools to open other Drawer tabs.

  

• Reorder DevTools panels and Drawer tabs and combine them by moving them up and down to and from the Drawer.

• Search, run commands, toggle settings, and open panels and tabs with the Command Menu even if you forgot where to find them.

  

• Change DevTools layout from auto to always horizontal or vertical.

• Customize DevTools shortcuts. Check Settings > Experiments > Enable keyboard shortcut editor.

  

For a more hands-on learning experience, see the Customize DevTools tutorial.

To learn more, see:

• Keyboard shortcuts reference
• Run commands in the Command Menu
• Change DevTools placement
• Enable dark theme