JavaScript

For topics about current BETA or future releases, including feature requests.
Post Reply
User avatar
roedygr
Rank V - Professional
Rank V - Professional
Posts: 370
Joined: Fri Feb 17, 2006 5:22 am
Location: Victoria BC Canada
Contact:

JavaScript

Post by roedygr » Sat Aug 23, 2014 11:18 am

I am gradually being forced into using JavaScript against my will. One of the disadvantages is the generated HTML is both invisible and not validated.

Is there any way to see the generated code, or to get it validated? perhaps by inserting some dummy functions.s

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3222
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: JavaScript

Post by Albert Wiersch » Sat Aug 23, 2014 3:31 pm

This is a good question but I am not aware of any good solutions.

Perhaps you could also put any JavaScript generated HTML in a "textarea" element for copying and pasting into CSE HTML Validator... but this would obviously need some manual intervention.
Image
Albert Wiersch

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 699
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: JavaScript

Post by MikeGale » Sun Aug 24, 2014 5:45 am

This is along standing problem.

There are a number of partial solutions (some browsers only, might inject some "extras"...) which in their native form involve manual intervention.

In essence the raw source disappears when the browser builds a DOM. If you write good markup, the difference will be small. For those who write tag soup and rubbish markup, the changes can be significant as the browser fixes the errors. Potentially different browsers might interpret source and changes differently, though the diversity is disappearing

Anything you use will convert the DOM to a textual format.

Here's some solutions I got from a quick search on the web, no guarantees:

Viewing generated HTML. Some crude notes 2014/08/24 20:26:14, from a web survey, not tested or analysed, some are old, none is likely to work in all browsers.

IE.
  1. Try going to the HTML tab in IE developer tools and press the refresh icon (next to the save icon), it will show the latest DOM.
    F12 -> F5 -> Ctl-S
    (Load dev tool, refresh, Save as file.)
  2. Code: javascript:window.open("").document.open("text/plain", "").write(document.documentElement.outerHTML);
Firefox:
  1. In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.
  2. Bookmarklet: javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre></html>'); win.document.close(); void 0;
Generated Source Bookmarklet.
https://www.squarefree.com/bookmarklets ... ted_source

ViewSourceChartBookmarket
http://viewsourcechart.com/

Javascript (for bookmarklets, URLBar...)
  1. javascript:alert(document.body.innerHTML)
  2. javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))
Random links
  1. http://omnicode.blogspot.co.uk/2008/05/ ... in-ie.html
  2. http://stackoverflow.com/questions/3314 ... in-firefox
  3. http://stackoverflow.com/questions/8298 ... t-explorer
I haven't dug into what the jQuery team does. Might be interesting.

A good solution would be to automate your selected suite of browsers and automatically write the content to dB, file etc. then analyse. This looked like hard work last time I investigated it, if you do it I'd appreciate some details of what you end up doing.

When I've done this sort of thing, it's manually and I analyse the content of captures with CSE. The captures go into a web site, with associated baggage like css, images etc. With many designs there is not one generated page (per web page) but several at different "stages" of the process.

You can compare source / capture of content on the wire (where server generates content) using diff tools (though formatting and casing of tags may need a little work).

Let me know how you go.

Post Reply