Question

I have a page with deeply-nested HTML elements generated from a framework. I would like to inspect it with Firebug.
At a certain depth Firebug no longer displays the element contents.

The simplest way to reproduce the issue is with this perl snippet. It will create 100 nested divs, with text every 10.

foreach $i (1 .. 100) {
  print "<div id=\"$i\">\n";
  print $i if (0 == ($i % 10));
}
print "</div>\n" x 100;

Using Firebug to inspect the text “100”, at div 96 instead of

<div id="96">
  ... contents ...

there is only

<div ="">

Is it possible to increase the depth that Firebug can cope with?

Versions are Windows Firefox 7.0.1 with Firebug 1.8.3

The “inspect element” in Chrome works fine with this example, as does F12 inspection in Internet Explorer 8.

Answer 1

First things first, as mentioned in some comments already: what framework generates that kind of depth? 🙂 Best try to solve that.

Back to your question, I would speculate the answer to your question is that the depth is determined by Firefox, not Firebug, and thus cannot be changed.

The FB addon is open source. I had never looked at it before, but glancing over this source file it seems the aria-expanded attribute is used to create trees. Speculating even more, based on this aria attribute I would guess that Firefox has that value-max set somewhere around 100.

Funny thing to note by the way, if I keep expanding in Firebug with the ‘right’ arrow key it does seem to expand all the way down to the 100th div: you can see this in the bar just above the html (and just below the {Console, Html, …} bar). It’s just the collapse/expand visualization that stops at some max depth.