Have you ever been working on an AJAX-enabled webpage, or a page with complex redirects and permissions, and tried to view its source? What you wind up getting generally looks nothing like the current state of the page in question. You are viewing its initial state, since the browser loads a fresh copy for the source view. That’s just fine if everything you need to check was all set up and ready to go when the page was initially loaded; but that is rarely the case with AJAX.
That’s all there is to it! Here’s the procedure in a nutshell:
- Create a new window object
- Write body‘s parent node (<head>) to the new document
- Replace all < with <
- Wrap the text in a <pre> element to preserve formatting
- Do it all inside a void() to avoid touching the current window
One caveat you should keep in mind—the “live” source will be different than what the “true” source looks like, since one is hard-coded text and the other is the result of your browser’s DOM hierarchy. I use this for things like determining AJAX-ified <div /> contents and such—not for determining sequential dependence in the HTML.
Update: FYI, this is now a pretty standard feature in modern web browsers’ own development tools.