View Rendered Source Chart (Firefox Extension)
WHAT IS RENDERED SOURCE?
STATIC HTML GETS INTERPRETED TOO
The VRS extension allows web developers to view and chart interpreted (rendered) source, which is source as the browser has interpreted it - not the source as it is in its original form.Picture 1. Source View Using Firefox's built-in "View Page Source"
Picture 2. Source View using extension "View Rendered Source Chart"
This is the output of the scripting in picture 1.
Script contents are replaced with script markers (...),
but now script output is not just visible, it's charted!
This interpreted source, otherwise known as rendered source, includes not just HTML generated by JavaScript and XML, but static HTML too. Yes, static HTML is also interpreted by the browser's rendering engine, just like JavaScript is interpreted by the scripting engine.
PRE-RENDERED VS. POST-RENDERED STATIC HTML
The two modes in which the browser will render HTML are called Strict Mode and Quirks Mode. Which mode is used is determined by the doctype and/or how true the HTML in a page is to its doctype. At least this is the case on paper. Through using VRS, I've discovered that sometimes the browser will make "corrections" seemingly at will.RENDERING ENGINE CORRECTIONS
This distinction between modes is due to the rendering engine's corrections which are made to any malformed source it encounters. For example, if you're missing a closing div or form tag, the browser will insert one for you, in a location dictated by the location of its opening tag partner. If you're missing an opening div or form tag, the browser will "delete" its closing partner tag and in some cases, delete the would-be pair's contents too. Here's the kicker: these corrections are also made to malformed HTML which has been generated by JavaScript.XHTML AND RENDERING ENGINE CORRECTIONS
Rendering engine corrections get even more interesting with it comes to standalone XHTML tags. The browser converts these standalones to a container tag pair (< form / > becomes < form >< /form >). The closing tag will be inserted either according to the opening tag's location within its containing element, or before the closing body tag. Likewise, < br / > tags become < br > tags.CORRECTIONS = END RESULT FOR END USER
It is these corrections that end up being responsible for the way a page is displayed to the end user, and why it is vital to be able to analyze source at this stage. This is especially true in the case of dynamically generated HTML, which cannot otherwise be validated.INTERPRETED SOURCE VALIDATION - NOT HTML VALIDATION
The end result of the rendering engine's work is clearly displayed in the VRS window. For this reason, VRS is unmatched in its ability to shed light on WHY your page is displaying the way it is; because it shows you the browser's INTERPRETATION - corrections and all - of the original source. This is also why VRS does not directly show you any malformation errors in the original source the way a validating engine such as the w3c.org's engine does.Chuckles
It is somewhat comical, because of all the validation rhetoric we are bombarded with, that in the end, the browser does what it wants with code regardless of its validity. Who knew?View Rendered Source Chart