Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the things that I've really been intrigued with over the past few years is how the browser has evolved from being simply a passive receiver of web content to being a very active part of the web development process. Now that's especially true for CSS authoring, as most browsers now have built- in debugging tools for checking and modifying your CSS. Now if you're using a HTML editors like Dreamweaver, you already have a robust set of CSS debugging tools built right into the editor itself.
If on the other hand, you are using one of the more lightweight editors, such as the one that I'm using for this title, Aptana Studio, then you are going to rely on the browser for much more of your testing and tweaking. Now this process can be made a lot easier if you know how to use the browser debugging tools, so in this movie, I am going to introduce you to a few of those tools, show you have set them up, and give your brief tour of some of their CSS capabilities. Now one of things that I want to point out here is that the tools that I am about to show you change all the time, I mean even weekly. They are constantly being updated, so there's a good chance that the interfaces and functionality that you are going to see here might differ slightly from what you see as you use them, because you might be using updated version.
Now since each browser has its own set of tools, I want to introduce you to them one at a time. Now to do that, I have the index.htm file opened up here from the 01_10 folder, and I want to start with Firefox. Now Firefox has a set of tools called Firebug, and if you have been doing web design or web development for any time at all, you've probably heard of this. If you want to get a little bit of more information on it or read the documentation or download latest build, go to getfirebug.com. So I am going to switch over to our page being previewed in our browser, and let's say I want to start inspecting some of these elements or checking out the CSS or even tweaking some of the properties.
To do that, I could launch the Firebug console. Now there are couple of ways for me to do this. One of the easiest ways is to go right over here in the toolbar and just click Firebug. Now that will turn it on. Now what I get is this console at the bottom. Now most browser debugging tools are going to look exactly like this, so if you get comfortable using one, moving into another browser and using its set of tools is pretty much just making a lateral move. Okay now I'll notice if I go right over here to Inspect Element, I can mouse around the page, find elements to inspect, and click on them.
And when I do that inside of the HTML, it shows me exactly where this is. As I mouse around the HTML, you will notice that's highlighting different elements as well. It's even showing the CSS box model properties. Padding is indicated by that sort of purple color that you are seeing there and margins is that yellow color. Now I have different panels here. I have an HTML panel. I have a CSS panel. The CSS goes ahead and let's me inspect any of the CSS. And if I'm looking HTML panel and I inspect my elements and I settle on a specific element, you will notice that I also get these panels right over here that show me the computed styles. I can even turn certain things off. For example, I could say, hey, only show me the applied styles. And within that, I can do things like well, what would it look like if its color wasn't white, or if the font style wasn't italic.
So I can begin to sort of tweak my styles right here by turning certain features on and off again, and I can even start writing some styles. So I can begin authoring in this environment and then copy and paste the styles into my own code, so there are a lot of really cool things that we can do here. We even have a console where I can run different profiles and warnings. So for example, if I reload this page and say I want to know what the CSS warnings for this page are, I can get all the warnings on it. Now don't be too alarmed here. These are just certain properties or selectors that Firefox doesn't support; it doesn't mean that the code isn't going to work.
Okay, so that's Firefox. Next I want to switch over to Chrome and show you some of Google Chrome's tools. Now Google Chrome is WebKit-based browser, so it uses something known as WebKit Web Inspector. Chrome and Safari use the exact same set of tools, so I am going to show you these in chrome, but in Safari it works exactly the same way. So if you browse in Safari and test in Safari, you can use exactly the same set of tools. And if you want to learn a little bit more about Web Inspector, you can go to trac.WebKit.org/wiki/Webinspector and get a little bit more information on this.
So I am going to switch over to our previewed page again. And here, we don't have a console button, but the easiest way to activate Web Inspector is just finding an element that you want to learn a little bit more about and inspect, right-click it, and I can say, hey, I want to inspect this element. So as soon as I do that, I have the WebKit Web Inspector open up, you can see it looks very similar to Firebug. Some slight differences obviously. But as I mouse through the code, again I am getting the CSS box model properties visualized, which is very nice. And again, I get my computed styles and here. I can begin to sort of play around with those, turn them on and off again.
So I get a lot of the same functionality with the Web Inspector that I get with Firebug. Now if you use Opera, Opera has a tool called Dragonfly and I really like Dragonfly. It's very, very good. Very similar Web Inspector, very similar to Firebug, but it's very powerful in its own right. If you want to learn more about Dragonfly, go to opera.com/dragonfly and they have the whole section of their web site dedicated to teaching you how to use this. All right, so I am going to go over to my page opened in Opera, and again, it's a same drill. I just find an element, I right-click it, and I say okay, inspect that element for me, and Dragonfly opens up. And let me just make this a little bit larger.
As I begin to mouse around elements and inspect those elements, notice that I get a series of guides that help me find out whether elements that I am wanting to are lining up with each other and how much space they are taking up within the layout. I also get a nice little preview of some of those CSS box model properties as well. Just as before, we have a console that we can work with. We have styles that show us computed styles. We have different elements that we could sort of turn on and off here. We could get in sort of a preview how the styles are working. And Dragonfly even has a zoom, so you can zoom up on certain elements as well, baked right into the console, which is really nice.
So, now that we gotten a good idea as to where to find CSS testing and debugging tools within the browser, we need to explore exactly how these tools can help us author our CSS, and we are going to go ahead and do that in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.