From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using the Firebug Inspector and the WebKit Web Inspector

Using the Firebug Inspector and the WebKit Web Inspector - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Using the Firebug Inspector and the WebKit Web Inspector

Now that we've seen how to access a browser's web debugging tools, let's experiment with using them to troubleshoot our CSS and refine our page layout. Now, for this exercise, we're going to focus on using the two most popular web debugging tools, Web Inspector and Firebug, as a way of getting more comfortable with using the tools, but don't be afraid to use Dragonfly or Microsoft's tools, whichever browser that you're going to be using most frequently, and really should be comfortable with using all of these tools. Okay, so I have index.htm opened up here from the 01_11 folder, and the first thing I'm going to do is I'm just going to preview this in Firefox. So, this is very common. We work on a page for a while, we save it, we test it, we preview it in the browser, and we see something that doesn't exactly look the way that it's supposed to. And in a lot of cases, we have to sort of guess why or go back in our code and figure something out. In this case, I want to use is browser…

Contents