🔥 DevTools (Firefox) Popular Shortcuts
Master essential Firefox DevTools shortcuts to dramatically improve your web development debugging efficiency. Inspect elements, work with console, and debug code smoothly.
TOP 1
Ctrl+Shift+C
Pick an element from the page
Toggles element picker mode and opens/focuses the Inspector tab.
🎯 Quickly select and inspect any element on the page with a simple mouse click
💡 Hint: Choose element
TOP 2
Ctrl+Shift+K
Open Web Console
Opens the Web Console to view JavaScript console and log messages.
🎯 Instantly open the console to check JavaScript errors, logs, and execute commands
💡 Hint: Konsole
TOP 3
Ctrl+Shift+M
Toggle Responsive Design Mode
Toggles Responsive Design Mode to preview pages on different device sizes.
🎯 Check display on various device sizes and quickly discover responsive design issues
💡 Hint: Mobile
TOP 4
F10
Step over
Executes current line and moves to the next line (doesn't enter functions).
🎯 Execute code line by line during debugging and track the flow without entering function details
💡 Hint: F10 = Step over
TOP 5
Esc
Toggle split console
Toggles the split console view (except when console is the current tool).
🎯 Show split console with Esc key to check logs while using any tool
💡 Hint: Escape
TOP 6
F2
Edit as HTML
Edits the selected element as HTML.
🎯 Directly edit HTML of selected elements and see changes in real-time
💡 Hint: F2 = Edit mode
TOP 7
Shift+↑
Increment value by 10
Increments selected CSS value by 10.
🎯 Quickly adjust CSS values by 10 units for efficient style fine-tuning
💡 Hint: Shift + ↑ = Large increase