How To Change Default Webpage Source Editor Of Browsers

Ads by Google

thumbnail   How To Change Default Webpage Source Editor Of BrowsersDo 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

Ads by Google

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   How To Change Default Webpage Source Editor Of Browsers

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   How To Change Default Webpage Source Editor Of Browsers

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   How To Change Default Webpage Source Editor Of Browsers
  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   How To Change Default Webpage Source Editor Of Browsers
  2. In Preferences, select the Advanced tab. Under Programs, click on Edit for Choose application for viewing source.opera advanced   How To Change Default Webpage Source Editor Of Browsers
  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   How To Change Default Webpage Source Editor Of Browsers
  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.

Ads by Google

14 Comments - Write a Comment

Reply

hendri

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

Saikat

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

Reply

e-CoverProduk

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

Reply

Edward

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!

Your comment