If there is one tool that every web designer needs then I’d have to say that it is Firebug. Once you have used it a few times, you will forever feel naked without it. Firebug is a web development toolbar that adds onto Firefox and allows web designers and developers to analyse and edit a website in real time. Firebug is a great time saving device for the web designers that use it. I’ll outline a few of its features in this article. If you would prefer to just try it out for yourself then you can download it now.
Firebug is an add on to Firefox that allows you to edit, debug and analyse a website live in real time. You can analyse and edit CSS, HTML and Javascript on the fly while you are browsing. It pops up as a toolbar or in a separate window whenever you need to inspect a website so it doesn’t get in the way when you don’t need it. Another alternative to firebug is the Web developer toolbar. I don’t think it’s as good as Firebug but you can use it along side Firebug to get the best of both worlds. Below are some of the great features that Firebug offers. I recommend trying it out, you won’t be disappointed.
- Inspect and edit HTML on the spot.
- Edit CSS on the spot, tweak the styles until you get the style you want.
- Visualise the CSS with the ability to outline the elements on a web page including divs and block level elements.
- See the margins and padding on certain elements.
- Monitor network activity so you can see each file that a web page loads as well as the time it takes to load.
- Debug Javascript and pause execution of the script at any time.
- Error notifications quickly bring your attention to any errors on the page.
- Find DOM objects on the fly.
- Write javascript live using the built in command line.
Firebug is simply a great web development tool that I think every web designer should have.
Adham Dannaway
Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!
Trackbacks
[…] website you create you are bound to have some bugs. Luckily there is a great Firefox plugin called Firebug that will help you analyse and edit your website in real time. You can analyse and edit CSS, HTML […]
[…] the loading time and performance of your website. YSlow is a Firefox add-on that integrates with Firebug to analyze a website and suggest ways of improving the performance of that […]
[…] created it as a Firefox add-on. To install Google Page Speed you’ll actually need to install Firebug first, which is another great tool to help front end developers inspect website HTML and CSS. Once […]