Debugging your web page

Hello all, I thought in this post I would take a bit of a departure from the tutorial and introduce an important part of web developing you will need to start using very soon, especially with what I have in mind for the next post. I’m taking about learning how to debug your website. When I started this blog I told myself I would be doing it for the absolute beginner so I will just talk briefly about the term ‘Debug’ and what it means. Apologies if you are familiar with this term – feel free to skip to the next heading!

What is this ‘Debug’?

In my coding dreams ( and I do have them… sigh ), hours are spent typing in flawless code with perfectly aligned systems and a rigorous database handler so that nothing, and I mean absolutely nothing, breaks my code. It runs perfectly on first time execution and passses with flying colours every test I throw at it. I wake up satisfied with a smile on my face, and my fiance shakes her head, knowing I have been dreaiming about code again. Of course things don’t always go like this in the real world…

The chances are, maybe even when you’ve been following my tutorials, there will be mistakes in your code. These could be typos ( typing a wrong letter here and there ), or they could be more insiduous mistakes – pieces of code that look right, and sound right, but don’t work right. These are bugs. Little bits of code that should do something a certain way, but do something a different way. Every piece of code has them, and every piece of code until the end of time will have them, unless of course a super computer is designed to build flawless code. But what happens if the supercomputer has a bug…

No need to get depressed however, bugs are just a day to day part of coding, and the good news is that as your skills increase, you will find you get better at hunting down and finding bugs, as you are with all aspects of your coding. It’s just another part of the game.

Debugging Tools

Now we’ve established that bugs are a part of every developer’s life, no matter how good you are, and that this isn’t really anything to worry about, what would be handy would be ways to find these bugs. The most basic way is once you get an error message, or when something doesn’t look or act how it is supposed to act, you can site and stare at the error message for a few minutes. Then, once you’ve done that, you can stare at the code. Then stare at the bug again, then at the code. Etc etc.  As you will have guessed, this is not the most effective way to deal with bugs, but you’ll be surprised how many times you find yourself doing this – at least I used to do it a lot. I guess I was hoping that a light would suddenly come on and I would find the answer. Or I thought that the debugging process would take too long and it would be quicker to just stare at the code and wait for the God of Bugs to give me the clue.

This approach rarely works, and more often than not I will find myself doing what I should have been doing immediately, that is, starting the process of debugging.

Chrome Developer Tools

Without a doubt, one of the greatest tools in my web developer’s arsenal is Chrome Developer Tools. If you are using a Chrome browser you will have this already and I’ll get to showing you how to use it in a  minute. If you are using firefox, you will have a similar tool called Firebug. Firebug is also great, and although I spent a a year using it before switching to Chrome, things may have changed, so I wont be talking too much about Firebug. They are very similar in operation though. If you are using Opera or Safari, then I’m not sure what you will have in the way of an equivelant, sorry! Firefox, Opera and Safari users will find, I’m sure, many great tutorials out there for your browsers, which you may want to have a look at in place of this post. I’ll be assuming knowledge of browser debug techniques from this post onwards!

And if you are using Internet Explorer of any kind… really?

Where is it?

There are a few ways to open your developer tools. First, go to the menu bar at the top of your browser, open ‘tools’, and click ‘developer tools’. The other way is a keyboard shortcut – press shift + CTRL + i at the same time. Either way, developer tools should open, and you will see the following:

Chrome Developer Tool

Chrome Developer Tool

The box that has taken up the bottom half of your screen is the Chrome Developer tools window. If you don’t like it taking up half your page, you can resize it. Just drag it from the top margin. If you want it to be a seperate window, then you can have that too, just click on the small icon in the bottom left of the developer tools window.

The DOM

You will see a number of icons along the top of the tool. These represent different aspects of you page that you can investigate. For this tutorial and the immediate future, we will be concentrating only on the first one, Elements.

Now, you know what elements are, theses are the parts that make up your page. What you are seeing when you looks in the elements window is a display of all the elements that are part of the current page. This is also know as the Document Object Model, or DOM. You will hear a lot of talk about the DOM in web development, especially when you move on to coding javascript; we will leave any discussion of it until then.

Changing styles

Now, if you click on one of the elements, you will see that the window on the right will display all the styles associated with that element. As you can imagine, this is extremely useful. In addition, if you click on the top style that says ‘element.style’, you will be able to type in the box. Try it now – click on one of the elements of the page you can see, such as a header or paragraph, and then click on the element.style box. Type in a new style such as ‘background:red’. The page will automatically update to reflect this change. This is brilliant for trying out new styles and saves alot of time. It enables you to get the style looking right before committing it to your code, instead of constantly saving your CSS file and refreshing the page.

One last point – Close the developer tool by clicking on the small cross in the top right corner. Now, right click on an element in the page, any element, doesn’t matter, header, body, image, whatever. A dialogue box will open where you clicked. Click on the last option – ‘Inspect Element’. You will now see developing tools opening with the particular element you clicked highlighted in the elements window, with it’s associated displays display on the right. Handy, eh?

In Closing…

That will do for now, and apologies for not continuing with the tutorial, we will be back to that in the next post. I hope you have gained something from this though – I honestly don’t know how people coped without it. Spend some time exploring it, changing styles, doing some background research, it will all come in useful!

Leave a Reply