Frontend Shortcuts Reference

Quick reference for VS Code, WebStorm and browser developer shortcuts.

Back to all tools on ToolForge

More in Developer Tools

VS Code – Navigation & File Management

ActionWindows/LinuxmacOS
Command paletteCtrl + Shift + PCmd + Shift + P
Quick open fileCtrl + PCmd + P
Go to file in folderCtrl + P, type #Cmd + P, type #
Go to symbol in fileCtrl + Shift + OCmd + Shift + O
Go to lineCtrl + GCmd + G
Go to definitionF12F12
Peek definitionAlt + F12Option + F12
Open definition to sideCtrl + K, F12Cmd + K, F12
Find referencesShift + F12Shift + F12
Go to next problemF8F8
Go to previous problemShift + F8Shift + F8
Toggle terminalCtrl + `Ctrl + `
Split editorCtrl + \Cmd + \
Focus next editor groupCtrl + 1, 2, 3Cmd + 1, 2, 3
Close editorCtrl + WCmd + W
Switch tabCtrl + TabCtrl + Tab

Note: Backtick (`) is the key left of 1 on US keyboards.

VS Code – Editing & Refactoring

ActionWindows/LinuxmacOS
FindCtrl + FCmd + F
ReplaceCtrl + HCmd + Option + F
Find in filesCtrl + Shift + FCmd + Shift + F
Toggle comment lineCtrl + /Cmd + /
Toggle comment blockShift + Alt + AShift + Option + A
Format documentShift + Alt + FShift + Option + F
Format selectionCtrl + K, Ctrl + FCmd + K, Cmd + F
Duplicate lineShift + Alt + ↓Shift + Option + ↓
Delete lineCtrl + Shift + KCmd + Shift + K
Move line up/downAlt + ↑ / ↓Option + ↑ / ↓
Copy line up/downShift + Alt + ↑ / ↓Shift + Option + ↑ / ↓
Select next occurrenceCtrl + DCmd + D
Select all occurrencesCtrl + Shift + LCmd + Shift + L
Add cursor to clickAlt + ClickOption + Click
Insert cursor aboveCtrl + Alt + ↑Cmd + Option + ↑
Insert cursor belowCtrl + Alt + ↓Cmd + Option + ↓
Expand selectionShift + Alt + →Ctrl + Shift + →
Shrink selectionShift + Alt + ←Ctrl + Shift + ←
Rename symbolF2F2
Quick fixCtrl + .Cmd + .

WebStorm – Navigation & Editing

ActionWindows/LinuxmacOS
Search everywhereShift + ShiftShift + Shift
Find actionCtrl + Shift + ACmd + Shift + A
Go to fileCtrl + Shift + NCmd + Shift + O
Go to lineCtrl + GCmd + G
Go to declarationCtrl + BCmd + B
Go to implementationCtrl + Alt + BCmd + Option + B
Find usagesAlt + F7Option + F7
Find in filesCtrl + Shift + FCmd + Shift + F
Replace in filesCtrl + Shift + RCmd + Shift + R
Recent filesCtrl + ECmd + E
Toggle terminalAlt + F12Option + F12
Format codeCtrl + Alt + LCmd + Option + L
Reformat codeCtrl + Alt + LCmd + Option + L
Duplicate lineCtrl + DCmd + D
Delete lineCtrl + YCmd + Delete
Comment lineCtrl + /Cmd + /
Block commentCtrl + Shift + /Cmd + Option + /
RenameShift + F6Shift + F6
RefactorCtrl + Alt + Shift + TCtrl + Cmd + Option + T
Optimize importsCtrl + Alt + OCtrl + Option + O

Chrome DevTools

ActionWindows/LinuxmacOS
Open DevToolsF12 / Ctrl + Shift + ICmd + Option + I
Toggle element inspectorCtrl + Shift + CCmd + Shift + C
Open ConsoleCtrl + Shift + JCmd + Option + J
Open Elements panelCtrl + Shift + CCmd + Option + C
Toggle device toolbarCtrl + Shift + MCmd + Option + M
Reload pageCtrl + RCmd + R
Hard reload (no cache)Ctrl + Shift + RCmd + Shift + R
View page sourceCtrl + UCmd + Option + U
Next panelCtrl + ]Cmd + ]
Previous panelCtrl + [Cmd + [
Close DevToolsEsc (when focused)Esc (when focused)
Focus command menuCtrl + Shift + PCmd + Shift + P
Search in all sourcesCtrl + Shift + FCmd + Option + F
Search in current fileCtrl + FCmd + F
Go to line in fileCtrl + GCmd + G
Go to line numberCtrl + O, type :lineCmd + O, type :line

Firefox Developer Tools

ActionWindows/LinuxmacOS
Open Developer ToolsF12 / Ctrl + Shift + ICmd + Option + I
Toggle inspectorCtrl + Shift + CCmd + Option + C
Open Web ConsoleCtrl + Shift + KCmd + Option + K
Open Browser ConsoleCtrl + Shift + JCmd + Option + J
Open DebuggerCtrl + Shift + SCmd + Option + S
Open Style EditorCtrl + Shift + TCmd + Option + T
Open PerformanceCtrl + Shift + ECmd + Option + E
Open MemoryCtrl + Shift + MCmd + Option + M
Toggle responsive designCtrl + Shift + MCmd + Option + M
Highlight framesCtrl + Shift + HCmd + Option + H
Screenshot visible nodeRight-click > ScreenshotRight-click > Screenshot
Search in HTMLCtrl + FCmd + F

About Frontend Shortcuts Reference

This comprehensive shortcuts reference covers VS Code, WebStorm, Chrome DevTools, and Firefox Developer Tools. Keyboard shortcuts dramatically improve productivity by reducing mouse dependency and keeping hands on the home row.

The reference is organized by application and task category, making it easy to find the right shortcut whether you're navigating files, editing code, debugging in the browser, or inspecting elements.

Modifier Key Notation

KeyWindows/LinuxmacOSSymbol
ControlCtrlControl (rarely used)⌃
CommandN/ACmd⌘
Alt/OptionAltOption⌥
ShiftShiftShift⇧

Universal Shortcuts Across Applications

Nearly universal shortcuts (Windows/Linux → macOS):
  Ctrl+F → Cmd+F         Find
  Ctrl+H → Cmd+H         Replace (or Hide window on Mac)
  Ctrl+Z → Cmd+Z         Undo
  Ctrl+Y → Cmd+Shift+Z   Redo
  Ctrl+A → Cmd+A         Select all
  Ctrl+C → Cmd+C         Copy
  Ctrl+V → Cmd+V         Paste
  Ctrl+X → Cmd+X         Cut
  Ctrl+S → Cmd+S         Save
  Ctrl+P → Cmd+P         Print (or Quick Open in IDEs)
  Ctrl+N → Cmd+N         New file/window
  Ctrl+W → Cmd+W         Close tab/window
  Ctrl+T → Cmd+T         New tab (or Open symbol in IDEs)
  F12                    Open DevTools
  Ctrl+G → Cmd+G         Go to line (or Find next in browsers)

Chrome vs Firefox DevTools Differences

ActionChromeFirefox
Open ConsoleCtrl+Shift+JCtrl+Shift+K
Open Elements/InspectorCtrl+Shift+CCtrl+Shift+C
Responsive Design ModeCtrl+Shift+MCtrl+Shift+M
Search All SourcesCtrl+Shift+FCtrl+Shift+F
Command MenuCtrl+Shift+PCtrl+Shift+P

Frequently Asked Questions

What is the difference between Ctrl and Cmd shortcuts?
On Windows/Linux, shortcuts use Ctrl key. On macOS, the equivalent is Cmd (⌘). For example, Ctrl+F on Windows becomes Cmd+F on Mac. Some shortcuts differ: Ctrl+Alt on Windows often maps to Cmd+Option on Mac. VS Code and WebStorm show platform-specific shortcuts in their UI.
How do I customize keyboard shortcuts in VS Code?
Open Keyboard Shortcuts with Ctrl+K Ctrl+S (Cmd+K Cmd+S on Mac) or File > Preferences > Keyboard Shortcuts. Search for any command and click the pencil icon to change its binding. You can also edit keybindings.json directly for advanced configurations like chord shortcuts (e.g., Ctrl+K then Ctrl+C).
What are the most essential Chrome DevTools shortcuts?
Essential DevTools shortcuts: F12 or Ctrl+Shift+I (Cmd+Option+I Mac) opens DevTools; Ctrl+Shift+C (Cmd+Option+C) toggles element inspector; Ctrl+Shift+J (Cmd+Option+J) opens Console; Ctrl+Shift+M (Cmd+Option+M) toggles device toolbar; Ctrl+R (Cmd+R) reloads; Ctrl+Shift+R (Cmd+Shift+R) hard reloads ignoring cache.
Why do some shortcuts conflict with browser shortcuts?
Browser shortcuts take precedence over web app shortcuts. For example, Ctrl+T opens a new tab, Ctrl+W closes a tab, Ctrl+L focuses the address bar. When building web apps, avoid these conflicts or require modifier combinations. IDEs like VS Code capture keys before the browser, avoiding conflicts.
What is multi-cursor editing and how do I use it?
Multi-cursor editing allows simultaneous editing at multiple positions. In VS Code: Ctrl+D selects next occurrence of current word; Ctrl+Click adds individual cursors; Alt+Click adds cursor at click position; Ctrl+Shift+L selects all occurrences. WebStorm: Alt+J selects next occurrence; Ctrl+G selects all occurrences.
How do I access browser DevTools on macOS?
Chrome/Safari on Mac: Cmd+Option+I opens DevTools/Web Inspector; Cmd+Option+J opens Console; Cmd+Option+C toggles inspector; Cmd+Option+M toggles device mode. Firefox on Mac: Cmd+Option+I opens Toolbox; Cmd+Option+K opens Web Console; Cmd+Option+J opens Browser Console (chrome).