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

Answer 2

While there seems to be some recent progress on the feature request and its dependency, the latter was created in 2016 so it's fairly safe to assume it could be a while yet before Firefox supports column resizing by default.

In the meantime, here's the CSS I've added to my userChrome.css:

.requests-list-header-button {     padding-inline-start: 0px !important;     padding-inline-end: 0px !important; } .requests-list-method {     min-width: 30px !important; } .requests-list-status {     min-width: 40px !important; } .requests-list-file {     min-width: 100px !important; } 

I wanted to enlarge the File column, but found that reducing the width of the Status and Method columns instead made a big improvement alone. The styles also remove side padding from the column headers to avoid the text being truncated with ….

These are the classes for the default columns:

• requests-list-status
• requests-list-method
• requests-list-file
• requests-list-domain
• requests-list-cause
• requests-list-type
• requests-list-transferred
• requests-list-size
• requests-list-waterfall

Note that if you reduce column widths too much, it may throw off the alignment. See Mehdi's answer if you don't know where to save your userChrome.css or you need to find classes of other columns.