Firefox Extensions For Web Developers

I love Firefox. Really. The first time I used it I was blown away by the tabs. They were the coolest thing I’ve ever seen in a browser. Soon, I realised that I could do much more with the help of extensions. These extensions has made my life easier, especially when designing new websites or changing the layout of the existing ones. So now I’m going to share with you several Firefox extensions that will change your life as a web developer.

Web Developer

Web Developer extension from Chris Pederick is a must for every web developer. It gives you tons of tools to view, check, and validate a website. Below are some of my favorite features.

Edit CSS menu

Edit CSS menu

Change CSS on the fly

Change CSS property and see the result on the fly

The above image shows how you can edit a page’s CSS and see the results on the fly. I changed Google’s background color to green in this example. This feature is useful if you need to try few things without changing the actual CSS file and saves you from having to edit the CSS, save it, view the page, and change it back if is not what you want.

Display class name and ID of web elements on the page

Display class name and ID of web elements on the page

Display web elements outline box

Display web elements outline box

Yahoo displayed outlined and with class/ID

Yahoo displayed outlined and with class/ID

Figure 3 and 4 show you how to display CSS ID/ class details and outline elements on a page. You can even define what elements to be outlined using ‘Outline Custom Elements’ option at the bottom of the menu (Fig 4). Figure 5 shows Yahoo website with block and table elements outlined, and their class names and IDs shown. From here, you can compare the display with the CSS file to learn how a page is constructed. Hint: use ‘View CSS’ from the menu shown on Figure 1.

Validate local HTML

Validate local HTML

The above shows local HTML validation. I love this feature because it enables me to do HTML validation from my local PC. It saves me from having to upload the files to the server and run the URL through W3C’s online validator.

View source code

View source code

One-click to view page source. Enough said. 🙂

Pages: 1 2 3 4