Hi all, I would like to inspect the Frame Tree (or Render Tree: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction) in real time while browsing with Firefox.
I first tried to access this tree with JavaScript or a browser addon. It seems that this information is not accessible at this level. With document.elementFromPoint() or document.elementsFromPoint() in Chrome it may be possible to re-construct the Frame Tree but this is not optimal. Another way I tried to approach this is the re-implement the CSS stacking mechanism in JavaScript (https://github.com/Jip-Hop/visuallyOnTop). But this is slow, redundant and needs to be maintained as behavior changes. I looked around in about:config. The closest thing I found was enabling layout.display-list.dump. With Firefox launched from the Terminal, the display-list is dumped in real time. It's almost what I need except that this is only output for elements visible in the viewport. I need to inspect the entire Frame Tree. The next thing I tried was installing FirefoxDeveloperEdition, hoping this version would somehow have extra tools to access this data. But it seems this version of Firefox is oriented towards debugging websites. Dumping the Frame Tree is probably possible when debugging the browser itself (Debugging Gecko Core). I read here: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Debugging_a_Performance_Problem#Layout_Debugging that I could enable this functionality by defining DEBUG_FRAME_DUMP in layout/generic/nsFrameList.h. So I downloaded the Firefox source (nightly), built Firefox Nightly and tried to dump the Frame Tree. I didn't manage to dump the Frame Tree using lldb... I followed these guides: http://mcc.id.au/blog/2014/01/lldb-gecko https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_on_Mac_OS_X https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_Mozilla_with_lldb I tried with Firefox, FirefoxDeveloperEdition and the nightly build (ran lldb from Terminal as well as Xcode). I was able to attach lldb to the browser, but not output a Frame Tree dump. The code for the nightly build was unmodified. When I tried to define DEBUG_FRAME_DUMP in layout/generic/nsFrameList.h (by uncommenting a block of code) the build failed. I noticed when debugging with lldb, the browser hangs until I quit lldb. I want to dump and inspect the Frame Tree in real time. So locking the browser with a debugger like lldb may not be the way to go after all. So what are the possibilities for dumping the Frame Tree in real time? It would be awesome if it could be done from JavaScript in the browser (without being super slow), but logging to a file or outputting to the Terminal in real time are also acceptable solutions. Also it would be great if it's available from the default Firefox or FirefoxDeveloperEdition apps, as it feels like a lot of trouble to make custom builds and edits to enable this functionality. I'm using the latest versions of Firefox on Mac OS X 10.10. Looking forward to your replies. Thanks in advance. Jip _______________________________________________ dev-platform mailing list dev-platform@lists.mozilla.org https://lists.mozilla.org/listinfo/dev-platform
