Firebug and Web Developer Toolbar for Firefox

Standard

I know this isn’t the most current thing to write about but if there is anyone out there developing websites using complicated CSS, JavaScript, Cookies, forms etc, these two plug-ins for Firefox are a MUST HAVE.

Firstly Firebug, this plug-in enables you to pick apart websites and see how they are constructed. If you’ve created a site that isn’t quite working or aligning correctly, this tool will help you discover why.  Simply install and you’ll notice a little bug in the bottom corner of your Firefox window. Click the bug to open the Firebug Console allowing you to see the HTML, CSS, Scripts, and DOM of the website. By hovering over the properties in the console, highlighted areas appear in the web browser to illustrate which part the code relates to. This is also an excellent tool if you are learning CSS and structures of complicated websites. If you see something on the web you really like but have no idea how they created it, you could to the Firebug Console to discover the properties needed to achieve the desired design/effect. Clever!

Secondly, the Web Developer Toolbar, this toolbar allows you to turn off parts of a website to see if the site will still function if users had them disabled. I use this tool for testing my websites for accessibility tests. Even though the majority of my sites include JavaScript and complicated styling etc, it is important the site still runs if all of these technologies are turned off. So in order to see this, simply use the toolbar to turn one or more things off. Easy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.