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!

Browser Developer Tools

  • Each browser has tools built into the browser to assist you
  • Firefox, Chrome, Safari & Internet Explorer all have browser tools available
  • Since IE is wide spread & many companies are still working in older versions, you need to be able to view your web pages across various versions of IE
  • The IE Dev tools allow you to do this
  • You can use the developer tools in IE in order to view pages in previous browsers

Browser Developer 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
  • Google Chrome Developer Tools 0:15
  • Firefox Web Console 1:32
  • Internet Explorer Developer Tools 2:34
    • Change Browser Mode
    • Quirks Mode
    • CSS Viewer

Transcription: Browser Developer Tools

I now want to talk about the browser developer tools that are available for you to assist you in working with your website and also trouble shooting.0000

Let us take a look at a few of these tools within a few of the browsers.0010

The first one is Chrome, I have Google Chrome open.0016

Within Google Chrome, if I click on the Options area in the upper right, and I go down to Tools, you can see there is one called the Developer tools.0021

And if I click on that, what it does is put this website, and we have open, it puts it into the lower console area.0032

What this allows us to do is view some of the code down within this area.0044

We can also see some of the styles that are being used and we can move things around, there is quite a bit of information within this area.0051

There is Resources, there are the various elements available, so I can click on one of these and it highlights that information up in the browser window.0060

As I click on this, notice what it says, it shows you the information for that div.header and gives you the size.0070

These are the tools that allow you to explore a webpage without even needing to go into the code.0080

That is Google Chrome and their developer tools.0088

Let us take a look at a couple of others.0092

This one here is Firefox's version and I got to this by going to the Tools area and they have this web developer piece.0095

And I opened up the web console, this is now built into Firefox and that is the piece you are looking at.0105

I do not have a website plugged in here so, let us go to mine instead and when I select it I can go down here to view the CSS information.0113

Now, this one is little bit different, this particular tool bar.0128

Notice it says CSS and it says Java script.0132

This is not my favorite tool bar among the browsers.0136

There are couple of others that I will discuss in a separate lesson and show you how to install them that I think are little bit more user friendly than this one built into Firefox.0141

The other interesting one is Internet Explorer's and let me show you this one.0153

I can get to it by either going to the Menu or I can just hit F12 and it pops open.0161

And what this one allows me to do, if I have a version of Internet Explorer on my system, I can actually view the page on previous versions of Internet Explorer.0168

I will show you what I mean, you can see that the browser mode is IE8 and if I click on this, notice I can go back to 7.0180

So, if I click on 7, my webpage does not really change.0189

There are some webpages that change drastically when you do that.0194

Now, I can also go to IE8 Compatibility view, and most of these Internet Explorer browsers have this type of a view available also.0198

And what that does is it kind of merges Internet Explorer 7 with 8, it is not pure 7, it is not pure 8, and it is kind of in between the two.0210

IE9 has the same thing, there is a Compatibility view.0220

I was teaching a class not long ago for a specific company and I had IE8 on my system and I am using it because so many of the companies I work with are still in IE8 even when 10 is out.0225

My IE8 did not look like theirs and we finally narrowed it down.0241

They had their set to IE8 compatibility view and mine was just regular IE8.0247

We had about 10 pixels of space difference between ours when I was trying to work in some Cascading Style Sheet rules.0255

So, even the Compatibility view within that same version of browser can change things quite a bit.0264

You can see I have Standard mode over here, every browser also have what is known as Quirks mode.0271

And if you do not do a proper Doctype at the beginning of your HTML page, then the browser does not know what rules to follow.0279

It goes into this weird Quirks mode that can also affect and make some real weird changes to your page.0288

I will click on it and you can see my page has been fully tested for those older versions, so it really does not change too much.0296

But some of the websites you go to, there is a huge difference between them.0303

That is the developer tools built into Internet Explorer, these are very handy, and here is also the CSS piece.0310

Right within this browser, I can take a look at the CSS for all the different pieces, so these are my CSS rules.0319

I do not even need to go into the code view in order to be able to view this lot of information, which is really nice.0328

Most browsers do have some built-in tools or the ability to add on even more tools for working in web development.0336

But, those are a few of the differences between browsers and things to consider when you are setting up and you are trying to figure out what browsers you want to use.0346

Just know that every browser does have some type of built-in tool that is available to you.0356

And you will find it really helpful to get to know those tools within the various browsers you plan to use and work with for your webpages.0363