DevTools (Chrome)
Powerful built-in developer tools revolutionizing web development with DOM manipulation, network analysis, and performance profiling
F12
Open DevTools
Opens Chrome DevTools with the last used panel.
💡 Hint: F12 = Developer Tools
Ctrl+Shift+I
Open DevTools (Alternative)
Opens Chrome DevTools with the last used panel.
💡 Hint: Inspect
Ctrl+Shift+J
Open Console panel
Opens the JavaScript Console panel directly.
💡 Hint: JavaScript Console
Ctrl+Shift+C
Open Elements panel
Opens the Elements panel and enables inspect element mode.
💡 Hint: Click to inspect
F1
Show Settings
Shows the DevTools settings.
💡 Hint: F1 = Help/Settings
Ctrl+]
Focus next panel
Moves focus to the next DevTools panel.
💡 Hint: ] = Right (next)
Ctrl+[
Focus previous panel
Moves focus to the previous DevTools panel.
💡 Hint: [ = Left (previous)
Ctrl+Shift+D
Toggle docking position
Toggles the docking position of DevTools.
💡 Hint: Docking position
Ctrl+Shift+M
Toggle Device Mode
Toggles the device emulation mode.
💡 Hint: Mobile device
Ctrl+Shift+P
Open Command Menu
Opens the Command Menu with access to all commands.
💡 Hint: Palette
Escape
Toggle drawer
Toggles the visibility of the bottom drawer.
💡 Hint: Escape = Close/Open
F5
Normal reload
Reloads the page normally.
💡 Hint: F5 = Refresh
Ctrl+F5
Hard reload
Reloads the page ignoring cached content.
💡 Hint: Ctrl+F5 = Force refresh
Ctrl+F
Find in panel
Searches for text within the current panel.
💡 Hint: Find
Ctrl+Shift+F
Search across all sources
Searches for text across all loaded resources.
💡 Hint: Find in all files
Ctrl+O
Open file
Opens a file in the Sources panel.
💡 Hint: Open file
Ctrl+Shift++
Zoom in
Zooms in the DevTools interface.
💡 Hint: + = Plus (zoom in)
Ctrl+-
Zoom out
Zooms out the DevTools interface.
💡 Hint: - = Minus (zoom out)
Ctrl+0
Reset zoom
Resets the zoom level to default.
💡 Hint: 0 = Zero (reset)
Ctrl+Z
Undo change
Undoes changes in the Elements panel.
💡 Hint: Ctrl+Z = Undo
Ctrl+Y
Redo change
Redoes changes in the Elements panel.
💡 Hint: Ctrl+Y = Redo
Arrow Up/Down
Navigate elements
Navigates up and down through elements in the DOM.
💡 Hint: Arrow keys = Navigate
Right Arrow
Expand element
Expands the selected element to show child elements.
💡 Hint: → = Expand
Left Arrow
Collapse element
Collapses the selected element.
💡 Hint: ← = Collapse
Enter
Edit attribute
Enters attribute editing mode for the selected element.
💡 Hint: Enter = Start editing
H
Hide element
Toggles visibility of the selected element.
💡 Hint: Hide
F2
Edit as HTML
Edits the selected element as HTML.
💡 Hint: F2 = Edit mode
F8
Pause/Resume script execution
Pauses or resumes JavaScript execution.
💡 Hint: F8 = Pause/Resume
F10
Step over
Steps over the next function call.
💡 Hint: F10 = Step over
F11
Step into
Steps into the next function call.
💡 Hint: F11 = Step in
Shift+F11
Step out
Steps out of the current function.
💡 Hint: Shift+F11 = Step out
Ctrl+S
Save changes
Saves local changes.
💡 Hint: Save
Ctrl+G
Go to line
Goes to a specific line number.
💡 Hint: Go to line
Ctrl+B
Toggle breakpoint
Adds or removes a breakpoint on the current line.
💡 Hint: Breakpoint
Ctrl+/
Toggle comment
Toggles comments on selected lines.
💡 Hint: / = Slash (comment)
Ctrl+L
Clear console
Clears all console content.
💡 Hint: Clear
Ctrl+`
Focus Console
Moves focus to the Console.
💡 Hint: ` = Backtick
Shift+Enter
Multiline input
Forces multiline input in the console.
💡 Hint: Shift+Enter = New line
Ctrl+E
Start/Stop recording
Starts or stops recording network activity.
💡 Hint: Ctrl+E = Enable/Disable
Ctrl+R
Record reload
Reloads the page and records network activity.
💡 Hint: Reload
R
Replay XHR
Replays the selected XHR request.
💡 Hint: Replay