Open Firefox’s Page Source In Your Editor

By Xps.     1 Comment

As a web developer, I’m constantly viewing the source code of websites, mine and yours. I look to fix bugs, improve efficiency, and learn new or interesting techniques. The Page Source viewer in Firefox is right there in the View menu or the shortcut Ctrl+U. I guess I could say the viewer does its job. It’s a basic view of the web page’s client-side code with basic tools like line wrap, syntax highlighting, and find text or line. (Too bad you can’t shrink the tab size from eight spaces to either two or four.)

If I wanted to edit the code, I’d have to copy/paste to my text editor. Wouldn’t it be nice if my text editor was also the default Page Source viewer? It’s possible in Firefox.

1. Open up Firefox’s Configuration page by typing about:config in the Address Bar. Read the prompt and click the button saying you’ll be careful. (See how to re-enable that warning prompt)
2. Shorten the list of configuration options by typing view_source in the Filter bar
3. Open the view_source.editor.path preference and enter in the full location path of your text editor. I use Notepad++, so the path I entered is: C:\Program Files\Notepad++\notepad++.exe
4. Locate the view_source.editor.external preference and double-click it to change the value from False to True.
   

Now, viewing a web page’s source code will do so in your favorite text editor instead, ready for quick editing and adjusted to your liking.

Two favorite Firefox Add-ons among web developers also include this option to specify a text editor:

• Firebug has this option in Open With Editor > Configure Editors
  
• Web Developer can be configured in View Source > Edit View Source With Applications
  

Posted in: Web Browsers