[html] Best Way to View Generated Source of Webpage?

Justin is dead on. The key point here is that HTML is just a language for describing a document. Once the browser reads it, it's gone. Open tags, close tags, and formatting are all taken care of by the parser and then go away. Any tool that shows you HTML is generating it based on the contents of the document, so it will always be valid.

I had to explain this to another web developer once, and it took a little while for him to accept it.

You can try it for yourself in any JavaScript console:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

The un-closed tags and uppercase tag names are gone, because that HTML was parsed and discarded after the second line.

The right way to modify the document from JavaScript is with document methods (createElement, appendChild, setAttribute, etc.) and you'll observe that there's no reference to tags or HTML syntax in any of those functions. If you're using document.write, innerHTML, or other HTML-speaking calls to modify your pages, the only way to validate it is to catch what you're putting into them and validate that HTML separately.

That said, the simplest way to get at the HTML representation of the document is this:

document.documentElement.innerHTML

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to xhtml

How to refresh table contents in div using jquery/ajax Uses for the '&quot;' entity in HTML The entity name must immediately follow the '&' in the entity reference Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it? How to vertically align a html radio button to it's label? Image height and width not working? Removing border from table cells Enable & Disable a Div and its elements in Javascript how to remove the bold from a headline? How to make div occupy remaining height?

Examples related to firebug

How can I inspect element in an Android browser? Differences between socket.io and websockets Loading local JSON file How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML? Form inside a table Tools to selectively Copy HTML+CSS+JS From A Specific Element of DOM What is console.log? Wireshark vs Firebug vs Fiddler - pros and cons? Firebug like plugin for Safari browser .attr("disabled", "disabled") issue

Examples related to w3c

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? Are there any style options for the HTML5 Date picker? vertical alignment of text element in SVG input type="submit" Vs button tag are they interchangeable? What values for checked and selected are false? Best Way to View Generated Source of Webpage? Is there a W3C valid way to disable autocomplete in a HTML form? How do I load an org.w3c.dom.Document from XML in a string?

Examples related to web-developer-toolbar

What does status=canceled for a resource mean in Chrome Developer Tools? Best Way to View Generated Source of Webpage?