Do you like to dive into the code of a webpage just to see how it has been put together? As an aspiring web designer once, it used to be a habit for me. I believe lots of people still go into the source code of a webpage. It is a great learning tool. I still do it sometimes just to see how a media file has been embedded; or for some interesting comment information or just to see interesting meta-tag data.

But for the serious guys, the source code is often a mine of info. It's the backdoor into a competitor's SEO strategies - keyword use, design optimization etc. In brief, what's the guy doing right and what is he doing wrong.

Every browser has an inbuilt viewer, much like a notepad. Commonly found under the View menu, it displays the client side source code at the touch of a mouse. Commonly though, it is not feature rich. For instance, a feature to change the font face would have been nice. Also, a simple addition of a comment before saving the file is not possible as it is usually read only. It is merely meant to be a viewer"¦ the word "˜editor' a bit ill-chosen.

So can we get the browser to use the editor of our choice? Thankfully, most of the browsers themselves are open to the idea. Here's how we can foist our own choice on Firefox, Internet Explorer and Opera.

Mozilla Firefox

Firefox 3's default viewer is accessed from View - Page Source. It has basic options to change the text size, syntax highlighting and a feature to wrap long lines. One feature I like is that Firefox lets me see the source for a selected area of the webpage (Right click - View selection source).

But to choose another editor, let's do this:

  1. Type about:config in the address bar. Ignore the alert which comes up and go ahead.
  2. In the application preferences page, scroll to the bottom half of the page or use browser's Find (CTRL+F) to search for two values.
  3. Find and highlight view_source.editor.external. Double click and toggle it to "true".
  4. Next, just below it find and highlight view_source.editor.path. Double click on it and enter the new path of your preferred editor in the Enter string value box. If the path doesn't exist or is not executable, the inbuilt viewer will be used.
    ff-about-config

It's done!

Firefox has a host of add-ons which help to get under the hood of a webpage. Ann Smarty, a colleague here at MakeUseOf has covered seven of them quite comprehensively in an outside post at SearchEngineJournal.com. Of the 7 add-ons mentioned, only View Formatted Source is not updated for the latest version of the browser.

Internet Explorer

IE8's source viewer, accessed from View - Source doesn't add anything more than the standard options. But the inbuilt Developer Tools feature gives IE8 some extra teeth and us, an option to have an editor of our choice.

Developer Tools is a debugger which makes dissecting a webpage and its included elements like CSS, Javascript and HTML much easier. The developer tools can be opened by "“

  • Open IE8. Press F12
  • Or on the Menu click Tools - Developer Tool.
    ie-menu

It is a powerful tool and to explain it would require a few tutorials of its own. Here, we just want to change the source code editor.

  1. Open Internet Explorer.
  2. Press the F12 button to start the Developer Tools.
  3. Click on File; Choose Customize Internet Explorer View Source.
    ie-developer-tools
  4. Three options are presented: Default Viewer, Notepad, Other"¦
  5. You can use Notepad or select Other for an editor of your choice. Browse to the location of your program, select the program's executable file and click Open to set it up as the new editor.

Opera

Opera v9.64 does allow you to make changes and apply them on the fly in its source editor. The source editor is available from View - Source. Opera also gives you the option to change the default and it is easy.

  1. On the Menu, click on Tools - Preferences.
    opera-preferences
  2. In Preferences, select the Advanced tab. Under Programs, click on Edit for Choose application for viewing source.
    opera-advanced
  3. Opera gives us three choices,
    • The Opera source viewer - use the inbuilt one.
    • Open with default application - specify the path of your preferred application.
    • Open with other application - here you can browse to the program of your choice, select its executable and set it as the editor. You can also fix launch parameters for the program in the Parameter field.
      opera
  4. Click OK to close the source viewer options and set the changes.

A short note on Google Chrome...

Google Chrome does not allow us to change the default source viewer (yet!). Chrome has a Developer's section under the page icon, from where you can view the source of the current page, use Debug JavaScript function and open a JavaScript console. The source viewer itself is minimalistic with syntax highlighting, line numbers and active links.

The view source option is akin to a diagnostic kit, especially for a web developer. Therefore, it makes sense to use the better ones on the table like for instance Notepad++, SourceEdit, or even dedicated but lean HTML editors like Homesite (good but not free). For more free options look at 3 Windows Text Editors For Programmers.

As we are talking about the "˜language of code' why not also look at Damien's post on tools to clean up CSS files.

Have you changed your source viewer/editor? Or are you sticking to the default? Also let us know your own editor of choice.