Doesn't F12 work faster?

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.

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.

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

what if we start messing up with the site

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.

My console is on the right side of the screen. Is that ok?

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.

Where is the Option key?

Two keys to the left of the spacebar (on macs, at least)

What is the shortcut for opening the console on Windows?

It depends on the browser you're using. But usually, it's F12.

What's the keyboard shortcut for Safari? How can I find out?

For you Mac users, read this page about the Dev Tools: https://developer.apple.com/safari/tools/

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

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.

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.

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");```

Main content

Computer programming

Course: Computer programming > Unit 6

Lesson 2: JS and the DOM

Debugging webpages with the browser console

Name: Debugging webpages with the browser console
Uploaded: 2015-09-28T20:42:11Z
Description: 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.

Google Classroom

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?

Sort by:

Joshthecreator
Posted 8 years ago. Direct link to Joshthecreator's post “Doesn't F12 work faster?”
Doesn't F12 work faster?
Button navigates to signup pageComment on Joshthecreator's post “Doesn't F12 work faster?”
(48 votes)
Answer
- Loki Rautio
  Posted 8 years ago. Direct link to Loki Rautio's post “They work just the same. ...”
  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.
  Comment on Loki Rautio's post “They work just the same. ...”
  (33 votes)
Brennen
Posted 8 years ago. Direct link to Brennen's post “My console is on the righ...”
My console is on the right side of the screen. Is that ok?
Button navigates to signup pageComment on Brennen's post “My console is on the righ...”
(2 votes)
Answer
- DY (darryl-yeo.com)
  Posted 8 years ago. Direct link to DY (darryl-yeo.com)'s post “That's perfectly fine. If...”
  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.
  Comment on DY (darryl-yeo.com)'s post “That's perfectly fine. If...”
  (15 votes)
Arnav Arora
Posted 7 years ago. Direct link to Arnav Arora's post “I'm on a Mac. Pamela is o...”
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.
Button navigates to signup pageComment on Arnav Arora's post “I'm on a Mac. Pamela is o...”
(6 votes)
Answer
- manthan.patil.play
  Posted 3 years ago. Direct link to manthan.patil.play's post “In your menu bar, select ...”
  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
  Button navigates to signup page
  (4 votes)
UltimatePokeMaster
Posted 8 years ago. Direct link to UltimatePokeMaster's post “Where is the Option key?”
Where is the Option key?
Button navigates to signup pageButton navigates to signup page
(2 votes)
Answer
- PJRob
  Posted 8 years ago. Direct link to PJRob's post “Two keys to the left of t...”
  Two keys to the left of the spacebar (on macs, at least)
  Button navigates to signup page
  (3 votes)
anmolpreetsingh8008
Posted 2 years ago. Direct link to anmolpreetsingh8008's post “what if we start messing ...”
what if we start messing up with the site
Button navigates to signup pageButton navigates to signup page
(3 votes)
Answer
- Tee
  Posted a year ago. Direct link to Tee's post “Do it, it's fun. You won...”
  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.
  Button navigates to signup page
  (3 votes)
royale674
Posted 3 years ago. Direct link to royale674's post “What is the shortcut for ...”
What is the shortcut for opening the console on Windows?
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Dalendrion
  Posted 3 years ago. Direct link to Dalendrion's post “It depends on the browser...”
  It depends on the browser you're using. But usually, it's F12.
  Comment on Dalendrion's post “It depends on the browser...”
  (4 votes)
victorystorm {Offline}
Posted 5 years ago. Direct link to victorystorm {Offline}'s post “What's the keyboard short...”
What's the keyboard shortcut for Safari? How can I find out?
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- Granttwin
  Posted 5 years ago. Direct link to Granttwin's post “For you Mac users, read t...”
  For you Mac users, read this page about the Dev Tools: https://developer.apple.com/safari/tools/
  Comment on Granttwin's post “For you Mac users, read t...”
  (4 votes)
gosoccerboy5
Posted 3 years ago. Direct link to gosoccerboy5's post “When I use the script tag...”
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
Button navigates to signup pageButton navigates to signup page
(1 vote)
Answer
- ᴇᴛᴇʀɴᴀʟ ʟᴇᴀʀɴᴇʀ
  Posted 3 years ago. Direct link to ᴇᴛᴇʀɴᴀʟ ʟᴇᴀʀɴᴇʀ's post “Khan Academy did not put ...”
  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.
  Comment on ᴇᴛᴇʀɴᴀʟ ʟᴇᴀʀɴᴇʀ's post “Khan Academy did not put ...”
  (3 votes)
HTML Studios
Posted 5 years ago. Direct link to HTML Studios's post “My computer won't let me ...”
My computer won't let me do any of those things on Khan, but it will let me on other websites. Why?
Button navigates to signup pageComment on HTML Studios's post “My computer won't let me ...”
(2 votes)
Answer
theultimatewiseguy
Posted 6 years ago. Direct link to theultimatewiseguy's post “Is there any other way to...”
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.
Button navigates to signup pageComment on theultimatewiseguy's post “Is there any other way to...”
(1 vote)
Answer
- Dalendrion
  Posted 6 years ago. Direct link to Dalendrion's post “F12 does nothing? Well, t...”
  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");
  Comment on Dalendrion's post “F12 does nothing? Well, t...”
  (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.