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 Toolbox -
You should be able to inspect the
Dev tools
using opened Browser Toolbox -
Play 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