DevTools Tips hero logo

DevTools Tips: Faster DevTools navigation

Published on

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:

Published on Improve article

Back

DevTools Tips: Identify CSS improvelements

Next

Privacy Sandbox for the web: Expanding testing into 2023

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.