Command palette, settings and themes

Opening the command palette, then walking through Settings: Appearance, Code and Keyboard Shortcuts. Narrated, with sound. The dark and light versions follow the site's theme.

Command palette

Press Ctrl/⌘ + K anywhere in the panel or the client tab. Typing filters every action and setting, including one entry per theme, mode and select option. Enter runs the highlighted one.

Settings

The gear opens Settings. It sits in the header of the client tab, and at the end of the Traffic / Client switch in DevTools. Sections: Appearance, Environments, Traffic, Client, Response, Code and Keyboard Shortcuts.

Appearance

• Mode: System, Light or Dark. System follows DevTools’ own theme in the panel and your OS in the client tab.
• Theme: Wireglass, the brand theme with an ink-blue canvas, violet and cyan glows, glass surfaces and a compact layout, or the flat Classic themes modelled on VS Code and IntelliJ.

A choice applies at once, is saved, and updates every open panel and client tab. If your OS asks for reduced transparency, the glass surfaces turn solid.

Code

Controls every code surface: the editors, read-only code views, and the response tree, table and inspector. Font, size and line height apply everywhere at once, and a live Preview shows the result. Three shortcuts step the size without opening Settings: Alt + =, Alt + - and Alt + 0 (reset).

Keyboard Shortcuts

Click + Add next to a command, then press the keys you want. A chord already used offers Replace or Cancel. Reserved chords that Chrome and DevTools keep (Mod + T, W, N, Q and a few others) can’t be bound.

See every default key in the shortcut reference and every option in the settings reference.