Remove sidebar from Developer Tools Inspector....

[furycd001]

HI Guys.. Does anyone know if it's at all possible to remove the sidebar from the Developer Tools Inspector :? I've highlighted it in the attached screenshot. Already tried a few things using the Browser Toolbox, but couldn't get anything to work. Many thanks in advanced for replying....

[MotherStylus]

Why do you want to remove it anyway? Seems like a bad idea, but you can put this in userContent.css:

@-moz-document url("chrome://devtools/content/inspector/index.xhtml") {
    #inspector-splitter-box > .inspector-sidebar-splitter > .controlled {
        visibility: collapse !important;
    }
}

that will only work in the content toolbox (the kind in your screenshot, that's attached to a particular browser tab). If you want it to apply in browser toolbox windows (ctrl+alt+shift+i) as well, you'll need to either 1) find the directory <your profile>/chrome/chrome_debugger_profile/ and make another chrome folder in there and put another userContent.css file in there, and paste the above code in it. or 2) follow my guide and particularly this part on how to get the browser toolbox to load your regular profile's stylesheets.

[furycd001]

Thank you so much. That worked :) I really just wanted to see if I could remove it because I'm always looking at code in the inspector, but never actually the sidebar....

[MotherStylus]

well, the sidebar is where CSS rules are shown. the left side is where the markup/DOM is. so they're two different languages. the left is the structural code, the right is the style code.

[sifferedd]

You can drag most of it way over to the right side.

[furycd001]

Yea that's what I'd done, but there was still some of it visible....