Web Browsers & Developer Tools Quiz – Test Your DevTools Knowledge

Quiz Options

Question Types

Multiple Choice

Shortcut Keys

DevTools Panels

Difficulty

Browser Focus

Enable Hints

Show Explanations

Question 1 of 10 Score: 0 / 10

Quiz Results

Your Score: 0 / 10

Great job! You're a DevTools expert!

DevTools Glossary

Use Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac) to open DevTools.
Right-click any element and choose "Inspect" to view its HTML/CSS.
The "Lighthouse" tab helps optimize performance, SEO, and accessibility.
Use Ctrl+Shift+C to quickly toggle the element inspector.
The console can run JavaScript expressions directly - try document.title = "Hello"

Tool/Feature	Description	Browser Support
Elements Panel	Inspect and edit HTML/CSS in real-time	All major browsers
Console	Log output, errors, and run JavaScript commands	All major browsers
Sources Panel	Debug JavaScript with breakpoints and step-through	All major browsers
Network Tab	Monitor and analyze network requests	All major browsers
Application Panel	Inspect storage (cookies, local storage, etc.)	All major browsers
Lighthouse	Site performance, accessibility, SEO auditing	Chrome, Edge
Device Toolbar	Mobile device simulation and responsive testing	Chrome, Edge, Firefox
Performance Tab	Record and analyze runtime performance	All major browsers
Memory Tab	Track memory usage and leaks	Chrome, Edge
Security Tab	View security issues and certificates	Chrome, Edge

Official Documentation

Common Keyboard Shortcuts

F12 - Open DevTools (most browsers)
Ctrl+Shift+I - Open DevTools (Windows/Linux)
Cmd+Option+I - Open DevTools (Mac)
Ctrl+Shift+C - Toggle element inspector

Esc - Toggle console/other panels
Ctrl+P - Open file in Sources panel
Ctrl+Shift+P - Open command menu
Ctrl+F - Search in current panel