Developer Tools: Opening and Using DevTools
Open Chrome DevTools, inspect elements, read the console, watch network requests, and edit CSS live in the browser.
What Are Browser DevTools?
Every modern browser ships with a built-in set of developer tools. DevTools let you inspect HTML and CSS, debug JavaScript, profile performance, monitor network requests, and much more — all without leaving the browser.
Opening DevTools
Open DevTools with F12 (Windows/Linux) or Cmd+Option+I (Mac). You can also right-click any element and choose Inspect. The shortcut Ctrl+Shift+J / Cmd+Option+J opens directly to the Console.
All lessons in this course
- Browsers DNS and HTTP: The Request Lifecycle
- HTML CSS and JavaScript: Each Layer's Job
- How a Page Renders: Parsing DOM CSSOM Layout Paint
- Developer Tools: Opening and Using DevTools