Resize columns in Firefox Developer Tools

Question

Can I change the width of columns in Firefox Developer Tools? How can i do this?

When I point above the edge of the column (e.g. Status, etc. in the screenshot), there is no tool for resizing so that I can see all the content.

Answer 1

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

Original answer : As you probably know, there is no way to resize a column (FF57 columns), the only option you have is to hide / show the columns. this is easy to do, just right-click on any column, you should see a list of columns and you can select / deselect them.

But what is this ?! no, you can resize the column (s) using CSS (hack developer tools), here are the steps:

1. Open developer tools (using F12 or ...)
2. Click on the gear button in the upper right corner

3. Check out these 2 options:

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

4. Press Ctrl+Shift+Alt+I and click OK (when prompted for security) to open the browser toolbar.

5. You should be able to inspect Dev tools using the open Dev tools panel of your browser.
6. Play with CSS (same as with a regular web page)
7. Save custom CSS in userChrome.css file

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

Here are the steps to create / modify userChrome.css :

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

To demonstrate how this works, I changed the background color of one of the Network tab columns to red.

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

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

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

Answer 2

Although the feature request and its dependency seem to have made some progress, the latter was created in 2016, so we can safely assume that it may take some time before Firefox supports column resizing by default.

In the meantime, here is the CSS that I 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 increase the File column, but found that decreasing the width of the Status and Method columns brought a big improvement instead. Styles also remove side margins from column headings to avoid truncating text 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

Please note that if you reduce the width of the column too much, this can lead to a misalignment. See Mehdi's answer if you don't know where to save your userChrome.css or if you need to find classes of other columns.

Answer 3

No, It is Immpossible. Firefox is still behind Chrome in terms of UX tools. By the way, I was also looking for an answer and browsing a Google page, just like you ...