Hi and welcome to this week's web design video
blog. This week we are going to take a look at Firebug. If you don't already know, Firebug is a free
website analysis plug-in for Firefox that gives web developers easy access to powerful
analysis, debugging and performance tools. Getting Firebug is simple and most importantly,
free. Simply open Firefox on your Mac or PC, go to www.getfirebug.com and click on the
big red installation button in the top right corner. Firefox will then take you through
the necessary steps to install Firebug. Now that you've got Firebug installed, you
should see a small Firebug 'beetle' icon has appeared in the bottom-right hand corner of
Firefox's status bar. So to get started simply push the Firebug
icon in the bottom right corner. And you'll see that the panel slides up across the top
of the website so that you get like a sort of split-screen effect.
The Firebug icon appearing in the top left allows to you administer settings, improve
and increase text size
and options, things like that.
The next one across is an element inspector, which is quite useful when analysing the HTML,
which we'll come to in a moment. So the first button on the Firebug navigation
is the console. So what the console does is if you can select the errors that you wish
to analyse on the website so you can show Javascript, CSS, XML errors.
So if we refresh the page, the console will pick up for you, errors on the website whether
it's CSS or Javascript to allow you to de-bug yo
ur website.
The next icon across is HTML so this is where the selector comes in handy, you can literally
highlight parts of the web page and it will show the HTML and even the CSS on the right
hand side that references those. And what's even cooler is that you can actually
delete and edit the HTML through the Firebug control panel.
The CSS button is the next one along and again this displays the CSS for the web page that
you are looking at and again you can edit this if you wish.
Next across we
have Script, then DOM which is ‘Document Object Model’ which
allows you to see and manipulate the hierarchy of objects and functions.
And the next one across which is quite useful which is the Net Analysis so if we just clear
that and refresh this will load all the various elements on the website and let you know which
objects whether its flash, images, HTML are taking so long to load. And again you can
drill this down to HTML, CSS to really analyse what elements of your web pages are taking
so long to load. And also you may remember a couple of weeks
ago we did a video blog on improving page-speed; you know the load times of your web pages.
And you can also install further plug-ins that work with Firebug to help you analyse
other aspects of your web pages. So that's the basics of Firebug. If you're
a web designer or developer, we guarantee that once you start using Firebug, it will
inevitably become a popular tool in your web design arsenal. Thank you for watching this week, next
week
we are going to show you how to embed flash with a transparent background on your website.
Have a great Easter.
Comments