View Source User Script

When you write Javascript programs that will alter the content of your web page then there will be occasions where the results of the changes that the Javascript applies to your page are not exactly what you hoped for. When this happens you probably wish that there was a way that you could view the modified source of your web page to see what the Javascript code has actually done. In most cases a Javascript "View Source" bookmarklet installed into the bookmarks menu of your browser can obtain the modified source for you in a popup window but if you have popups disabled or use frames on your page then that option wont work.

The solution is to embed a "View Source" link into the bottom of each of the pages on your site when they are viewed in your browser but which don't actually form part of the page that other people see. Selecting that link can then simply open the source of the current page or frame in the same window or frame it is already in thus bypassing any of the problems associated with the bookmarklet. You can then see how the page source appears to the browser after all Javascripts have been run.

This solution comes to us courtesy of the ability of modern browsers permitting us to install Javascripts into the browser itself that will run on those web pages that we select. The user Javascript that adds this link to our pages just need to be installed into the appropriate location on your computer to work with Opera (which has support for user Javascripts built in) or Firefox (with the Greasemonkey extension that adds support for user Javascripts).

The viewsourcelink.user.js script just needs to be installed into your particular browser. For Firefox/Greasemonkey simply right click the link and select "Install User Script". With Opera the easiest way is to go into the link and select "Save As" from the "File" menu to save the script into your user script folder.

You only need to make one change to the script to get it to work for the web pages on your site. Simply find the line near the top of the script that reads:

// @include       *

All that you need to do to get the script to work specifically with your site is to replace the asterisk with the address of your site, for example:

// @include       http://javascript.about.com/

If you are working on more than one site then you can easily set the script to add the link for all pages on each of your sites by repeating that include statement as many times as you need in order to specify all of the sites that the script is to run on.

// @include       http://javascript.about.com/
// @include       http://www.felgall.com/

Note that this user script is provided for use as as an aid to debugging Javascripts that modify web pages and should not be used for any other purpose.