Web Development

Friendlier source code with two Firefox add-ons

The View formatted source and View Source Chart Firefox add-ons make it easier to visually get an idea of a Web page's structure, as well as what code may be doing on the page. Tony Patton offers additional reasons why he says you should put these add-ons in your toolbox.

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

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

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

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

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.

Simplification

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.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

10 comments
info
info

good stuff, but the best link I use is click2call from www.2callus.com. they put our phone HTML in our website and now we get calls 24.7 and their National call center takes message and orders for us 24/7 great html feature

stuvorn
stuvorn

Useful extensions but the king of all addons for development is the "web developer toolbar" 1.1.5

dgs010243
dgs010243

Hi, Thanks Tony for these 2 add-ons: "view formatted source" and "view source chart". I use Mozilla Firefox 2.0.0.x frequently (now x = 14). Mozilla is in poll position on http://dan.somnea.free.fr/2C/ Sincerely yours, Dan Gheorghe

bigmurali
bigmurali

Did you discover them only now, I have been using them for quite a while now and they are great.

levvyskubov
levvyskubov

It is very sad that The View formatted source tool doesn't work with Firefox 3 :-(

TJ111
TJ111

Wow, those are two neat looking tools I haven't used before. One thing I use for source-code is HTML Tidy, which displays a little icon on the status bar telling you if the HTML is valid or not. If not, it will display a list of w3c errors, it gives some tips and suggestions on your source code (such as using proprietary attributes), and has a button to "Clean up HTML", which actually fixes all the mistakes in the HTML for you. Another good source-code tool is part of the Web Developer toolbar, which I'm sure everyone here already has, but it's 'View Generated Source' is great for when additional page content is generated through Javascript/Ajax. Theres so many neat little tools hidden within Firebug / WebDev Toolbar that this post could go on forever, so I'll stop there. But I will definitely check these out, although I'm nervous about them conflicting with HTML Tidy.

edmicman1
edmicman1

My personal favs are the Web Developer Toolbar and Firebug. An addon to Firebug, Y!Slow, is also very handy. Both complement each other and have some great features. I'll definitely check these out, too!

andrew.moore
andrew.moore

Useful additions to Firebug which is nearly the ultimate Firefox development addon.

Justin James
Justin James

Tony - I was just wondering about something like this just last week while struggling with some CSS, thanks for writing about this! J.Ja

techrepublic@
techrepublic@

If "web developer toolbar" is the King then "JavaScript Debugger" is the sexy Queen and FireBug, YSlow and "XML Developer Toolbar" the royal offspring! :)

Editor's Picks