It's currently docked to the bottom of the browser.
I know it can be split into a separate window, but I wanted it docked to the side of the browser instead.
To change its position, select the three-dots icon in the top right corner of the inspector, then choose an alternative display option. Click any page element to reveal its source in the inspect panel. To modify or delete a page element, select its code in the inspector.
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom. Dock to left.
To permanently dock the developer tools go into Safari View Menu > Customise Toolbar… and drag the Web Inspector icon to your toolbar – now each time you click it it will dock the dev tools in the lower half of the window or in a separate window as your preferences are saved..
Click on the gear in the lower right of the inspector. Check the You may have to update to the beta/dev channel for the option to be available.Dock to right
option.
Update: The option is now in the lower left of the inspectors toolbar.
Just wanted to tell that for Google Chrome 24 the dock to right
have been moved to the bottom left. You have to hold down the icon.
Take a look at this chrome issue: http://code.google.com/p/chromium/issues/detail?id=154199
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With