The console is a built-in tool in your web browser where JavaScript messages and errors appear
When you write JavaScript code, the browser keeps a running log of what your code is doing — errors it hits, messages you tell it to print, and warnings about problems. This log lives in the browser console, a panel you open right inside your browser. Every browser has one, and it looks almost identical across Chrome, Firefox, Safari, and Edge.
The console is where you'll see output from console.log(), the command that prints text or values to that panel. It's also where the browser shows you when something breaks in your code — a missing variable, a typo in a function name, or a file that didn't load. Learning to find and read the console is the fastest way to figure out what your JavaScript is actually doing.
Key Takeaways
- Open the console by pressing F12 (Windows) or Command+Option+I (Mac), then click the Console tab.
- The console shows console.log() output, error messages, and warnings your code produces.
- Red text in the console means an error stopped your code; yellow text means a warning that didn't stop it.
- You can type JavaScript directly into the console to test code or check variable values without editing your file.
- The console remembers what you typed, so you can scroll up to see earlier messages and commands.
Opening the console in Chrome, Firefox, Safari, and Edge
The fastest way to open the console is a keyboard shortcut. On Windows, press F12 or Ctrl+Shift+J. On Mac, press Command+Option+I or Command+Option+J. A panel will open at the bottom or side of your browser window.
If the keyboard shortcut doesn't work, you can open it through the menu. In Chrome or Edge, click the three-dot menu in the top right, then select "More tools" and "Developer tools". In Firefox, click the menu button (three horizontal lines), then "More" and "Web Developer" and "Browser Console". In Safari, you need to enable the developer menu first: go to Safari menu, then Preferences, then Advanced, and check "Show Develop menu in menu bar". Then click Develop and "Show JavaScript Console".
Once the developer tools panel opens, you'll see several tabs across the top. Click the tab labeled Console. That's where your JavaScript output appears.
What you'll see in the console
The console shows three types of messages. Regular output appears in black or dark text — this is what console.log() prints. Errors appear in red with an X icon, and they mean your code hit a problem and stopped running that part. Warnings appear in yellow with a triangle icon, and they mean something might be wrong but your code kept going anyway.
Each message usually shows the file name and line number where it came from, on the right side. If you click that file name, the browser jumps to that exact line in your code. This is how you trace a message back to where you wrote it.
At the bottom of the console is a text input field where you can type JavaScript commands. When you press Enter, the browser runs that code right away and shows you the result. This is useful for testing a function, checking what a variable contains, or trying out a line of code before you add it to your file.
Using console.log() to print values
To send output to the console, use console.log() in your JavaScript file. Put whatever you want to print inside the parentheses. You can print text in quotes, numbers, variable values, or even entire objects.
For example, if you write console.log("Hello"); in your code, the word "Hello" will appear in the console when that line runs. If you write console.log(myVariable);, the current value of myVariable will print. You can print multiple things at once by separating them with commas: console.log("The value is", myVariable); will print both the text and the variable value on the same line.
Many people use console.log() to track whether their code is running the way they expect. For instance, if a button click isn't working, you might add console.log("Button clicked"); inside the click handler. If that message appears in the console when you click the button, you know the handler is running. If it doesn't appear, the handler isn't being called at all.
Reading error messages to find problems
When something breaks, the console shows an error message in red. The message usually tells you what went wrong and which line caused it. Common errors include "Uncaught ReferenceError: [name] is not defined" (you used a variable that doesn't exist), "Uncaught TypeError: [name] is not a function" (you tried to call something that isn't a function), and "Uncaught SyntaxError" (you have a typo in your code, like a missing bracket or semicolon).
The line number shown in the error is where the browser noticed the problem, but the actual mistake might be a few lines earlier. For example, if you forget to close a bracket on line 5, the error might show up on line 8. Start by looking at the line number shown, then look a few lines before it.
If an error message is confusing, copy the exact text and search for it online. Thousands of people have hit the same errors, and you'll usually find explanations and solutions quickly.
Testing code directly in the console
The console input field at the bottom lets you run JavaScript without editing your file. This is useful for testing a small piece of code or checking what a variable contains right now. Type your code and press Enter, and the browser runs it immediately and shows the result.
For example, if you want to check whether a variable called userName exists and what it contains, type userName in the console and press Enter. The console will print its value, or tell you it's not defined. If you want to test a function, type the function name with parentheses, like myFunction(), and the browser will run it and show what it returns.
The console remembers everything you typed. You can scroll up through your previous commands, or click the up arrow key to cycle through them. This saves time if you want to run the same test twice.
Common reasons the console stays empty
If you don't see any output even though you added console.log() to your code, check a few things. First, make sure you're looking at the Console tab, not the Elements or Sources tab. Second, make sure your JavaScript file is actually loaded — check the Network tab to see if the file downloaded without errors. Third, make sure the code you added actually runs. If console.log() is inside a function, that function has to be called for the message to print.
If you still don't see anything, try typing a simple command directly in the console input field, like console.log("test"), and press Enter. If that prints "test", the console is working and the problem is with your code. If nothing prints, your browser might have the console disabled or you might be looking at the wrong window.
Frequently Asked Questions
Can I see console output from a page I didn't write?
Yes. Open the console on any website, and you'll see any messages that site's JavaScript sends to the console. Many sites use console.log() for debugging or to print messages to developers. You can also type commands in the console to interact with that page's JavaScript, though you can only access code and variables that are publicly available.
What's the difference between console.log, console.error, and console.warn?
They all print to the console, but they format the output differently. console.log() prints in regular text, console.error() prints in red with an X icon, and console.warn() prints in yellow with a triangle. Use console.error() and console.warn() when you want messages to stand out, but they don't actually stop your code — only real errors do that.
If I close the console, do the messages disappear?
The messages stay in the console until you refresh the page or close the browser tab. Closing the developer tools panel doesn't clear the history. When you reopen the console, you'll see the same messages that were there before, unless you manually clear them by clicking the trash icon in the console panel.
Can I print objects and arrays to the console?
Yes. If you write console.log(myObject), the console will print the entire object with all its properties expanded so you can see what it contains. This is one of the most useful ways to debug — when something isn't working, print the object to the console and look at its actual values instead of guessing.