Best Way to View Generated Source of Webpage

Best Way to View Generated Source of Webpage?

[updating in response to more details in the edited question]

The problem you're running into is that, once a page is modified by ajax requests, the current HTML exists only inside the browser's DOM-- there's no longer any independent source HTML that you can validate other than what you can pull out of the DOM.

As you've observed, IE's DOM stores tags in upper case, fixes up unclosed tags, and makes lots of other alterations to the HTML it got originally. This is because browsers are generally very good at taking HTML with problems (e.g. unclosed tags) and fixing up those problems to display something useful to the user. Once the HTML has been canonicalized by IE, the original source HTML is essentially lost from the DOM's perspective, as far as I know.

Firefox most likley makes fewer of these changes, so Firebug is probably your better bet.

A final (and more labor-intensive) option may work for pages with simple ajax alterations, e.g. fetching some HTML from the server and importing this into the page inside a particular element. In that case, you can use fiddler or similar tool to manually stitch together the original HTML with the Ajax HTML. This is probably more trouble than it's worth, and is error prone, but it's one more possibility.

[Original response here to the original question]

Fiddler (http://www.fiddlertool.com/) is a free, browser-independent tool which works very well to fetch the exact HTML received by a browser. It shows you exact bytes on the wire as well as decoded/unzipped/etc content which you can feed into any HTML analysis tool. It also shows headers, timings, HTTP status, and lots of other good stuff.

You can also use fiddler to copy and rebuild requests if you want to test how a server responds to slightly different headers.

Fiddler works as a proxy server, sitting in between your browser and the website, and logs traffic going both ways.

How to view generated HTML code in Firefox?

In Firebug's HTML tab, right-click the root node and select "copy HTML". Then paste to a text editor.

Without Firefox Add-Ons, you could use a bookmarklet like this:

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;

View generated source in IE 10

Just press F12. If the DOM was manipulated via AJAX, you'll need to use the blue refresh button per the comments below.

how to get fully computed HTML (instead of source HTML)?

With Firebug's HTML tab, you can right click on the <html> element, and click "Copy HTML".

You can do the same thing with Developer Tools in Chrome/Safari.

viewing actual source code of a website

Well, if you select "view source" you see the actual HTML source code of the page in your address bar. However, it might be that the page(s) you want to view are "obfuscated" by having embedded code which loads external content and puts it in your HTML.

If you still want to automatically parse such a page in a "nice" you need to run a whole HTML interpreter like for example Webkit - a hell of work, and in principle what you are doing with "inspect element". The other way is that you find the lines in the page-html that load the external contents and then in turn load them on your own. If you are lucky this is not obfuscated on purpose and kind of easy to achive for small tasks.

However, if you need the whole DOM structure, you should think about implementing one of the browser engines...

Is there a way to view the source of a web page AFTER all jquery scripts have run?

Firebug will show the state of the DOM as it is in the current point in time:

alt text

(source: getfirebug.com)



Related Topics



Leave a reply



Submit