Undock and Move the Developer Tools
Sometimes we do not wish to dock our tools at the bottom of the screen, as they are in the way. Most of the Developer Tools offer another option for docking.
In the Chrome Developer Tools, the bottom left icon allows you to change the dock settings of your Developer Tools. A quick click switches between docking at the bottom and the right. A held click allows you to select your docking option - including docking them in a new window. You can also click and drag an empty area of the tab bar to move the Developer Tools in Chrome.
In the Firefox and Safari Developer Tools, the dock option can be found in the top left next to the close button is the option to undock the tools in to a new window.
If you dock Safari's Developer Tools in to a new window, you are presented with an option to re-dock against the bottom and the left of the browser window; but at present the Developer Tools need to be undocked before they can be moved.
To change the docked position, click the down arrow next to Firebug’s icon in the main toolbar, followed by “Firebug UI Location”. You will have multiple choices for top/bottom/left/right/detached. Firebug also has icons in the upper right corner to quickly change, or to minimize and close.
The Firefox DevTools have docking icons in the top left corner of the toolbar for switching between bottom and right, and for expanding into a separate window.