How to split vertically the Elements Panel?

[demis...@gmail.com]

Hi all,

by default the Elements Panel is divided in a vertical way. The html source on the left, and the other stuff (like styles and metrics) are on the right side.

Is there a way to split horizontally the Element Panel like Firebug does? All the content would be more readable. See the screenshots attached.

Chrome Developer Tools with Element Panel with the default vertical separation. We are running out of space.

Now the same space in Firebug can be divided horizontally. All the code is by far more readable.

Thanks for your attention

Demis Palma

[vickyc...@gmail.com]

I too would like to know how to do this, especially since I just discovered the handy "Dock to Right" option.

[PhistucK]

I like this feature request, I think it would be very useful.

You can search crbug.com for an existing issue for this feature request and star it. If you cannot find one, you can file a new issue at new.crbug.com.

(If you do find one, do not add comment like +1 or "me, too", it only hinders the development and it does not make the engineers implement the feature more quickly.)

Please, post a link to the found/created issue here when you are done.

☆PhistucK

[laurenc...@gmail.com]

I've wanted to do the same thing for a long time, and it's prevented me from using Chrome for development because Firebug's layout is so much better.

However, having played with the CSS for a bit I've managed to put together a very rough vertical/horizontal alignment by adding this CSS to the Custom.css file (<profile>/User Stylesheets/Custom.css):

#-webkit-web-inspector .source-code {

left: auto;

right: auto;

width: 100% !important;

height: 50%;

}

#-webkit-web-inspector .split-view-sidebar-right {

left: auto;

right: auto;

width: 100% !important;

height: 50%;

}

#-webkit-web-inspector .split-view-contents {

position: static !important;

}

It looks like this:

As I say this is very rough and it might break some other panels in the inspector, but it's a start. I've created a Github repo so others can contribute and improve this: https://github.com/melat0nin/chrome-devtools-vertical

It would be good to tidy up the attributes displays to be more horizontal-friendly.

[demis...@gmail.com]

It works perfectly.

For those who want to contribute, see more available selectors and their default values by browsing the URL below with Chrome:

chrome-devtools://devtools/devTools.css

However I still have a doubt. Where did you find the selectors .split-view-* since they aren't mentioned in chrome-devtools://devtools/devTools.css ?

[laurenc...@gmail.com]

What I did was open the inspector in a new window (undocked), then press Ctrl+Shift+i (Cmd+Alt+i on Mac, I think) to open up another inspector to inspect the first inspector (!). I then tweaked the styles of the first inspector until I got the layout I wanted. I then saved those altered styles into Custom.css (which updates Chrome's interface automatically - no restart required) and that was it.

It's easier to use the inspector to find the correct styles to alter, because that way you can be certain which styles are being applied in real time, rather than attempting to interpret a CSS file which may or may not include the relevant styles.

[demis...@gmail.com]

Thank you for this tip. I was used to press F12 for toggle on the inspector. A subsequent pression of F12 key toggles the inspector off.

Your way (ctrl+shift+i) always opens a new inspector instead and allows to inspect the inspector.

[vickyc...@gmail.com]

I've managed to fix the bug in the custom CSS posted above with this "inspect-the-inspector" tip. Here's the updated CSS:

#-webkit-web-inspector .elements .source-code {

  left: auto;
	right: auto;
	width: 100% !important;
	height: 50%;
}

#-webkit-web-inspector .elements .split-view-sidebar-right {

	left: auto;
	right: auto;
	width: 100% !important;
	height: 50%;

	border-top: 1px solid #ccc;
}

#-webkit-web-inspector .elements .split-view-contents {
	position: static !important;
}

Basically we add the .elements class to the selector since we want to target only the Elements panel. I've also opened a pull request on the GitHub repository here: https://github.com/melat0nin/chrome-devtools-vertical/pull/2.

[laurenc...@gmail.com]

Thanks Vicky, have merged your pull request :)

[Paul Irish]

Jared, here ya go

http://code.google.com/p/chromium/issues/detail?id=168655

On Thu, Jan 10, 2013 at 1:52 PM, jaredwilli <jared...@gmail.com> wrote:

I'm going to try and make this a setting in devtools which you can select when it is docked on the right, make the view stacked rather than split right and left. 

Is there a ticket for chrome for this at all does anyone know? 

Jared

[Tim Statler]

A ticket was opened for this recently:

http://code.google.com/p/chromium/issues/detail?id=168655

Also see Addy Osmani's related post:

https://plus.google.com/115133653231679625609/posts/Ua8a7Nuk4pb

Tim

On Thu, Jan 10, 2013 at 1:52 PM, jaredwilli <jared...@gmail.com> wrote:

I'm going to try and make this a setting in devtools which you can select when it is docked on the right, make the view stacked rather than split right and left. 

Is there a ticket for chrome for this at all does anyone know? 

Jared

On Wednesday, December 12, 2012 12:11:27 PM UTC-5, demis...@gmail.com wrote:

--

Tim Statler | Technical Writer - Chrome Developer Relations | timst...@google.com |