Open the Chrome Console in Three Ways

The Chrome Developer Console is a built-in tool that shows you what your browser is doing behind the scenes when you visit a website. You can open it right now on any webpage using a keyboard shortcut, a menu, or by right-clicking on the page.

The fastest method is to press Ctrl+Shift+J on Windows or Linux, or Command+Option+J on Mac. This opens the Console tab directly. If you want the full Developer Tools panel instead — which includes the Console plus tabs for inspecting HTML, checking network activity, and more — use Ctrl+Shift+I (Windows/Linux) or Command+Option+I (Mac), then click the Console tab.

The third way works on any element: right-click anywhere on a webpage and select Inspect or Inspect Element. This opens Developer Tools with the Elements tab active, showing you the HTML code for that specific part of the page. Click the Console tab to switch to the console view.

Key Takeaways

  • Press Ctrl+Shift+J (Windows/Linux) or Command+Option+J (Mac) to open the Console tab directly without opening the full Developer Tools panel.
  • The Console shows error messages, warnings, and log output that websites send while they load and run.
  • You can type JavaScript commands directly into the console to test code or interact with the page in real time.
  • Right-clicking on any element and selecting Inspect opens Developer Tools focused on that specific part of the page's HTML.
  • The Network tab in Developer Tools shows you every file the page downloads and how long each one takes to load.

What You See in the Console Tab

When you open the Console, you are looking at a log of messages that the website has sent while loading and running. Most of the time it is empty or shows a few informational messages. If something goes wrong — a broken image, a failed network request, or a JavaScript error — the console displays a red error message with details about what failed and where in the code it happened.

At the bottom of the Console is a text input field where you can type. This is where you run JavaScript commands directly. For example, you could type document.title and press Enter to see the title of the current page, or type console.log("hello") to send your own message to the console. This is useful for testing small pieces of code or checking what data a website has loaded.

Reading Error Messages and Warnings

Chrome groups console messages by type: errors (red), warnings (yellow), and informational messages (blue or gray). An error message means something broke — a file failed to read, a function does not exist, or a variable was used incorrectly. A warning means something is not ideal but the page kept running anyway.

Each message includes the file name and line number where the problem occurred. Click on that link to jump to the exact spot in the code. If you see the same error multiple times, Chrome collapses them and shows a count instead. This helps you spot patterns — for example, if a single broken image link is requested 50 times, you will see one error with a count of 50.

Using the Console to Test Code

The console is a sandbox where you can run JavaScript without affecting the page permanently. Type a command, press Enter, and Chrome executes it when ready and shows you the result. This is how developers test ideas quickly without editing a file and reloading.

For example, you could type document.querySelectorAll("button") to get a list of every button on the page, or localStorage.getItem("username") to check what data the page has stored about you locally. You can also modify the page: typing document.body.style.backgroundColor = "blue" would turn the page background blue for as long as you stay on that page (reloading undoes it).

Clearing the Console and Filtering Messages

If the console fills up with old messages and you want a fresh view, click the circle-with-a-line icon (the clear button) in the top left of the Console tab. This erases all logged messages but does not affect the page itself.

You can also filter messages by type using the buttons at the top: click the circle icon to show all messages, the warning triangle to show only warnings, or the red X to show only errors. If you want to search for a specific word in the console output, press Ctrl+F (Windows/Linux) or Command+F (Mac) to open the search box.

The Console vs. Other Developer Tools Tabs

The Console is one tab in a larger toolbox. The Elements tab (or Inspector on some browsers) shows the HTML structure of the page and lets you see which CSS rules are applied to each element. The Network tab records every file the page downloads — images, scripts, stylesheets, data requests — and shows you how long each one took and whether it succeeded or failed.

The Sources tab is where developers set breakpoints and step through code line by line to find bugs. The Performance tab records how long the page takes to load and run, breaking down the time spent on different tasks. For most people, the Console and Elements tabs are the most useful for understanding what a page is doing.

Keeping the Console Open While You Browse

By default, the Developer Tools close when you navigate to a new page. If you want to keep them open, click the three-dot menu in the top right of the Developer Tools panel and select Dock side or Dock to bottom. This pins the tools to your window so they stay open as you click links and move around the site.

You can also resize the Developer Tools panel by dragging its edge. If it is docked to the bottom, drag the top edge up or down. If it is docked to the side, drag the left or right edge. This is useful if you want to see both the page and the console at the same time without one taking up too much space.

Frequently Asked Questions

Why does the console show errors when the page looks fine?

Some errors do not break the page — they just mean a feature did not work as intended. For example, a website might try to load an ad from a server that is down, fail, and then continue working normally. The error is logged but invisible to you. Other errors happen in code that is not critical to the page displaying.

Can I use the console on mobile Chrome?

Yes. On Android, open Chrome, press the three-dot menu, tap More tools, then Developer tools. On iPhone, you need to enable it in Settings: go to Settings > Safari > Advanced > Web Inspector, then open Safari and long-press on a page to select Inspect Element. Chrome on iPhone does not have a built-in console.

What does "undefined" mean when I type something in the console?

Undefined means the command ran but did not return a value. For example, console.log("hello") prints "hello" to the console but returns undefined because the log function does not send back a result. This is normal and not an error.

Will typing in the console break the website?

Typing read-only commands like document.title is completely safe. Commands that change the page, like document.body.style.backgroundColor = "blue", only affect what you see in your browser right now — they do not change the actual website or affect other users. Reloading the page undoes all changes.

How do I save console output to a file?

Right-click in the console area and select Save as to read the messages as a text file. You can also select all the text with Ctrl+A (or Command+A on Mac), copy it, and paste it into a text editor.