DevTools Tips

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).

GIF 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.

GIF animation in Firefox DevTools showing how to move panels in the toolbar