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.
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.
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.
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.
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
- 10 seamless extensions that make Firefox 2 even better
- Automate and extend Firefox with the Chickenfoot add-on
- Nifty features from Firefox add-ons
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.