SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
    56
    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,941
    Mentioned
    215 Post(s)
    Tagged
    12 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
  •