Eat My Business

So,

• you are viewing a web page using the Firefox web browser (mine is version 3.0.15), and
• you want to view the original source code of that page (e.g the, client-side*, HTML document)

The way to do this differs depending on the method that was used to request the page

Whilst viewing the page (that you want to view the source of) - do the following:

• If you arrived at the page using a GET method:
  (i.e. you came to the page by typing a web address into the address bar or by clicking on a simple web link)
  1. Do the following:
     • From the Firefox Menu Bar,
       Click: View > Page Source

     OR

     • Using the Keyboard
       Type: CTRL+U
  2. The source code should open in a new window
• If you arrived at the page using a POST method:
  (i.e. can happen after you filled in a web form) :
  1. You need to have set up Firefox in a special way before the page loaded - see requirements below.
  2. From the Firefox Menu Bar,
     Click : Tools > Firebug > Open With Editor > [click the editor name]
  3. The source code should open in a new window

Requirements to view source of a POSTed page in Firefox without having to do a reload

You need:

• Firefox Web Browser
  Note: I am using Firefox version 3.0.15 - so this how-to guide may, or may not, be applicable depending the version you are using. Try it and see.
• The “Firebug” Add on for Firefox must be installed and enabled.
  I am using Firebug version 1.4.3
  See more about add-ons at: https://addons.mozilla.org
• Some Text Editor on your machine
  e.g Windows Notepad or Programmer’s file Editor

Not got ‘em?

• If you do not have Firebug, or
• If you do not have a text editor setup in Firebug

read on…

How to Set it Up

1. Optionally - Bookmark or print this webpage ‘cos your browser may have to restart at some stage during these steps.
   
   
   

2. Install and enable the Firebug add-on:
   In Firefox Browser, Click: Tools > Add-ons > Get Add-ons > Browse All Add-ons > go searching for “Firebug” and follow instructions from there
3. Open up Firefox, if not already open, so that we can set up the text editor in Firebug
4. Tell Firebug Which Editor to Use:
   In Firefox Browser, Click: Tools > Add-ons > Open With Editor > Configure Editors…
5. In the Configure Editors dialogue box, click: ‘Add’
6. In the Editor Configuration dialogue box,
   Fill in as follows, then click OK:

   Name

   [just a nice name of your choosing to describe the text editor that you want to use ]
   e.g “My Windows Notepad”

   Executable

   [Click ‘Browse…’ to locate the path to your text editor on your computer]
   e.g. On my Windows XP PC, I browsed to “My Computer > Local Disk (C:) > WINDOWS > NOTEPAD.EXE” to add the path to notepad.exe

   Arguments

   [I just left this blank]

   Graphic Example

   

7. That’s it. You should now have Firefox set up to be able to view source code without having to do a reload of the web page.

Background to this Blog Post

One annoying “feature” of Firefox is that it seems that you cannot view the source code of a page (that has been returned after a POST request) without having to repost the request. If you try the usual technique (outlined for the GET method, above) - it won’t work. Instead you get an error message or dialogue box asking you if you want to re-send the request. It offers options to “Resend or Cancel”:

“To display this page, the application must send information that will repeat any action (such as search or order confirmation) that was performed earlier”

Generally, a POST is used for actions that you do not want to perform twice - so it is very annoying when you want to dig up an error in the source code on these kinds of pages. A re-post does not always return the same source code.

The, slightly convoluted, technique (outlined for the POST method, above) worked for me.

If you know of an easier way, then please add a comment below.

* Foot Note: The tutorial above talks about client-side source code, only. You cannot view the server-side source code of a web page unless something has gone horribly wrong on the website’s server. This is because server-side source code does all its pre-processing behind the scenes and then outputs the web resource (html, xml, image, css etc) for the browser.

This entry was posted on Wednesday, November 4th, 2009 at 10:53 pm and is filed under Open Source, practical webmaster tips, web design, tutorials, how to / guides, firefox, firebug, view source. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.