DevTools (Chrome)
Powerful built-in developer tools revolutionizing web development with DOM manipulation, network analysis, and performance profiling
Element inspection shortcuts that accelerate HTML/CSS inspection and editing to instantly resolve UI issues
Ctrl+Shift+C
Open Elements panel
Opens the Elements panel and enables inspect element mode.
💡 Hint: Click to inspect
🎯 Launch element inspection mode to directly select HTML elements by clicking
Arrow Up/Down
Navigate elements
Navigates up and down through elements in the DOM.
💡 Hint: Arrow keys = Navigate
🎯 Quickly navigate DOM structure with arrow keys to understand element relationships
Right Arrow
Expand element
Expands the selected element to show child elements.
💡 Hint: → = Expand
🎯 Expand elements to show child elements and examine DOM structure in detail
Enter
Edit attribute
Enters attribute editing mode for the selected element.
💡 Hint: Enter = Start editing
🎯 Edit HTML attributes directly and see changes in real-time
H
Hide element
Toggles visibility of the selected element.
💡 Hint: Hide
🎯 Toggle element visibility to instantly check layout impacts
F2
Edit as HTML
Edits the selected element as HTML.
💡 Hint: F2 = Edit mode
🎯 Edit entire HTML in edit mode to efficiently make complex structural changes
Ctrl+F
Find in panel
Searches for text within the current panel.
💡 Hint: Find
🎯 Quickly search for specific text or attributes within the Elements panel