Open the console with a keyboard shortcut

The fastest way to open Chrome's developer console is to press Ctrl+Shift+J on Windows or Linux, or Cmd+Option+J on Mac. This opens the Console tab directly, which is where you can read error messages, run JavaScript commands, and see what your page is logging.

If you want the full Developer Tools panel instead — which includes the Elements tab, Network tab, and other debugging tools — use Ctrl+Shift+I on Windows or Linux, or Cmd+Option+I on Mac. This opens to whichever tab you used last, though you can click the Console tab once it opens.

Both shortcuts work in any Chrome window, whether you're on a website, a local file, or a web app you're building.

Key Takeaways

  • Press Ctrl+Shift+J (Windows/Linux) or Cmd+Option+J (Mac) to open the Console tab directly.
  • Press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open the full Developer Tools panel.
  • You can also right-click any element on the page and select "Inspect" to open Developer Tools focused on that element.
  • The Console tab shows error messages, warnings, and output from console.log() statements in your code.
  • Once open, you can type JavaScript commands directly into the console and press Enter to run them.

Open the console through the menu

If you prefer using the menu, click the three-dot icon in the top right corner of Chrome, then select More Tools, then Developer Tools. This opens the full Developer Tools panel. Click the Console tab at the top to switch to the console view if it does not open there automatically.

This method takes a few more clicks than the keyboard shortcut, but it is useful if you forget the shortcut or prefer navigating menus.

Right-click to inspect and open the console

Right-click any element on a webpage — text, a button, an image, anything — and select Inspect from the menu. This opens Developer Tools with the Elements tab focused on that specific element, showing you its HTML and CSS.

Once Developer Tools is open, click the Console tab at the top to switch to the console. This method is useful when you want to examine a specific part of the page and then run console commands related to it.

What you see in the console

The console displays three types of messages: errors (shown in red), warnings (shown in yellow), and logs (shown in black). Errors are problems that stopped the page from working correctly. Warnings are things that might cause issues but did not stop the page. Logs are messages that the page's code intentionally sent to the console using console.log().

At the bottom of the console is a text input field where you can type JavaScript code. Type any valid JavaScript command and press Enter to run it. For example, you can type document.title to see the page's title, or console.log("hello") to print text to the console.

The console also shows network requests, timing information, and other debugging data depending on what tabs you have open in Developer Tools.

Run JavaScript commands in the console

Once the console is open, you can type any JavaScript command into the input field at the bottom and press Enter. For example, typing 2 + 2 and pressing Enter will show 4 as the result. You can access variables from the page, call functions, modify the DOM, and test code snippets.

This is useful for testing small pieces of code without saving a file, checking what a variable contains at a specific moment, or running one-off commands to change the page's behavior. Any command you run executes in the context of the current page, so you can interact with its JavaScript, HTML, and CSS.

Clear the console

To clear all messages from the console, type clear() in the input field and press Enter. You can also click the circle-with-slash icon (usually in the top left of the console area) to clear the console with one click.

Clearing the console does not affect the page itself — it only removes the messages from the console view. New errors and logs will appear as they happen.

Frequently Asked Questions

Why is the console showing red error messages?

Red messages are JavaScript errors that occurred on the page. They usually mean a script failed to run, a function was called incorrectly, or a resource (like an image or stylesheet) failed to load. Read the error message to see what went wrong, and check the file name and line number shown to find the problem in your code.

Can I edit the page by typing in the console?

Yes. You can use console commands to change the page's HTML, CSS, and JavaScript while it is open. For example, document.body.style.backgroundColor = "red" will change the page background to red. These changes only affect what you see in your browser and disappear when you reload the page.

What is the difference between the Console tab and the Elements tab?

The Console tab shows error messages and lets you run JavaScript commands. The Elements tab shows the page's HTML structure and CSS styles, and lets you inspect and edit them visually. Use the Console tab to debug code and the Elements tab to inspect the page's structure.

Does opening the console slow down my page?

Opening Developer Tools can use extra memory and may slightly affect performance, but it does not change how the page runs. Close Developer Tools when you are done debugging to free up resources.