Web Developer Essentials
Why bounce between applications when you can use FireFTP and have a full-featured FTP client in one tab, and the page you're working on in another?
FireFTP adds an option to Firefox's Tools menu. Click on it and a new tab opens (you can set this to a new window if you prefer) with a traditional two-panel FTP client: local files on the left, remote on the right. By right-clicking on files you can tweak their permissions and all the other things you'd expect to be able to do via FTP.
|FTP right from Firefox with FireFTP. (Click image to see larger view)|
One nice feature is "View on the Web," which opens the file on the remote server in a new tab. You can set up each host to "snip" out parts of the directory structure (/public_html, for example) so that you get valid URLs rather than the full "physical" path to the file.
The one disappointment is that the client is FTP only. When asked about SFTP support, the author responds (in a FAQ on his page), "Maybe in Version 2.0." Let's hope.
Warning: The combination of FireFTP and Firefox 220.127.116.11 exposes a regression bug in Firefox, causing high CPU usage. If you're still running 18.104.22.168, you should upgrade to 22.214.171.124 before installing FireFTP.
Version reviewed: 0.94.6
Exploring all that Firebug can do could be a full article of its own. But for a taste of its power, let's look at basic HTML coding. Once Firebug is activated, running your mouse over an HTML tag in the Firebug window causes a highlighted area to appear on the rendered page, showing where that tag is in the display.
|Inspecting a page's HTML code. (Click image to see larger view)|
Firebug is a great extension and a big topic. If you develop Web pages, you'll want to add this extension to your tool kit. There's plenty of documentation and discussion of what it can do at the GetFirebug Web site.
20 must-have extensions
Web Developer is another virtual Swiss Army Knife for coding. There's some overlap with Firebug, but where Firebug concerns itself almost exclusively with the content of a Web page, Web Developer offers tools to tweak how you're interacting with the page.
|Web Developer's cascading menus. (Click image to see larger view)|
Web Developer's features can be accessed as a tool bar, or as cascading menus under Firefox's Tools menu. The tool bar is particularly handy since you can see all 12 of the top-level categories of features at a glance (and, of course, it can be easily turned off when you're not in the midst of site development).
This extension can even be useful for regular Web users, thanks to features like the ability to turn off background images. If you've ever struggled to read text displayed, for example, over a background image of someone's dog, you'll appreciate this.
Web developers will probably want to run both Firebug and Web Developer, and the two extensions seem to co-exist peacefully.
Version reviewed: 1.1.3
So simple and so useful. After installing this extension, you'll have a small ruler icon in your status bar. When you click on this icon, the client area of your browser window will fade out a little, and you'll have a crosshair cursor.
Use this to drag out a box over a section of the screen. Next to the box is its height and width, measured in pixels. No more guessing as to how wide a sidebar really is, or if the footer is really rendering 150 pixels deep like your style sheet says it should. When you're done, a tap of the Escape key turns off MeasureIt and gives your Web page back to you.
|Measure any element on a Web page with MeasureIt.|
Version reviewed: 0.3.6
Another quick and simple tool, this one more for designers than developers. ColorZilla puts an eyedropper icon in your status bar. Click it and you'll get a crosshair cursor. As you run this over a Web page, the RGB values of the pixel under the crosshair will display in the status bar, both as three separate values and as a hex value (e.g., R:255, G:255, B:255 | #FFFFFF).
|ColorZilla shows color values in the status bar.|
|More ColorZilla options.|
ColorZilla also offers a color picker, color palettes and easy access to DOM Inspector, a Mozilla tool for examining a page's Document Object Module.
Version reviewed: 1.0
So there you have it: the 20 extensions we just can't live without. Please add your must-have extensions to the comments area below.
Peter Smith is a Web developer and freelance writer with a special interest in personal technology and digital entertainment.
Related News and Discussion:
- Scot Finnie: The Great Mac Software Hunt
- Preston Gralla: Why Firefox has lost its mojo
- daily IT Blogwatch: It's IE8 vs. Firefox 4 for 2008 (and animal noises)
- Firefox loses browser share, Safari gains
Read more about Networking in Computerworld's Networking Topic Center.
- How WAN Optimization Helps Enterprises Reduce Costs If you wanted to break down innovation into a tidy equation, it might go something like this: Technology + Connectivity = Productivity. Productivity...
- Four Little-Known Ways WAN Optimization Can Benefit Your Organization WAN optimization has evolved into a complete system that optimizes traffic across a broad range of most popular applications while providing deep visibility...
- SharePlan Security SharePlan is a continuous, secure, enterprise-ready file sync and share platform that facilitates smart, real-time collaboration across all devices.
- Three Ways Your DNS Can Impact DDoS Attacks Domain Name System (DNS) plays a big role in consumers' day-to-day Internet usage and is a critical factor when it comes to distributed...
- Online Video and Web Traffic: Sochi 2014 Winter Olympic Games Over 25 leading global broadcasters worked with Akamai to deliver the action, excitement and inspiration of Sochi because they understand online viewers expect...
- Video surveillance for IT: maximum image quality, minimum bandwidth Join us on Thursday, May 8th at 1 p.m. EST when Willem Ryan, Senior Product Marketing Manager at Avigilon, will discuss how IT... All Networking White Papers | Webcasts