How to see HTML "generated" by JavaScript?

I’m trying to evaluate several open source applications which display rather elaborate browser output generated by JavaScript. That is, when I load a page and then display the source, all I see is the bare skeleton of an HTML page with a reference to a .js file. All of the content comes from the JavaScript – not just variable content, but the fixed parts as well. Firebug shows a little more detail, but not enough to be useful.

This makes my job very difficult, because an application’s flexibility in terms of CSS changes, etc., is a big part of what I need to evaluate. I can do this with a great deal of effort by learning the internals of each application or I can do it quickly and easily by studying a few samples of generated HTML… except that I can’t see the generated HTML, because in these applications it’s invisible.

Is there a way to see the “HTML” for the entire content of one of these pages?

How are you using Firebug to view the HTML?
Normally it should show the "hard-coded"mark-up, as well as anything which is added dynamically.

Could you give us a link to one of the pages where you are having trouble?

Weird. I’m using Backbone.js which also renders the entire html dynamically and I never saw such issues.
Have you tried testing it with Chrome? Not that I think the Firefox has issues, but just as a sanity check.

>Could you give us a link…

Since you asked, of course, it’s working. Firebug is now displaying everything. I don’t know why it’s doing that now or how to make sure it will continue.

I’m opening Firebug by clicking the bug icon on the toolbar. I used to click the downarrow and select Firebug UI Location > Detached. For some reason that isn’t working now, but it doesn’t seem to affect anything else.

The example I’m working with now is the Swagger demo, for example, at http://petstore.swagger.wordnik.com/#!/user.

Although the source code in Firebug is complete (now) the source code in Firefox is very scanty. When I posted my question the source code in Firebug was similar. In the source code from Firefox, the body contains:

  1. A <form> embedded in two <div>s. This corresponds to the green bar at the top of the page.

  2. The following code, which generates everything else:

[INDENT][FONT=Courier New]<div id=“message-bar” class=“swagger-ui-wrap”>
 
</div>

<div id=“swagger-ui-container” class=“swagger-ui-wrap”>
</div>[/FONT][/INDENT]

Ginger: I did try it in Chrome, and got essentially the same results. I haven’t tried again since Firebug started working for me.

Hi there,

I find it easier to right click somewhere on the page and select “Inspect Element with Firebug”
You should then see something like the following:

Glad it’s working now, though.