5 Handy Firefox browser plugins for web developers

The trend to develop single page web applications with MVC or MVVM frameworks like Angular requires good tools and plugins to debug and isolate issues on client side. On the previous tutorial I covered writing JavaScript functions and debugging it with the FireBug plugin for Firefox. In this blog post, I will cover 5 handy Firefox plugins that can make you more productive in fixing issues relating client side code like JavaScript errors, effective CSS applied, HTML errors, etc and client to server interactions like what header was sent? what data was posted?, etc

1. FireBug
2. Fire Cookie
3. YSlow
4. Tamper Data
5. Modify Headers

There are other useful plugins like modify headers, HTML validator, etc.

1. FireBug is  handy to debug and tune client side HTML, CSS, and JavaScript on the fly.
2. Fire Cookie makes possible to view and manage cookies in your browser. Especially, you can modify and delete cookies.
3. YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is an extension to FireBug, and you need to install FireBug before installing YSlow. The YSlow grades your web application and provides recommendations to improve performance. Alternatively, you can also install Page Speed from Google. Similar to Yslow!, it tests website performance.
4. Tamper Data is a fast, simple yet effective tool which can be used to do penetration testing. Use tamper data to view and modify HTTP/HTTPS headers, trace and time http response/requests and to security test web applications by modifying the POST parameters.
5. Modify Headers is handy for modifying or adding new headers for testing purpose. For example, add SSO headers to test your application locally.

The FireBug has other developer productivity tools natively within Tools --> Web Developer

Native Inspect Element

This native "Inspect Element" from Firefox may look similar to “Inspect Element in Firebug”, but it  acts in different ways. There is one distinctive feature known as the the 3D view, which analyses the web page in depth.


Responsive Design View

This native "Responsive Design View " assists with the Responsive Website Design (i.e. RWD). With more and more mobile users online via smartphones and tablets, it has never been more important to design a friendly environment for those visitors. A responsive website design allows your visitors to navigate to your site that is optimally designed for the device they are using like smartphone, tablet, or laptop/desktop, without having to painfully zoom in and zoom out.


Style Editor

If you work frequently with CSS then the "style editor" is very handy as it allows you to edit the CSS and see the impact of your change instantly. This is available from version 11.


Here are some step by step tutorials on using FireBug:

•  CSS Selectors tutorial with Firebug
•  JavaScript tutorial with Firebug