Change columns size in Firefox Developer Tools

user_1320081 0
Viewed 4265

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.

Firefox Developer Tools columns

firefox-developer-tools firefox
2 Answers

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.

user_13593430
Related