How to open the console in Chrome, Edge, Firefox and Safari

01Console shortcuts for every browser

These open the developer tools straight on the console, the panel where the page's errors and warnings show up in red and yellow.

Chrome, Edge and Firefox list these keys in their own developer tools documentation. Apple's documentation only gives Option+Cmd+I, which opens Safari's Web Inspector on its last tab. Option+Cmd+C is the key Safari shows next to Show JavaScript Console in its Develop menu. If it ever does nothing, Option+Cmd+I and a click on the Console tab gets you to the same place.

02What's the Chrome developer tools shortcut?

F12 or Ctrl+Shift+I opens Chrome's developer tools on Windows, and Cmd+Option+I does it on a Mac. Either one opens whichever panel you used last. Ctrl+Shift+C, or Cmd+Shift+C on a Mac, opens the tools with the element picker switched on. Edge uses exactly the same keys, because it's built on the same engine.

On most Mac keyboards the top row controls brightness and volume, which is why F12 needs Fn held down. F12 or Ctrl+Shift+I again, or Cmd+Option+I on a Mac, closes them.

Firefox mostly matches Chrome, with one trap. Ctrl+Shift+I, Cmd+Option+I and F12 open its developer tools, but Ctrl+Shift+J doesn't open the page's console the way it does in Chrome. In Firefox it opens the Browser Console, a separate window that collects messages from the whole browser and its extensions. If someone sends you a Firefox console screenshot full of warnings about add-ons you've never heard of, that's the window they opened.

03How to open the console in Safari

Safari hides its developer tools until you ask for them. Choose Safari, then Settings, open the Advanced tab and tick "Show features for web developers". A Develop menu appears in the menu bar. Choose Develop, then Show JavaScript Console, or press Option+Cmd+C. Older versions of Safari called the setting "Show Develop menu in menu bar".

Once the setting is on, right-clicking anything on a page also offers Inspect Element, which opens the Web Inspector on the Elements tab. The Console tab is next to it.

Safari on iPhone has no console of its own. Turn on Settings, Apps, Safari, Advanced, Web Inspector on the phone, plug it into a Mac with a cable, and the phone's open pages appear in the Mac's Develop menu. It's clumsy, and it's still the only way to see what a page is doing on an iPhone.

04How to open developer tools without a keyboard shortcut

Every browser also has a menu path, which is easier to talk someone through on a call than a three-key shortcut.

Right-clicking the page and choosing Inspect works in all four too. It opens the Elements panel rather than the console, so tell people to click the Console tab afterwards.

05Finding the error once the console is open

The console fills up fast on a busy site, and most of it isn't the problem. Errors are the red lines. In Chrome and Edge, the levels menu above the messages can hide everything but errors, and Firefox has an Errors button in the same spot. Click the small arrow next to an error to expand its stack trace, which shows the code that was running when it broke.

I'd also tick Preserve log in Chrome or Persist Logs in Firefox before reproducing anything. Without it, the console clears every time the page navigates, and a form that submits and reloads wipes the very error you were trying to catch.

The two errors you'll see most often have their own guides: Cannot read properties of undefined and Failed to fetch.