Move panels to re-arrange them

Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.

Categories: Supported by:

Move panels to re-arrange them

Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs.

There are 2 ways that you can re-arrange panels in DevTools today: dragging them horizontally in the toolbar, to re-order them, and moving them between the top toolbar and the bottom (drawer) toolbar

To move tabs between the top and bottom areas (Edge only)

This only works in Edge at the moment is makes it super easy to see any 2 tools at once (more information about Edge personalization features).

Animation in Edge DevTools showing the move to top/bottom menus.

To re-order panels by dragging (Chrome, Edge, Firefox, Safari)

If you use some tools more than others, this can be used to group them at the start of the toolbar for example.

Animation in Firefox DevTools showing how to move panels in the toolbar.

See also