DevTools (Firefox)
Powerful built-in developer tools revolutionizing web development with DOM manipulation, network analysis, and performance profiling
Ctrl+Shift+I
Open Toolbox
Opens the Toolbox with the most recent tool activated.
💡 Hint: Inspector
Ctrl+Shift+K
Open Web Console
Opens the Web Console to view JavaScript console and log messages.
💡 Hint: Konsole
Ctrl+Shift+C
Pick an element from the page
Toggles element picker mode and opens/focuses the Inspector tab.
💡 Hint: Choose element
Ctrl+Shift+Z
Open Debugger
Opens the JavaScript Debugger to debug code.
💡 Hint: DebugZ (last letter)
Ctrl+Shift+E
Open Network Monitor
Opens the Network Monitor to inspect network requests and responses.
💡 Hint: Network
Ctrl+Shift+M
Toggle Responsive Design Mode
Toggles Responsive Design Mode to preview pages on different device sizes.
💡 Hint: Mobile
Ctrl+]
Cycle through tools right
Cycles through developer tools from left to right.
💡 Hint: Right direction ]
Ctrl+[
Cycle through tools left
Cycles through developer tools from right to left.
💡 Hint: Left direction [
F1
Toggle settings
Toggles between active tool and settings.
💡 Hint: F1 = Help/Settings
Esc
Toggle split console
Toggles the split console view (except when console is the current tool).
💡 Hint: Escape
Ctrl+J
Go to line
Jumps to a specific line number.
💡 Hint: Jump to line
Ctrl+F
Find in file
Searches for text in the current file.
💡 Hint: Find
Ctrl+/
Comment/uncomment line(s)
Toggles comments on selected lines.
💡 Hint: / = Comment symbol
Delete
Delete selected node
Deletes the selected HTML element.
💡 Hint: Delete
F2
Edit as HTML
Edits the selected element as HTML.
💡 Hint: F2 = Edit mode
H
Hide/show selected node
Toggles visibility of the selected element.
💡 Hint: Hide
S
Scroll node into view
Scrolls the page to make the selected element visible.
💡 Hint: Scroll
↑
Increment value
Increments selected CSS value by 1.
💡 Hint: ↑ = Increase
↓
Decrement value
Decrements selected CSS value by 1.
💡 Hint: ↓ = Decrease
Shift+↑
Increment value by 10
Increments selected CSS value by 10.
💡 Hint: Shift + ↑ = Large increase
Ctrl+↑
Increment value by 0.1
Increments selected CSS value by 0.1.
💡 Hint: Ctrl + ↑ = Small increase
F8
Resume execution
Resumes execution when paused at a breakpoint.
💡 Hint: F8 = Play
F10
Step over
Executes current line and moves to the next line (doesn't enter functions).
💡 Hint: F10 = Step over
F11
Step into
Executes current line and steps into functions.
💡 Hint: F11 = Step in
Shift+F11
Step out
Completes execution of current function and returns to caller.
💡 Hint: Shift + F11 = Step out
Ctrl+B
Toggle breakpoint
Toggles a breakpoint on the current line.
💡 Hint: Breakpoint
Ctrl+P
Search for scripts
Searches for script files by name.
💡 Hint: Pick script
Ctrl+Shift+L
Clear console output
Clears all console output messages.
💡 Hint: Clear
F9
Reverse search history
Initiates reverse search through command history.
💡 Hint: F9 = History search
Shift+Enter
Add new line
Adds a new line for entering multiline expressions.
💡 Hint: Shift + Enter = New line
Shift+F7
Open Style Editor
Opens the Style Editor to edit CSS files.
💡 Hint: Shift + F7 = Style
Ctrl+S
Save stylesheet
Saves the current stylesheet to disk.
💡 Hint: Save
Ctrl++
Increase font size
Increases the font size in developer tools.
💡 Hint: + = Zoom in
Ctrl+-
Decrease font size
Decreases the font size in developer tools.
💡 Hint: - = Zoom out
Ctrl+0
Reset font size
Resets the font size to default in developer tools.
💡 Hint: 0 = Reset
Ctrl+Shift+D
Toggle docking mode
Toggles toolbox between docking modes (bottom/side/window).
💡 Hint: Docking