Using the console to find errors

We're just looking at the tip of the iceberg so far when it comes to what you can do with Chrome DevTools. For instance, sometimes adding an image can be tricky. So, let's add the following image tag to the page by typing it into our HTML, above h2:

<img src="images/sharkey.png" alt="sharky"> 

If we save this and refresh the site, we will see that the image just doesn't show up, so there's something wrong. Refreshing the page, a red error icon with the number one will show up in DevTools. As shown in the following screenshot, there's an error:

To see what the error is, click on the Console tab. You'll see that the sharkey.png file cannot be found:

This is good information. It's telling you it's not a problem related to permissions. It's not a 403; it just can't find the file it's looking for at this location. So one of the things I would do is open up my images folder and make sure that the image is in the folder, and in this case, let's say that it is. There's only one problem, though. The file it's looking for is spelled differently:

It's looking for sharkey, S-H-A-R-K-E-Y, and the file is actually just S-H-A-R-K-Y, so that is easy enough to fix. Now that you know what's wrong, you can just change the name in your HTML:

<img src="images/sharky.png" alt="sharky"> 

If you refresh the browser after saving this, this image should show up:

So these two things, the element inspector and the console, can be extremely useful in experimenting with code and troubleshooting code. My biggest suggestion is if things aren't working as you expect them to with your HTML, CSS, and JavaScript, just open up DevTools and take a look under the hood. Chances are that pretty much all day, you'll have DevTools open. I should also add that Firefox, Safari, and IE have DevTools that all do similar tasks and can be just as useful for troubleshooting in those browsers. We've barely scratched the surface of what developer tools can do. Check out my blog post on troubleshooting HTML and CSS with the Chrome DevTools for more information; it is available at www.richfinelli.com/troubleshooting-html-and-css.

It explains how to create new selectors and how to access computed values instead of declared values, which is nice when debugging CSS rules and determining which rules take priority. It also walks you through the device emulation mode, among other things:

Now you know how to use Chrome DevTools, your ace in the hole for troubleshooting HTML and CSS. Next, you're going to learn how to rename elements, which is where a lot of the power of CSS really takes place.