Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Kbd examples · Function Keys

F12 DevTools Key Kbd for React

A single F12 key, the shortcut that opens browser developer tools.

Framework
UI library

Every web developer reaches for the browser's developer tools, and F12 opens them on Windows and Linux. This React example shows it as a single Kbd cap, for debugging guides, support articles that ask users to open the console, and developer docs.

Preview

Preview width
F12

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

Does F12 open developer tools in every browser?

In Chrome, Edge and Firefox on Windows and Linux, yes. Safari doesn't use F12: turn on its developer features in Settings, then press ⌘⌥I. Chrome and Firefox on Mac also use ⌘⌥I.

Does F12 conflict with anything?

On Mac keyboards, F12 is often a volume key unless Fn is held, which is why ⌘⌥I is the safer Mac shortcut. Some laptops need Fn for every function key.

Is there an F12 for mobile browsers?

No. Connect the phone to a computer and inspect it from the desktop browser: Chrome's remote debugging for Android, Safari's Web Inspector for iPhone and iPad.

Where should the F12 hint appear?

In the step where a guide asks people to open developer tools, next to the Mac shortcut. Support articles should also say which tab to open next, like Console or Network.

Can the F12 shortcut be changed?

Browsers don't let pages change it, and a page shouldn't try to block it. People can remap function keys at the operating system level.

Is the F12 hint enough on its own?

Give the alternatives next to it: ⌘⌥I on Mac, and the browser menu path for people who don't use function keys.

All 39 kbd examples