Tip:
Highlight text to annotate it
X
Hello and welcome to my presentation on Firebug
Firebug is my favorite web development tool
The most important feature is the ability to inspect and edit web pages
Within the browser you can also log, profile,
debug, analyze, and layout your website
Firebug is a browser extension available
for Firefox and Google Chrome
Lets go ahead and install it on Firefox now
Installing Firebug
is pretty easy
You might have to allow your browser to download the software
A dialog
should appear. Just click install now.
It will automatically download Firebug
and install it for you. You will then have to restart Firefox
Once it’s installed you will be able to see it in your
Add-ons menu
To begin using Firebug, you just have to go to the bottom
right corner of your browser and click on the little bug icon
This will open up firebug
First, lets look at the HTML window
The HTML window shows the HTML element you selected in the context of the
entire website. You can use the plus
and minus buttons to expand and collapse elements
notice that when you mouse over an element it is highlighted on the screen
the highlight box shows three different colors: blue, yellow,
and purple
The blue represents the elements true box without margin
or padding applied
The yellow represents the elements margin
The purple represents
the elements padding
You can select an element by clicking
on it and then you can see all of the
styles on the right side pane
As you can see we can disable any of the
styling and it automatically changes
The nice thing about Firebug is that orders everything
in its hierarchy, what I mean by that is
all of the styles are in order as they’re applied on the page
Intro is the ID
for the H1 which is applied first, and then everything underneath of it
is inherited
Similar to how the HTML elements are nested
There’s also another way that you
can select elements. By using the inspect tool, thats right here
When you click on it, you use your cursor
to mouse over anything on the page
and it outlines it in a blue border
you can also select the element by just clicking on it
you’ll notice that it selects the element in the HTML window
and it also displays the CSS on the side
you can also look at the computed properties
for that element, the
layout which shows the margin, border,
and the padding and it also shows this
ruler in pixels at the top
you can also see the DOM and a code example of the element
that you selected, which is an H1
All of these tools have helped me learn a lot about HTML
CSS and how websites are built. For example, the layout
window has really helped me learn the box model and how to
layout different parts of a website
Another really cool thing you can do is edit and
add the CSS elements
so if I wanted to change the color of this H1, or all H1s
actually to black all I would have to do is change it
and then hit enter and you can see that all of the H1s are
black instead of garnet
You can also change the size
as you can see its just changing in the browser
Lets change that back
You can also edit the HTML itself
if you hit the edit button
and then change it to an H2
and then hit the edit button again, it will change that, and you can see its
different now. It doesn’t have the border under it
if we reload
you can see its different
The CSS window is pretty much the same thing
except all it displays is CSS. You can see a dropdown of all
the CSS files that are included in this website
and change between them
same deal, if you wanted to edit the HTML element right here
you just hit the edit button
come in here and lets say we wanted to change the background
of this website to black
you can see that its black now
the script
tab is mainly for javascript
same kind of principles, you can select any of the javascript
files that are included on this page
you actually can’t edit the javascript
but it does have a lot of really great debugging tools
where you can disable and enable breaks
while you run the javascript code and it will
point you to the correct line and also show you
the DOM properties, the stack trace
and break points. You can skip between those
to figure out where your javascript code is breaking
The next tab is the NET tab
this tab is really useful for seeing all
of the files that are loaded whenever you
create the webpage in the browser
it shows the URL that it gets the file from
the status, whether it gets it or not basically
the domain, the size of the file, and
the timeline of how long it takes to load and
different types of loading like DNS lookup
connecting, sending, waiting, receiving. So it gives you
a really detailed analysis of how the files are being loaded
and how they are being downloaded and everything like that
if you see over here you can see all the different pictures
it shows on hover. These are all the pictures
that are cycling through on the slideshow
under the Garnet and Gold Galleries right here
And if you collapse one of these
you can see even more detailed information
actually the exact response headers that are sent in the
HTTP packets. The request headers
and a lot of other information
that you probably don’t really need to know but its there anyways
At the very bottom of the NET tab
you can see the totals for each one of these. You can see the total size
of the page. All of the elements were 870 KB
You can see the number of request, 97 and
the time that it took to load which was 1.7 seconds
Next tab is the reference tab, this is really useful for
looking up any HTML, CSS
basically anything, so lets try something
just typed in “P”
for paragraph and it shows me all of the HTML
elements that start with P. Obviously paragraph is there
param, and plain text, and pre
and it also shows attributes, CSS properties,
and rules
which is a lot of stuff. It also shows what browsers support
that code and if you click
on one it shows you even more detail
it has an example over here
Finally, the last tab is the Page Speed tab
and this is actually not part of Firebug when you install it, but
its an extension that you can install, its actually
made by Google and its really really useful for
increasing your page speed load and analysing
your sites performance, so what you do is you just
click on analyze performance and it runs some tests on it and
it comes back with the performance score for your page
The performance score is a number
from 0 to 100
and it also shows you examples of each
of these things that you can do to improve your webpage speed
score. The red ones are high priority
the yellow ones are medium priority
and the green ones basically means they are working fine or low priority
theres a lot of different things you can do to
increase your page speed and
increase your websites performance
if you open up one of these it shows you specific examples of how you can do it
this one wants you to compress or gzip and reduce transfer size
by 73%. Thats quite a lot
and theres other ones, you can also
click on them and it will give you a description
more examples of how you can do that
so lets click on how you can minify CSS
here its taking you to a Google page
where it shows you how you minify CSS
details on how you do it, and links to tools
to do it for you
And thats about all I have time for now, I hope you enjoyed
my presentation and I hope you enjoy trying Firebug out
yourself