SEARCH

How-To Geek

View Webpage Source Code in Your Favorite Text Editor – Firefox

Thinking of how nice it would be if you could view a webpage’s source code in your favorite text editor while browsing with Firefox? Now you can with two simple about:config tweaks.

Open Up about:config in Your Browser Window

Type “about:config” (without the quote marks) into the address bar and hit “Enter”. Once you have the about:config page open in your browser window, it is time to fix those two about:config entries.

page-01

1. Type or copy & paste “view_source.editor.external” (without the quote marks) into the Filter Address Bar. Once the about:config entry is displayed, right click on the entry and select “Toggle” to change the value to “true”.

Note: You can also double click on the entry to do the same thing.

page-02

2. Type or copy & paste “view_source.editor.path” (without the quote marks) into the Filter Address Bar. Once the about:config entry is displayed, right click on the entry and select “Modify”.

page-03

Once you have clicked on “Modify”, you will see the following window appear asking you to “Enter string value”.

page-04

Enter the target path of your favorite code/text editor (without the quote marks). For our example, we have chosen “C:\Program Files\Editra\Editra.exe”. Click “OK” and restart your browser to complete the changes.

page-05

Note:  For those who would like to use Notepad, enter the target path “C:\Windows\System32\notepad.exe”.

Accessing Your Favorite Code/Text Editor 

Once you have a webpage that you want to see the source code for, go to the View Menu and select “Page Source”.

page-06

Once you have clicked “Page Source”, your favorite code/text editor will open up displaying all that wonderful webpage code goodness!

page-07

That is all there is to it. Have fun using your favorite code/text editor with Firefox!

Akemi Iwaya (Asian Angel) is our very own Firefox Fangirl who enjoys working with multiple browsers and loves 'old school' role-playing games. Visit her on Twitter and .

  • Published 07/7/09

Comments (16)

  1. lxtips

    Hi, this almost works in Ubuntu. I added /usr/bin/gvim as the path and changed the ‘external..’ value to true. Gvim opens but there’s nothing it. Any clue?

  2. lxtips

    Hi again, I added %u and it’s all good. Thanks for the great tip and the great site :).

  3. Wallace

    Nice, it works very well.
    Thanks for the really nice trick. :)

  4. lisarod

    Or use the ViewSourceWith add-on at https://addons.mozilla.org/en-US/firefox/addon/394.

  5. Joe

    Awesome Tip! Thanks. Works well.

  6. Dinesh

    If ur on a Mac here is how u need to give the path:

    For TextEdit:
    /Applications/TextEdit.app/Contents/MacOS/TextEdit

    For Smultron:
    /Applications/Smultron.app/Contents/MacOS/Smultron

  7. John Hrvatin

    This is a great tip! I work on the developer tools for IE and people asked to do this all the time so we added some UI for it.

    Here’s how to do this in IE8:
    From the developer tools (press F12 to open), click File->Customize Internet Explorer View Source. You can choose the built-in viewer, Notepad, or provide the path to any other viewer.

    Hope this helps!

    John Hrvatin

  8. jfb3

    @Dinesh,
    That doesn’t seem to work for me.

  9. Rik

    Thiis works for me, but on pages such as this page which has a loooong page title, it will not create the file. I get a dialog box telling me so. On pages with shorter titles it works. I am pointing it to Notepad++. It always launches the app ok.

  10. Ralph

    An easier approach if using Firefox is to install the ViewSourceWith addon….

    https://addons.mozilla.org/en-US/firefox/addon/394

  11. Joe

    I found new editor called NaviCoder Editor, can I use with Firefox?

  12. Asian Angel

    @Joe – That should work fine with Firefox. ^__^

  13. BobJam

    Can’t get it to work in Ubuntu.

    Using bluefish, and set the path to “/usr/bin/bluefish” (Without the quotes, of course . . . and that IS the path shown in my file browser).

    Out of a terminal, “bluefish” does it. In the menu properties, it shows “bluefish %F”. So I tried just “bluefish” (which I didn’t expect to work, and it didn’t). Then I tried “/usr/bin/ bluefish %F”, and that didn’t work either.

    Then I tried backslashes instead of forward slashes. Didn’t expect that to work, and it didn’t.

    And I tried “. .” preceding the path, thinking that maybe it wasn’t seeing the root. That didn’t work.

    Since I have the home directory in a separate partition from the root, I considered that that may be a nuance to this, so I tried “/home/usr/bin/biuefish”. Still no joy.

    BTW, after each iteration, I restarted Firefox, and then rebooted the whole system if that didn’t work.

    So my head is spinning from all these iterations, restarts, and reboots.

    Just flat out can’t get it to work.

    What am I missing?

    What am I missing?

  14. BobJam

    Nevermind . . . I got it. Wasn’t doing step one. Once I did that, “/usr/bin/bluefish” was fine.

  15. Stringkiller

    Super Information! Thanks. Works well.

  16. Ric

    I had forgotten which config fixed this. THANKS! for putting this up so I could be reminded. Works in Ffx 4.0 too.

    BTW, just search(“Filter”) for ” view_source.editor ” and all 3 available options will be available to edit without having to search(filter) again.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!