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 22.214.171.124 exposes a regression bug in Firefox, causing high CPU usage. If you're still running 126.96.36.199, you should upgrade to 188.8.131.52 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.
- Virtually Delivered High Performance 3D Graphics "A picture is worth a thousand words." That old phrase is as true today as it ever was. Pictures (i.e., those with heavy...
- Who does NSS Labs "Recommend" for NGFW? In 2012, NSS Labs found that most available NGFW solutions "fell short in performance and security effectiveness." In 2013 NSS Labs noted "marked...
- CIOs Deliver Productivity Breakthroughs with Intelligent Digital Signage Retailers have long recognized the influence that digital signage provides over a shopper's point-of-purchase decision making process.
- Improving Business Value of WAN Optimization Want to achieve faster ROI with WAN optimization? Read the latest IDC report and discover how you can cut IT costs without compromising...
- Live Webcast IBM FlashSystem V840: Leveraging Software-Defined Flash to Drive Your Business With end-to-end, tightly integrated functionality and super-fast flash technology, products like IBM FlashSystem V840 Enterprise Performance Solution empower businesses to leverage the efficiency...
- What should I look for in a Next Generation Firewall? SANS Provides Guidance With so many vendors claiming to have a Next Generation Firewall (NGFW), it can be difficult to tell what makes each one different....
- IBM FlashSystem V840: Leveraging Software-Defined Flash to Drive Your Business With end-to-end, tightly integrated functionality and super-fast flash technology, products like IBM FlashSystem V840 Enterprise Performance Solution empower businesses to leverage the efficiency... All Networking White Papers | Webcasts
Our new bimonthly Internet of Things newsletter helps you keep pace with the rapidly evolving technologies, trends and developments related to the IoT. Subscribe now and stay up to date!