Browsers Windows

How To Change Default Webpage Source Editor Of Browsers

Saikat Basu 05-06-2009

thumbnailDo 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 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

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
  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 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 3 Windows Text Editors For Programmers Read More .

As we are talking about the “˜language of code’ why not also look at Damien’s post on tools to clean up CSS files 11 Useful Tools to Check, Clean, and Optimize CSS Files Want to improve your CSS code? These CSS checkers and optimizers will help improve CSS code, syntax, and minify your web pages. Read More .


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

Related topics: Internet Explorer, Mozilla Firefox, Opera Browser, Programming, Text Editor.

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Edward
    November 21, 2009 at 7:10 am

    Opera default source view offers edit and see on the fly. Use Tools | Advance } Reload from cache view changes made with an external editor. Annoyingly, Opera removed file extensions so your external editor is generally clueless by default. Also annoyingly, Opera default source viewer is missing line numbers. Go figure!

  2. e-CoverProduk
    June 6, 2009 at 10:11 am

    i agree with @saikat, i using pspad, it easy to use, and very light with windows.

  3. hendri
    June 5, 2009 at 12:41 pm

    i will try this because sometimes i use notepad++ for default source editing

    • Saikat
      June 5, 2009 at 1:53 pm

      Everybody has their own favorites. Notepad++ is preferred by lots of people. I use Notepad2.