Change columns size in Firefox Developer Tools
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:
Open up the dev tools (using F12 or ...)
Click on the gear button, up right cornerGo toSettings
, shortcut:F1
Check this 2 options:
Enable browser chrome and add-on debugging toolboxes
Enable remote debugging
Hit
Ctrl+Shift+Alt+I
and ClickOK
(on security prompt) to open Browser ToolboxYou should be able to inspect the
Dev tools
using opened Browser ToolboxPlay with
CSS
(same as you do with normal web page)Save your custom
CSS
inuserChrome.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
(inProfile 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
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.