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!

Additional Browser Tools

  • You can download the tools I use in the course at
  • There are many extensions available for browsers that can assist you when working on the web
  • I have a listing of helpful browser extensions for Firefox & Chrome on my website
  • Go through the install process for these browser extensions
    • MeasureIt
    • IE View
    • ColorZilla
    • Web Developer

Additional Browser Tools

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
  • Web Developer Toolbar 0:53
    • View Document Size
    • Populate Form Fields
    • ColorZilla
  • Firefox Extensions 3:53
    • Install Extension
  • Customize Toolbar 5:41

Transcription: Additional Browser Tools

I want to fill you in on some additional tools that are available for the various browsers you are going to be working in, as you work on webpage.0000

And there are some pretty cool features and extensions available to you and I want to show you how to install one, and also show you a few others that you may want to look at.0010

So, I am on my Resources page and within Resources I have a link to browsers, and that is the page you are looking at.0023

And Firefox has some pretty cool features in terms of being able to work with your webpages and access information that normally you would have to go digging into the code to try and figure out.0033

And these are very valuable for trouble shooting so, let us take a look at a couple of them.0047

The first one I have is this little icon I have here, and it is known as the Web developer toolbar.0053

And I have been using this toolbar since the beginning and it is one of my favorite features within Firefox and it is one of the reasons I stay in Firefox as my main browser.0060

If I click on this, you will see there is all this information up across the top of the page, which is really nice.0073

So, if I want to get information on the various images within my page, notice I can get rid of images, disable them, I can find out image pas, the file sizes for them.0080

I can also, let me show this other one, view document size, this tell you how big your webpages are.0094

Select that one and you can see uncompressed size versus regular size.0101

This is actually 186K, this page of mine.0107

Now, this can be little bit deceiving, because sometimes you downloaded things such as these JavaScript scripts here, you can see there is a couple of them and that equates to 65k of the 186.0112

As soon as I have gone to one page of my site and moved to others that is already have been downloaded, but this gives me image size information.0127

That is just one of the pieces and its document size that was located in the information piece.0137

Another one of my favorites within this toolbar, if you are creating forms, it gets very tedious to have to keep filling them out over and over again.0144

The populate form fields is another great feature, what it does is fill up a form for me.0155

When I am testing to see what happens, making sure I am getting the information and I am doing that over and over again, this little feature will fill them in for me.0160

So, there is a lot of real interesting things in the Web developer tool bar.0170

Now, another interesting one, and I will go back to the top of my webpage because it has a lot of different colors in it.0175

And I am going to click on this ColorZilla, the little eye dropper up here.0181

If I click on that and have her over any color, you can see the colors shows up inside the box up there.0187

And it gives me the RGB color which is the first set of colors there.0194

It also gives me the Hex value which is the second piece that starts with the pound sign.0200

So, I can have her over any color.0206

If I decide I like this one, I can click on it and you can see it copies it to the clipboard for me.0209

ColorZilla makes it really easy.0216

Anything you can open in Firefox, in your browser, you can get the information on specifically what that color is if you want to use it, within you pages, or if you need to match something within you pages.0219

Some of these Firefox extensions are listed here, here is the ColorZilla piece.0234

We also have a few others if you are working in Internet Explorer's- IE view is a very good one.0239

That allows me to right click on any page and preview in Internet Explorer and you could see I do not have it set up within this page.0246

So, if right click I do not have it, I was hovering over a link, so now, when I right click in an open area I do.0257

That is the key with this IE view, you have to make sure it is a big open area -- you are not on an actual object on the page.0266

Now what I can do is click View this page on IE, it takes that exact URL up here, pops it open in Internet Explorer for me.0273

That is a pretty handy feature and let us install one together and you will find this process is very simple.0284

I am going to install Measure it and when I click on Measure it, what is going to do is give me this little roller piece.0292

But for some reason they have changed Measure it just little bit.0301

I want to show you how to add little icons up here, such as I have done.0304

I am going to click Add to Firefox and as soon as it says Install now, I click on it and literally that is all I had to do to install it.0309

I will click restart now and what is going to happen is Firefox is going to close, and when it reopens I will have Measure it in my browser.0321

Now, I do have the icon up in this area, so, I will go ahead and close this page and you could see it stays with the various pages of mine.0334

But if you want to customize this area, what you want to do is right click up in this upper blank area, right above the URL and go down to customize.0341

What this does is give you all the little icons that are available.0354

So, if I decided I wanted IE view instead of right clicking, I wanted to put this icon to access, real quickly and easily, I wanted to put this up in this area, I just click on it and drag it up.0359

As soon as I have added it, it is not here anymore.0374

If I decide I do not want it up here, I can always click on it and drag it back down, such as this one.0377

I, now, have my toolbar all cleaned up.0385

Now, I do not really need IE view there since the right click is what I am accustomed to.0389

I will drag that back down and you can see it is right back in its place.0394

Chrome has some additional extension as well.0399

I have a nice listing of both Firefox and Chrome, within this webpage and this is specifically the browser resources within my website.0403

So, I hope you will explore a few of these, you will see me use them throughout the course, and they are very, very helpful in terms of giving me information0415

And it saves a lot of time not having to dig around inside my source code for the webpage,0424

I can just access these tools and easily see that information right within the browser.0431

Those are a few extensions for Firefox that are available to you.0438

And I would strongly suggest you take a look at a variety of these extensions, because I think you will find them extremely helpful.0444

They are great time savers as you develop your webpages.0451