Hide the right pane in the Inspector tab

[ryanmk54]

In old versions of Firefox, in the Inspector tab of the dev tools, the buttons to toggle on the 3-pane inspector used to hide the right pane. It would be nice if there was an option to hide the right pane completely to give more room for the HTML element nodes. When selecting an element while debugging the JavaScript in an AngularJS app, the right pane just gets in the way. The right pane is only useful while I am editing CSS.

Will you please bring back the option to hide the right pane completely?

[pbro]

Thanks for the feedback.
We aren’t planning on bringing this option back at the moment.
But I’d like to understand a bit more of the issue you’re having so we can take it into account while working on new features for the inspector.

• Do you mostly use DevTools docked to the side of the browser? Or bottom? Or separate window?
• How wide (approx) is your DevTools panel?
• In fact, a screenshot of your typical window setup would be helpful to understand what kind of space problem you’re running into.
• If you make the side panel as small as it can be, is that still not good enough?
• Would it be ok if it were even smaller, or would you still want it to be hidden?
• Do you still use the side panel from time to time, or never?

Thanks for your help!
Patrick

[ryanmk54]

Do you mostly use DevTools docked to the side of the browser? Or bottom? Or separate window?

I prefer docking DevTools to the bottom or the side, because then the DevTools stay with the tab I am looking at. For example, if I have DevTools open for multiple tabs, it will only show DevTools for the current tab. I sometimes get confused which DevTools window goes to which tab.

I often find that I want a lot of room for DevTools and the web page. In these cases I use DevTools in a separate window.

How wide (approx) is your DevTools panel?

When I dock DevTools to the side, I like to make it about half the size of my browser. I usually have my browser maximized on a 1920 x 1080 monitor.

In fact, a screenshot of your typical window setup would be helpful to understand what kind of space problem you’re running into.

I’ll add screenshots of DevTools to the side and the bottom

If you make the side panel as small as it can be, is that still not good enough?

It probably is small enough. It just looks ugly when it is as small as it can be because the content in the side panel is squished and cluttered.

Would it be ok if it were even smaller, or would you still want it to be hidden?

If I could resize it smaller, that would be cool. If I could minimize, it would be even better.

Do you still use the side panel from time to time, or never?

When I am debugging CSS, I use the side panel all the time. When I am debugging JS, I want the side panel to get out of the way. I select an element in the inspector, then do s = angular.element($0).scope() in the split panel console. Sometimes I keep the inspector open to select a different element or if I need the console to be bigger I just switch to the console tab.

[ryanmk54]

[pbro]

Thanks a lot for these details. We’ll make sure to take them into account while improving the inspector’s layout.

[ldetomi1 (Luca)]

It was a little different request but it’s in a some way related, because more general. I’d like to undock each pane in a way very similar to tabs management of Firefox browser itself.

Imagine to drag&drop any tab of Developer tool and be able to undock it, move it on a different screen, place at side of browser window while rest of Develop tools remain on bottom…

[vallhonr (va)]

I agree with ryanmk54. I’m a css whiz and I need full width for the first 2 panes.

[jscher2000]

@vallhonr

I need full width for the first 2 panes.

Close the third pane using the button at its upper left:

[Alin_Munteanu]

of if i can set the right panel to the bottom whenever instead of right side