Pro Tip #6: Using an external editor in Firefox

Do you ever view a web page's source code? Maybe you do web development, looking for coding examples, or you are just curious? I frequently do all of those so I use Firefox to view the code of a web page. But I find the default viewer to be very plain and lacking of nice features that I enjoy in other text editors on my system.

Fear not, because there is a hidden feature of Firefox that allows you to use the program of your choice to view and edit web code. You need to tweak the internals of Firefox but do not be frightened, as it's easier than you think. Here's how to do it:

First open Firefox and enter this into the address (URL) bar:

   about:config

It may warn you about voiding a warranty once you do that but that is just a harmless warning. about:config is very powerful but changing the wrong parameter could render your browser inoperable, so it's a valid warning. Besides, Firefox has no warranty to begin with. Forge on!

There are hundreds of parameters you can change here but we are only wanting to change two of them. In about:config you will see a search bar. Type view_source.editor into that search bar and it will filter the parameters down to a few.

Here is where we will configure our editor of choice. First double-click on view_source.editor.external to toggle it to True. Then double-click on view_source.editor.path and you can now enter the path to your favorite editor. I'm on Linux and like to use Kate so I would enter:

/usr/bin/kate

MacOS users may like to use Coda so here's an example for Coda:
/Applications/added/Coda.app/Contents/MacOS/Coda

Windows can choose their favorite editor as well if you can figure out the path to it.

Restart firefox and now you can use "View Page Source" or Ctrl-U (Or Command-U on Mac) to open the web code into your favorite editor.



--Solar1 is all about "Fun and helpful things" so these tips encompass a wide variety of topics.