Search code examples
firefoxfirefox-developer-tools

How do I stop Firefox developer tools inspector from collapsing HTML elements behind ellipsis?

enter image description here

See the "..." before "layout-1c"? Firefox seems to have some rules defined for when it should collapse a lengthy element attribute. I want to disable this. Just show me everything, always. How?

EDIT double-clicking the attribute is not good enough. It loses wrapping and makes you manually scroll through a ton. Firebug does everything right from the get-go and I'd like the same behavior for the built-in inspector.

Solution

  • In the official mozilla docs it explains how we can tweak whether to truncate or not, and also how many characters will be shown before being truncated:

    Truncate DOM attributes
    By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".

    There is a convenient checkbox in developer tools. To find it click the three dots in the upper-right corner and go to Settings:

    Screenshot