The console log is a built-in tool in your web browser that shows messages your JavaScript code sends to it

When you write console.log() in JavaScript, the text or data you put inside the parentheses gets printed to a special panel called the browser console. This console is part of your browser's developer tools — the same place where you can inspect HTML elements, check CSS styles, and debug code that isn't working.

The console log itself is not a separate program or website. It lives inside your browser, and you open it the same way on every site you visit. Once it's open, you'll see any messages your JavaScript code has sent there, plus error messages if something went wrong.

Key Takeaways

  • Open the browser console by pressing F12 (Windows) or Command+Option+I (Mac), then click the Console tab.
  • The console.log() function sends text or data from your JavaScript code to the console panel so you can see what your code is doing.
  • Error messages and warnings appear in the console automatically, even if you didn't write console.log() yourself.
  • The console is the fastest way to test small pieces of JavaScript code without building a whole webpage.

How to open the console in each browser

Every modern browser has developer tools built in. The keyboard shortcut is the quickest way to open them.

On Windows or Linux: Press F12 or Ctrl+Shift+J. Your browser will open a panel at the bottom or side of the screen. Look for a tab labeled "Console" and click it if it's not already selected.

On Mac: Press Command+Option+I or Command+Option+J. The developer tools panel will appear, and you'll see the Console tab. If you don't see it, click the "Console" label at the top of the panel.

Using the menu: You can also right-click anywhere on a webpage and select "Inspect" or "Inspect Element." The developer tools will open. Then click the Console tab to see the console log.

What you'll see in the console

The console shows several types of messages. Log messages are the ones you write with console.log() — they appear in black text and show whatever data you told them to display. Error messages appear in red and tell you when something in your JavaScript code broke or didn't work the way it was supposed to. Warning messages appear in yellow and alert you to things that might cause problems later.

Each message shows the exact line number in your JavaScript file where it came from. If you click that line number, your browser will jump to that spot in the code. This makes it straightforward to find where you wrote console.log() or where an error happened.

At the top of the console, you'll see a text input field. You can type JavaScript code directly into this field and press Enter to run it. This is useful for testing small pieces of code or checking the value of something right now, without editing your actual file.

Why developers use console.log()

Console.log() is the main tool developers use to understand what their code is doing while it runs. If you write a function that's supposed to calculate a price, you can add console.log() to print the price at each step and see where the math went wrong. If a button isn't responding when you click it, you can add console.log() inside the click handler to confirm the function is actually running.

It's faster than guessing. Instead of staring at your code and trying to imagine what it's doing, you can watch it tell you exactly what's happening in real time. Once you find and fix the problem, you can delete the console.log() lines or leave them in — they don't affect how your website works for visitors.

Console.log() with different types of data

Console.log() can print almost anything. If you write console.log("Hello"), it prints the word Hello. If you write console.log(42), it prints the number 42. If you write console.log(true), it prints true.

You can also print objects and arrays — the complex data structures that JavaScript uses. If you have an object with a person's name and age, console.log() will print it in a way you can expand and explore. This is especially useful when you're working with data from a server or from a form that a user filled out.

You can print multiple things at once by separating them with commas: console.log("Price:", 29.99, "Tax:", 2.40) will print all four pieces of information on one line in the console.

Other console methods besides console.log()

JavaScript has other console methods that work the same way as console.log() but organize messages differently. console.error() prints messages in red, the same color as error messages, so they stand out. console.warn() prints messages in yellow. console.table() takes an array or object and displays it as a formatted table instead of plain text, which is easier to read when you have a lot of data.

These alternatives don't change how your code works — they just change how the messages look in the console. Most of the time, console.log() is all you need. The colored versions are useful when you want to make certain messages stand out so you don't miss them while you're reading through a long list of console output.

Clearing the console and keeping it organized

If your console fills up with old messages and you want to start fresh, type clear() in the console input field and press Enter. The console will empty, and you'll see only new messages from that point forward.

You can also filter messages by type. Most browsers have buttons or a search box at the top of the console panel. Click the error icon to show only errors, the warning icon to show only warnings, or use the search box to find messages that contain specific text. This helps when you're debugging a complex page with hundreds of messages.

Frequently Asked Questions

Does console.log() slow down my website?

No. Console.log() has almost no effect on performance. Visitors won't see the console unless they open developer tools themselves, and the messages don't affect how your website runs. You can leave console.log() in your code or remove it — either way is fine.

Can visitors see my console.log() messages?

Only if they open the developer tools. Most visitors never do. Your console.log() messages are for you and other developers who are testing or debugging the code. They're not visible in the normal webpage.

What if I see errors in the console that I didn't write?

Errors can come from browser extensions, third-party scripts you included (like analytics or ads), or bugs in your own code. Read the error message and the line number it points to. If it's from a script you didn't write, you can usually ignore it unless it's breaking your website.

Can I print the same message multiple times without typing it over and over?

Yes. Put your console.log() inside a loop or a function that runs multiple times. For example, if you have a loop that counts from 1 to 10, you can add console.log() inside it to print each number. The message will appear once for each time the code runs.

What's the difference between console.log() and console.error()?

They work the same way — both print messages to the console. The only difference is appearance: console.error() prints in red to make the message stand out. Use console.error() when you want to highlight something important or wrong, and console.log() for regular information.