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 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.
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.
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.
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.
One-click to view page source. Enough said. 🙂