Welcome back to Part 6 of Lesson 3 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to take a tour of the functionality of Firebug and Web Developer.
Different Views of Firebug
We’ll begin with Firebug. I want you to ignore most of the buttons down here because I have other add-ons that are also working but if you come down here to this little bug right here and single click it, up pops the Firebug window. We’ll go ahead and expand it just a little bit. So this is the docked view of the window.
Firebug actually has a different view which is the page or window view and you can access that from this button right here. If you click on that button, up pops a larger version that can be quite useful if you want to open up a whole bunch of stuff at the same time. But unless you’re working on a second monitor like I am, it covers up the page you’re working on. So we’re going to leave it in the docked view most of the time. Clicking that button back and forth returns it to the docked view or window view depending upon where you are.
HTML Tab in Firebug
We’re going to spend all of our time here in the HTML tab. There are other tabs as well but the HTML tab shows us both the HTML structure and the CSS styles. And since that’s really what we’re working on, we’re just going to look at it at this view.
Select Element Button
Firebug has this handy little tool called the Select Element button. If you click on that, all of a sudden, when you hover over something, not only is its structure outlined but then down below you can see what specific CSS element it is. So here you can see that this is an h2 tag and here you can see that this is an h3 tag and this is an input. You can just move around your screen identifying the different parts of the HTML structure down below. It’s quite a handy little tool although I usually only turn it on when I really need it.
And the next thing is this little Firebug menu. If you click on it, you have a whole bunch of different options including increased text size which I find to be kind of useful although a double edged sword because if the text is larger, you can see less in the window. Here’s how you minimize Firebug – like that, click that back on, it pops up or you can close Firebug altogether. Let’s go ahead and open Firebug.
Web Developer Toolbar
Up here is the Web Developer toolbar and all of these things on this line are Web Developer tools. We’re going to spend almost all of our time working in this CSS button so if you open that drop down and then go down to Edit CSS, this is what I think is really the most useful and handy tool of Web Developer.
This Web Developer page can also be shown in different views and so this little button right here will switch its position around. It’s a sort of a toggle so that switching took it to the top, this switching takes that to the right, this one takes it down to the button, and this one takes it to the left. I happen to like it on the left so that’s where I’m keeping it and this button here closes it entirely.
Edit CSS Button
Go back over and open it up again and these are all the CSS files that are associated with this webpage. In particular, here’s my custom CSS and all of the contents of my custom CSS file are displayed here in this tab and this is the same for anybody’s CSS file. Anytime you are on a webpage, you can open this up and see every CSS style sheet associated with the page and each of the styles.
You can also save these files to your hard drive which is what this button does here. If I click on this button, it will take that custom CSS file and ask me where on my hard drive do I want to save that. So that can be handy tool for looking at somebody else’s stuff, you can just save it right here. And then also, you have this refresh button.
Next, we have this handy little stick button and I’ll demonstrate the use of that stick button in a moment but this essentially commits whatever change you make to the custom CSS file to your view throughout the editing session and then this is the refresh button which will undo that stick and refresh back to the original views. And you’ll see what I mean by that in a few minutes.
Standards Compliance Button
The next thing to take a look at is the Standard Compliance button which is this little button right here. When you click on this, it not only shows you all of the different sort of defining page characteristics, but what I think is totally cool is this media button. Because when you click on that media button, you can see every single image that’s on the web page. So there’s my fave icon, there’s my banner, there’s my Subscribe Now button and you can just click over here and click Save As and it will save that button to your hard drive. So that’s quite a useful feature if you’re working on somebody’s site and you want to copy their images off of their old site or if you see something you really like and you want to grab. It might get you into a little bit of trouble but nevertheless I really like this Save As function.
And speaking of images, we’re going to come over here briefly and look at this Images tab and if you select that, there are a whole bunch of different attributes or different things you can do. For example, you can display the Alt attributes which is quite useful. If for some reason you have an image that doesn’t’ have an alt attribute, you can see that. For example, this link does not have an alt attribute. So you can display your alt attributes, you can also display your image sizes or image dimensions. If you don’t know how big an image is, all you have to do is go over to there and select that and this will show you the size of every single image on the webpage.
You can also check your file sizes if you feel like you need to. If you select that, you can see how big your files are – 30k, 33k, 2k and so on. And then if you want to see all of the information about every image, what you do is you come down here to View Image Information which opens up a new window. Then it lists every single image and shows you those images and then tells you the image location, its width, its height, its file size and its alt tag. So that can also be a useful function if you’re trying to figure out, when looking at a page, whether there’s an image there or not or when you’re looking at a page, trying to determine whether or not you’re looking at a foreground image or a mixture of images or a background image.
That wraps up Part 6 of Lesson 3 of the Customize Thesis Like a Pro tutorial series.