View Source
While you can view the original source of a web page by selecting one of the many view source options available in your browser, they show you the original HTML and do not show any changes to the page that have been applied via JavaScript. All modern browsers supply developer tools that will allow you to view the page in tree structure form as it is in the Document Object Model. Sometimes it would be useful though to just display the actual HTML source of the page as it is currently with whatever changes that the JavaScript has already applied. We can easily add functionality to do this to our web browser by attaching some JavaScript to the browser itself either as a bookmarklet or as a user script.
In this case since we want to write out an entirely new web page displaying the HTML from the current page as text we have one of the rare situations where it actually makes sense to use document.write() since that is exactly what that command does if you call it after a web page has finished loading. It makes sense to use this command when running scripts attached to the browser where it doesn't make sense to use it with scripts attached to a web page.
To attach a view source bookmarklet script to the favorites/bookmarks menu in the browser just right click on View Source Bookmarklet and select "Add to Favorites" or "Add to bookmarks" from the menu. Then when you want to view the current source of a web page to see how it applied your JavaScript DOM commands you simply select this option from the favorites/bookmarks menu. (Note that offering bookmarklets for download is the only legitimate use for attaching JavaScript to the href attribute rather than an event since we want our visitors to download the code and not to run it straight away).
The better alternative for those browsers that support them is to install a userscript into your browser that is attached to all web pages. This one adds a "Source" link to the bottom left of every page that not only displays the page source but it also makes all the references to CSS, JavaScript and images into links. To install the user script in Firefox (after ensuring you have the Greasemonkey extension installed) simply right click view source user script and select "Install User Script". To install the user script in Chrome simply left click on the above link after making sure that TamperMonkey is installed. To install in Opera left click the link and then select "Save As" from the "File" menu and save the script into your user script folder. A slightly modified version of this script should also be able to be run in Internet Explorer if you install the IE7pro plugin.
Where to get User Script Extensions
If you install the appropriate extension or plugin into your web browser you can attach scripts such as the view source script above directly into the browser and have them run on whatever web pages you specify in the commands at the top of the script.
- GreaseMonkey - the extension for Firefox.
- TamperMonkey - the extension for Google Chrome and Chromium.
- GreaseKit - the plugin for Safari.
- IE7Pro a plugin for IE6 and later that provides lots of extra features omitted from IE including allowing you to attach JScript directly to the web browser.
Note that no extension or plugin is necessary to attach scripts to the Opera web browser as that browser has the functionality built into the browser itself.
This site is © copyright Stephen Chapman - Felgall Pty Ltd 2011-2015.
Privacy Policy | Terms and Conditions
You are welcome to use any the example JavaScript from this site in the scripts for your site or any that you develop for others but may not use the longer example scripts that contain a copyright notice in any other way without permission.