Change columns size in Firefox Developer Tools

Question

Is it possible to change columns width in Firefox Developer Tools? How can I do it?

When I point over column edge (like Status, etc. on the screenshot) there's no resize tool so I can see whole content.

Answer 1

Update: This feature is now available and enabled by default in Firefox 67. You can disable it (are you crazy?) using devtools.netmonitor.features.resizeColumns flag.

Original answer: As you probably know there is no option to change the column(s) size (as of FF57), the only option you have is hide/show columns. it's easy to do, just right-click on any column, you should see the list of columns and can select/un-select them.

But that's it?! no, you can change the column(s) size using CSS (hack the dev tools), here is the steps:

1. Open up the dev tools (using F12 or ...)

2. Click on the gear button, up right corner Go to Settings, shortcut: F1

3. Check this 2 options:

   • Enable browser chrome and add-on debugging toolboxes
   • Enable remote debugging

4. Hit Ctrl+Shift+Alt+I and Click OK (on security prompt) to open Browser Toolbox

5. You should be able to inspect the Dev tools using opened Browser Toolbox

6. Play with CSS (same as you do with normal web page)

7. Save your custom CSS in userChrome.css file

Need more info about userChrome.css, head to userchrome.org

Here is steps to create/modify userChrome.css:

• Open up about:support
• Click on Open Folder (in Profile Folder row)
• Open/Create chrome directory
• Open/Create userChrome.css file
• Do what I said in first section

To demonstrate how it works, I change the background color of one of Network tab's columns to red.

And here is my userChrome.css file content (for above example)

.requests-list-file.requests-list-column {  
    background-color: red !important;
    color: #fff !important;
}

I used !important just for time's sake, don't use of that if you can