Main content
Computer programming
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?
- Doesn't F12 work faster?(48 votes)
- They work just the same. Some computers don't have F12 or the button is used for something else, so it's more straightforward just to show the right click method.(33 votes)
- My console is on the right side of the screen. Is that ok?(2 votes)
- That's perfectly fine. If you prefer it to be on the bottom or in a separate window, there might be a button for that in the top right corner.(15 votes)
- I'm on a Mac. Pamela is on a Mac, but has Chrome, but I have Safari. Could you tell me if I have to switch to Chrome, because I was doing just fine on Safari before I saw this. The thing is, that I cannot access it with the shortcut or with anything else. Could you guys tell me how to access the browser console on Safari OR switch to Chrome?
Thanks.(6 votes)- In your menu bar, select Safari > Preferences > Advanced(in the top menu), then select “Show Develop menu in menu bar”. Then just do Cmd+Option+I(4 votes)
- Where is the Option key?(2 votes)
- Two keys to the left of the spacebar (on macs, at least)(3 votes)
- what if we start messing up with the site(3 votes)
- Do it, it's fun.
You won't affect the actual website. You're not changing the code that the server is sending, you're just changing the static code that's been sent to you.
If you hate what you've done, you can refresh the webpage which will cause the server to send you a new page instance.(3 votes)
- What is the shortcut for opening the console on Windows?(1 vote)
- It depends on the browser you're using. But usually, it's F12.(4 votes)
- What's the keyboard shortcut for Safari? How can I find out?(1 vote)
- For you Mac users, read this page about the Dev Tools: https://developer.apple.com/safari/tools/(4 votes)
- When I use the script tags and browser console, why don't I have to use semicolons? trying to do anything like that in Khan Academy's JS Coding environment would cause Oh Noes to pop up any day.
edit: it seems to only be that way for console.log. weird(1 vote)- Khan Academy did not put as much effort into having a strict, safe environment for their webpage IDE. The lack of requirement for semicolons is actually a result of automatic semicolon insertion, a feature of most JS interpreters.(3 votes)
- My computer won't let me do any of those things on Khan, but it will let me on other websites. Why?(2 votes)
- Is there any other way to find out what a variable is that doesn't use developer tools? I'm using a school computer and it doesn't let use inspect element.(1 vote)
- F12 does nothing? Well, then you really should get a different computer. Otherwise you're out of luck.
You could also create alerts, though. They may be annoying, but they get the job done.alert("Hi");
(4 votes)
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.