Sign In | Subscribe

Enter your Sign on user name and password.

Forgot password?
  • Follow us on:
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Using Firebug for CSS/JS

  • Firebug is a free extension tool you can use within Firefox
  • You install separately within Firefox just like any other extension
  • Firebug is extremely helpful for working with CSS & JavaScript, especially when troubleshooting
  • You can even use Firebug with server-side languages when working with JavaScript within those languages
  • Demo Firebug
  • Firebug offers an inspect button to use with HTML & CSS
  • Firebug also offers Style, Computed & Layout tabs to assist you

Using Firebug for CSS/JS

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Installing Firebug 0:28
  • Firebug Tabs 2:30
    • JavaScript Console
    • HTML Tab
    • CSS Tab
  • Inspect Elements 3:58
  • Link to Firebug 5:21

Transcription: Using Firebug for CSS/JS

We are going to take a look at a super cool tool that I have been using for a long time.0000

I would say if you did a pool of web developers, probably 99% of them also use this tool.0007

And it is a tool called Firebug, and it is used within the Firefox browser, and it is another reason why a lot of people tend to use Firefox as their default browser.0015

So, let us install this tool in the browser so you can get a taste for what it can provide you.0028

Well, go out to my browser resources page and within this page, which you can get to by clicking to Resources and click on Browsers, I am going to go right here to the Firebug link.0034

I will click on that and go ahead and install Firebug.0048

And what Firebug allows you to do is install it right quick, just like any other Firefox extension, but its capabilities are pretty expensive, so click Add to Firefox.0054

Now, notice it says no restart on this one, some of the new Firefox extensions, do not force a restart, they go ahead and install the extension without you needing to close Firefox and reopen.0067

If it is an older extension, usually you will get restart now button when you go to install and it has to close up Firefox and reopen.0082

And if you are installing a bunch of them on the row, that can get very annoying.0091

So, it looks like this extension has got a little bit larger than it used to be and there is a lot of information in here so, that is why you are seeing this.0096

And what we are going to do is install it, I will open it up and once it is installed we are going to get a little bug good looking thing that installs up here right where the rest of little pieces are.0106

I have an installed now button I will go ahead and click it and it installs itself.0120

You can see how quick it was, it has installed successfully.0126

I will close that up, and guess what?0130

There is my little bug that is our Firebug.0134

Once it is installed you can see when I hover on it, it says deactivated.0137

I am going to call on that and what I need to do is pop it open down here.0142

It is all set up right now, what we have is a variety of different tabs here.0150

If I click on Console, this is a Java script console you can use when are testing Java script, if you are getting errors or having issues with it, this is where it will end up.0155

When you first starting on the web, more than likely you will spend a lot of time here in the HTML piece, because what this does is go through of all the different pieces of your page.0167

So, if I hover over this div that says page, you can see I got this big blue square on top of my page.0178

Let me move this down just a little bit so you can see a little bit more of it.0187

Now, I will open up that div and if I click on something in particular, here is the nav.0191

You can see I get that blue, can you see how it is blue in yellow stripe?0198

If you are unsure what is highlighting just move your cursor around and you will be able to see it.0204

But, if I hover over an HTML tag, it shows me where that tag is in the browser.0209

Now, I can also go into the CSS piece to view some of the CSS information on the page and I am just in the Firefox piece.0215

Let me go over to my website and show you the same thing.0224

So, I will go ahead and open up Firebug, here it is and I am in CSS, so this is a listing of all the CSS rules for my website.0228

But what is interesting is I can click this little arrow on the left hand side to inspect specific items within the page.0238

I have clicked on this and as I hover over, you can see what it does, is change the code information at the bottom of the page down in this area.0247

It shows me the HTML piece on the left and in the right over here it showing me the CSS at the same time.0259

Move this over a little bit, so you can see in a little bit better.0268

And so, as I hover over things I can see exactly what the code is and what CSS has been applied to create that positioned element.0272

So, there is a lot of information within this area.0283

You can even use it for debugging any Ajax applications, which are basically JavaScript applications that you can add to your webpage.0287

And if you are getting any errors, you can have those errors sent to Firebug and the console within this, so you can try and figure out what might be causing those issues.0297

So, there is a lot of information in this Firebug extension and it is a very handy piece.0309

I think it is one you are going to want to make sure that you install within your webpages.0316

And you can get to it through my website here under Browsers, here is the Firebug link, it must be installed into Firefox specifically.0321

You want to make sure you have the Firefox browser first before you are trying to install Firebug and that is the browser where you install it.0331

So, that is how you install and can take a look at and view elements on your page using Firebug.0342