Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to dock Chrome Web Inspector to the side of the browser instead of the bottom?

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.

like image 659
Luke Dennis Avatar asked Apr 28 '12 23:04

Luke Dennis


People also ask

How do I change the inspect position in Chrome?

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.

How do I move developer tools to the side?

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.

How do you dock a web inspector?

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


2 Answers

Click on the gear in the lower right of the inspector. Check the Dock to right option. You may have to update to the beta/dev channel for the option to be available.

Update: The option is now in the lower left of the inspectors toolbar.

New toggle button for "dock to right"

like image 195
abraham Avatar answered Jan 03 '23 14:01

abraham


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

like image 41
TryingToImprove Avatar answered Jan 03 '23 14:01

TryingToImprove