SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >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:

    <div id="message-bar" class="swagger-ui-wrap">
    &nbsp;
    </div>

    <div id="swagger-ui-container" class="swagger-ui-wrap">
    </div>

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

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,347
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Quote Originally Posted by Orthoducks View Post
    I'm opening Firebug by clicking the bug icon on the toolbar.
    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:

    Noname.jpg

    Glad it's working now, though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •