DevTools Tips: Faster DevTools navigation

Sofia Emelianova
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.

    The Drawer.

  • Click More Tools. More Tools to open other Drawer tabs.

    The More Tools button that opens 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.

    DevTools Command Menu.

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

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

    Editing a shortcut in Settings.

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

To learn more, see: