Firefox Web Developer Extensions | 2 | WebReference

Firefox Web Developer Extensions | 2


[previous] [next]

Firefox Web Developer Extensions

inline source

View Formatted Source

Here's another way to look at the source code of a Web page. This extension, developed by Felix Ritter, gives different views of the Web page. Using the inline mode, you can see the page as it is but the extension adds color-coded, indented, collapsible block elements (shown at right). Clicking on the "Source" button in a block will open a chromeless window displaying the formatted source code for that block. You can also view the complete source code formatted for easy reading.

ViewSourceWith:

Let's look at one more extension for viewing source code. Instead of having a window open with the original code, you can use this extension to open the page in your favorite editor. You can set up the different programs for opening pages in the options. One program will be designated as the default. Then, when you right-click on a page, you have the option of using the default or another program to view the souce of the page.

IE View

When Web pages are developed, they should be viewed in the most popular browsers to make sure they display correctly. One of the most common browsers is Internet Explorer. If you use Firefox as your primary Web browser, you need to get this extension. Right-clicking the mouse while hovering over a Web page will display "View this page in IE" as an option on the popup menu. Right-clicking while hovering over a link will give the option "Open link target in IE." Clicking on the option will cause your Internet Explorer browser to open with the target page/link displayed in the window. This saves time in having to stop, open IE, and copy the URL into the address bar.

Colorzilla Color Picker

This extension, developed by Alex Sirota, is a colorpicker, eyedropper and page zoomer. It resides in the status bar, on the lower left-hand corner of the browser. A right-click over the icon brings up a feature-rich menu. You can also just double-click to use the colorpicker/palettes. With the colorpicker you can chose a color or one of the several palettes available, such as W3C Named Colors, Web Safe Colors, and Hues and Saturations. Additional palettes can also be downloaded from the Web site. Colors can be copied in RGB, Hex and other formats. Color information, as well as CSS information, can be shown in the status bar.

Venkman

This extension is a JavaScript debugger for Mozilla-based browsers. It's quite comprehensive and can be used with Web pages and local files. The debugger is excellent if you do a lot of JavaScript programming and are concerned with cross-browser support. You can view the source code but you cannot edit it. There are tutorials to aid you in using it, including one here on Web Reference:

  1. Debugging JavaScript Using Venkman, Part 1
  2. Debugging JavaScript Using Venkman, Part 2
  3. Learning the JavaScript Debugger Venkman
  4. To obtain the extension

 

 


[previous] [next]

Created: September 30, 2005

URL: