While Internet Explorer is popular with users, Firefox is the best browser for Web developers. I continue to discover and take advantage of the myriad of add-ons available for Firefox. I recently discovered two tools — View formatted source and View Source Chart — for viewing and working with the source code for pages viewed within Firefox.

The need

One of the more frustrating aspects of Web development is debugging. The disconnected nature of a Web page makes it hard to always see what is happening within the browser. There are other add-ons for debugging and development tools like Visual Studio that provide a way to step through an application’s source code, but peeking inside the page is often necessary to get an idea of what is happening.

All browsers include a menu option that allows you to easily view the page source. That is, the markup (including JavaScript and CSS) that comprises the page and defines how it is presented and responds to user input. Figure A shows the Page Source option selected from the Firefox View menu for the TechRepublic home page.
Figure A

Figure A: Page Source of the TechRepublic home page viewed in Firefox.

The Page Source feature color codes the various aspects of Web page code, but it can still be a bit hard to read, especially for large amounts of code. Firefox supports a Search function, [Ctrl]F, that allows you to easily find one or more occurrences of a phrase, but its functionality stops there.

Lately, I have been dealing with an older application that makes extensive use of HTML tables for layout and JavaScript for features on the page. It has been frustrating to view the source code of these pages to see what is happening with the page in the browser, so I turned to two Firefox add-ons for relief.

View formatted source

The View formatted source tool makes the page source code easier to read. It displays the formats and color codes the source code. In addition, optional CSS information for each element is clearly visible. This includes inline CSS, as well as any CSS definitions included in the page or loaded externally.

This add-on is an excellent tool for tracing how CSS is being used on a page. It allows you to see exactly which CSS rules match for an element. The CSS rules are displayed with their file name and line number.

It’s easy to download this tool and then install with the Firefox add-ons feature, which makes it easy to add and administer add-ons. Firefox restarts after it has been downloaded and installed. Once installed, the View formatted source add-on is available via a context pop-up menu on the page, the browser’s View menu, or the [Ctrl][Alt]U key combination. Figure B shows it opened for the TechRepublic home page.
Figure B

Figure B: Using the View formatted source tool on the TechRepublic home page.

A couple of features visible in Figure B are worth noting. First, block elements may be hidden or expanded to view their contents. The code view is based upon what is rendered in the browser, so you will see anything dynamically created or altered by JavaScript on the page. This allows you to easily take a peek inside the page to get an idea of what is happening.

Another great feature of the tool is the ability to use inline mode, which places boxes around block elements within the browser page. You may click on one of the block elements to view its source code in the separate window as shown in Figure B. Figure C provides a look at the inline mode enabled with the TechRepublic home page loaded.
Figure C

Figure C: The inline mode of the View formatted source tool in use.

View Source Chart

The View formatted source tool is great, but I went a step further and installed the View Source Chart add-on to be used in conjunction with View formatted source.

Like other Firefox add-ons, View Source Chart is easily downloaded and installed. Once installed, View Source Chart is available via a context pop-up menu on the Web page or via the browser’s View menu. When used, the add-on provides a pretty color-coded chart of the source code of a Web page. Figure D offers an example of the source code for the TechRepublic home page.
Figure D

Figure D: The View Source Chart add-on used on the TechRepublic home page.

The visual presentation of View Source Chart simplifies the scanning of source code for certain elements or code. The boxes placed around block elements are collapsible, making it easy to navigate the source code. The indentation of blocks allows you to quickly see how deep an element is nested within other elements and on the page.

Like the View formatted source tool, View Source Chart displays source code after the page has been manipulated by any JavaScript on the page.

While View Source Chart is a great tool for examining the code for a page during development, it is also can serve as an aid in teaching about the structure of a Web page. The visual presentation makes it easy to see the overall page hierarchy and how items nest. A quick glance at the vertical lines (from boxes surrounding block elements) on the left side of the window in Figure D let you know how deeply nested an element may be as the lines represent its containers.


I am always eager to find tools that can simplify a Web development process, and working with a source code as loaded in a browser is a task ripe for help. The View formatted source and View Source Chart tools provide much improved user interfaces over the standard view source window available in Firefox. These add-ons make it easier to visually get an idea of a page’s structure, as well as what code may be doing on the page. If you’re not already using View formatted source and View Source Chart, I suggest adding them to your list of development tools to save valuable time.

When developing or debugging Web pages, what tools do you use to simplify your work? Share your thoughts and experience with the Web Developer community.

Additional TechRepublic resources about Firefox extensions

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column. Also, keep your developer skills sharp by signing up for TechRepublic’s free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!


Disclaimer about the software downloads featured in this article: CNET Networks is not responsible for the content of the publisher’s descriptions or user reviews on this site. We encourage you to determine whether this product or your intended use is legal. We do not encourage or condone the use of any software in violation of applicable laws. CNET Networks does not sell, resell, or license any of the products listed on the site. We cannot be held liable for issues that arise from the download or use of these products. Incorrectly editing the Windows Registry can cause serious problems requiring the reinstallation of your operating system and may lead to the loss of data. TechRepublic does not and will not support problems that arise from editing your registry.