If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Debugging webpages with the browser console

Learn how to debug your webpages using Chrome developer tools. Explore the JavaScript console and the console.log() function to see how it can display warnings, errors, and log messages.

Want to join the conversation?

Video transcript

- [Voiceover] One of the most useful skills that you can have as a web developer is the ability to debug your web pages using the tools available to you, like the browser developer tools. Every browser these days comes with developer tools, so you should, theoretically, learn how to use all of them, but it's also good to know which browser has the most powerful tools and start your debugging in that browser. Right now, that's Chrome, at least to me, but that could change in the future. Okay, so let's open the developer tools in Chrome. And there's a few different ways that you can do that. I like to find out what the keyboard shortcut is for my browser and OS and use that 'cause that's the fastest. So on Mac, it's Command-Option-I. Ta-da! There's our dev tools. Another way to do it is to do right-click, Inspect Element, and that'll open up the dev tools and it'll open up to the HTML console so you then have to click around to what you want. But it's a pretty quick way as well. And finally, there's the long way, which is to go to your menu, go to More Tools, go to Developer Tools, and that'll open it as well. But that's a sure fire way, but it is long, so I really recommend finding out that keyboard shortcut and just doing it over and over and over 'til you remember it. Okay, so keyboard shortcut open, great. So there are a lot of tools down here, but there's one that we're about to use, so that is what I'm going to show. It's the JavaScript Console. This console shows all of the warnings and errors related to http requests, CSS files, and JavaScript, plus it shows anything that we log out. So to demonstrate, I will use 'console.log' to show a message. Now notice that it's showing lots of syntax errors, like 'consol is not defined'. That's because I'm typing slowly and I'm in this real time environment that's constantly evaluating the new code. So it's showing me all the errors along the way. That's something to keep in mind when you're using the console with your webpages here on Khan Academy. You can ignore all these, all these messages here, until you're done typing and see what the actual error is, or hopefully, there'll be no error. Presto! The console said hello to me. How very sweet of it. All right, so there's a ton more that you can do in your browser dev tools and you should definitely explore them more, but this should be enough to help you in simple debugging as you go through this course.