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

• Right-click on any of the tabs.
• Select Move to Bottom or Move to Top depending on where the tab is.

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

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

• Click and hold any of the tabs in the toolbar.
• Move the tab horizontally, left or right, until the desired location is reached.
• Release the mouse button. The new order will be persisted every time you open DevTools.

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