If you try to do all of your development work on a standalone web design program such as Dreamweaver, Coda or NetObjects Fusion, you may find yourself spending a lot of time switching back and forth between your design program and your browser, making sure that the changes you’re making to your application or website are displaying the way you intend.

In order to become more efficient, many web developers choose to do some of their work directly within the Firefox browser. This isn’t because Firefox is necessarily the best browser (that debate is beyond the scope of this article), but because there are so many Firefox plug-ins that can be used to help speed development.

Firebug

Firebug

The most well-known Firefox plug-in for development, and probably also the most widely used, is Firebug. Firebug allows you to debug, edit and monitor the HTML, CSS and JavaScript code of any website. This can be a great way to learn from other websites that are doing things you want to do on your site.

FireShot

FireShot

FireShot is a browser plug-in that lets you take screenshots of entire webpages. This can be a great help if you need to be able to make a visual side-by-side comparison of different versions of a webpage or application UI that you’re developing. FireShot also allows you to make annotations directly on the webpage you’re saving. FireShot can save the screen images in JPEG, PNG, GIF or BMP file formats.

FireFTP

FireFTP

FireFTP is a browser plug-in that provides an FTP and Secure FTP client for you to access your web servers and development servers. Rather than having to open yet another program on your desktop, you can use FireFTP to begin an FTP session directly within Firefox.

Firesizer

Firesizer

Firesizer instantly allows you to resize your browser window to specific preset dimensions. This makes it easy to see how your application or site development will display in different browser sizes and display sizes.

ColorZilla

ColorZilla

ColorZilla is an essential color tool for developers who need to find just the right color or color palette for their applications or websites. ColorZilla has eyedropper and color picker features that allow you to quickly identify colors that are used on existing websites, and to discover colors that will work with your project. ColorZilla is also available as a plug-in for the Chrome browser.

Barlesque

Barlesque

Barlesque isn’t a development plug-in per se, but it helps you manage the many different plug-ins that you’re likely to use for development. Barlesque adds a collapsible set of buttons that can be used instead of the wide add-on bar that takes up screen space.

A note of caution when you start using these browser plug-ins. Both Firefox and Chrome are updated quite frequently, and as a result some of these plug-ins may exhibit unexpected behavior if they are not themselves updated to conform to the browser updates.



author's photo

Author : Blue Cloud

Just a normal software developer who love to write code. Developing professional software since 1999. After working in the software industry for many years, I've started my own website to share knowledges and experiences.

COMMENTS
blog comments powered by Disqus