Important Firefox Add-ons For Web Developers And Designers

September 20, 2011 Browsers, Internet, Tutorials Comment

If you are a web designer and website developer, speed is critical when building a website. Most web developer’s use Firefox as their main browser. The reason is due to the useful features and add-ons that you can install. I have listed some of the top add-ons you may want to try.

Firebug

Firebug is one of the most powerful HTML tools you can install. Firebug gives you the ability to fix and debug HTML errors in a live browser. This enables you to fix problems without uploading the files via FTP. This also makes it easier to see and test different HTML methods with a simple click, erase and refresh. Let me show you an example.

I pulled up a random website that has to do with dog training. Puppy-training-at-home dot com. Go to the Firefox tools at the top of the browser and open up the Firebug control panel.

You’ll see a little blue mouse cursor. Click on it and you’ll now be able to inspect any HTML tag in the entire website. If you look at the site you’ll notice the image on the right of the boy hugging his dog is placed right on top of the ad. Let’s inspect this element and push the ad down so it doesn’t look so crowded. Click on the blue inspect cursor and select the boy and his dog.

You’ll see it now pulls up the HTML element and image id. Click on the <br id=”userfly_327> We are going to add another <br> tag and it should push the ad down and leave a space between the boy and the ad.

That looks like it did it. Notice the image and ad now have a tidy space between each other. Now you can go to the actual file, change it, and then re-upload it to your server so it displays properly. Play around with it and familiarize yourself with all of the tools. You’ll soon realize how powerful it is and it will save you a lot of time when trying to fix minor and major HTML errors.

Page Speed

Google has developed a tool that allows webmasters to make their websites perform faster. This tool will help you tidy up your code so the page will load faster, making the user experience better. You can just test your pages straight from the Google Page Speed, but the add-on is easier. Add this tool to Firefox and you’ll be able to test your page in a live browser session and fix errors accordingly. Google will give you some ideas and tips that you can change in order to make your site run smoothly. This tool is useful if you have a large website that has expensive hosting and bandwidth usage.Learn more here.

Written by Jake