Join Justin Putney for an in-depth discussion in this video Canary in the coal mine: Check the console first, part of Problem Solving for Web Professionals.
- In this video we're going to take a look at the console. The console acts as a sort of message center for the browser and it displays messages from the active browser tab. If you want to follow along in the exercise files, I'm in chapter two, go into the 02_01 folder, and I'm just going to twirl open the start folder, and open index.htm in the browser, and right away we can see there's something wrong. Now you may be able to guess that it's CSS that's missing, but maybe there's multiple CSS files, you don't know what's going wrong, maybe there's a glitch that's actually causing it not to be loaded, but it's there, we don't know what it is, let's go to the console, that should be the first place we always look.
So maybe as the person was packaging this up, maybe it was me, maybe it was the developer, we're just kind of cleaning up the files, straightening things out, getting rid of stuff we don't need, and I named this style because that's what I usually called it, but in this project it's called main. So all I'd have to do is to edit the name of this and call it main. Now, I've already done that and it's in the final folder, so let's take a look at that. There's the main.css file, so let's open this index file in the browser, and there everything's working as we expect.
Let's just double check and make sure there are no errors in the console. So I'm going to right click and choose Inspect Element, and select Console. and it is nice and empty. This actually should be a final check before you do anything with your website, before it goes public, because a lot of times something is failing and it'll give you a message here, but you won't necessarily see it right away in the browser, but it might be something that needs to be addressed. So I always recommend checking the console and any time you have a problem, that's the first place you should look, especially in Google Chrome because it does a really good job of giving you a lot of messages,very sensitive that way.
So now you that you know how to find the console, and it's value in diagnosing problems, we'll continue to revisit it in other videos. Now let's take a look at how to diagnose HTML syntax errors in the next video.
Learn to turn your web browser into a code inspector, cope with browser incompatibilities, perform cross-platform testing, and more. Justin Putney gives you the skills you need to address the unique problems in each new project—and ensure the quality of your design and your code.
- Using web inspection tools
- Finding and destroying HTML errors
- Locating missing assets
- Supporting Internet Explorer
- Becoming a Google search master
- Testing with online snippet editors, emulators, and more
- Testing responsive layouts
- Debugging code
- Adding new functionality