Element inspection shortcuts that accelerate HTML/CSS inspection and editing to instantly resolve layout and style issues

Ctrl+Shift+C

Pick an element from the page

Toggles element picker mode and opens/focuses the Inspector tab.

💡 Hint: Choose element

🎯 Select page elements with a click to quickly inspect HTML and CSS

Edit as HTML

Edits the selected element as HTML.

💡 Hint: F2 = Edit mode

🎯 Directly edit HTML of selected elements and see changes in real-time

Delete

Delete selected node

Deletes the selected HTML element.

💡 Hint: Delete

🎯 Instantly delete unnecessary elements to identify page layout issues

Hide/show selected node

Toggles visibility of the selected element.

💡 Hint: Hide

🎯 Toggle element visibility to check layout impact

Scroll node into view

Scrolls the page to make the selected element visible.

💡 Hint: Scroll

🎯 Scroll selected elements into view to confirm their position on the page

↑

Increment value

Increments selected CSS value by 1.

💡 Hint: ↑ = Increase

🎯 Adjust CSS values with arrow keys for efficient style fine-tuning

Shift+↑

Increment value by 10

Increments selected CSS value by 10.

💡 Hint: Shift + ↑ = Large increase

🎯 Adjust CSS values by 10 units to quickly apply large changes

Ctrl+↑

Increment value by 0.1

Increments selected CSS value by 0.1.

💡 Hint: Ctrl + ↑ = Small increase

🎯 Adjust CSS values by 0.1 units for precise style adjustments

DevTools (Firefox)