Chrome DevTools is the set of web developer tools built into Google Chrome. Open it with F12, Ctrl + Shift + I on Windows and Linux, or Cmd + Option + I on a Mac. It lets you inspect and edit a page’s HTML and CSS live, run JavaScript, see every network request, measure performance, emulate phones and audit pages. This guide covers the panels you will use most, in the order most people need them, and the shortcuts that save the most time.
Opening DevTools and finding your way around
Besides the keyboard shortcuts, you can right-click any element and choose Inspect, which opens DevTools with that element selected. Chrome’s menu also has More tools > Developer tools.
Three controls matter from the start:
- Panel tabs along the top (Elements, Console, Sources, Network and more). Less-used panels hide behind the
>>overflow arrow. - Dock position in the three-dot menu: right, bottom, left or a separate window. Separate window is useful with two screens.
- The Command Menu:
Ctrl + Shift + P(Cmd + Shift + Pon a Mac). Type any feature name (“screenshot”, “disable JavaScript”, “dark mode”) to find it. It is the fastest way to learn what DevTools can do.
Elements: inspect and edit HTML and CSS
The Elements panel shows the live DOM, not the original source, so it includes anything JavaScript added. Select a node and the Styles pane on the right shows every CSS rule that applies, which rule wins, and which are crossed out.
Things to try:
- Click any value in Styles to edit it and see the result immediately. Changes are lost on reload unless you set up local overrides.
- Toggle states like
:hoverand:focuswith the :hov button to style interactive states without holding the mouse still. - Click the colour swatch next to a colour to open the picker, which also shows a contrast ratio for text.
- Open the Computed tab to see the final value of every property and the box model.
- Look for the flex and grid badges next to elements; clicking them overlays the layout lines on the page.
Console: run JavaScript and read errors
The Console shows errors, warnings and console.log output from the page, and lets you run JavaScript in the page’s context. Useful helpers:
$0is the element currently selected in the Elements panel.$$('a')returns all elements matching a selector as an array.copy(obj)copies a value to the clipboard.- Filter by level (errors, warnings) and by text to cut through noise.
Sources: debug JavaScript
The Sources panel shows the page’s files and is where you set breakpoints. Click a line number to pause there, then step through the code and inspect variables. Conditional breakpoints (right-click a line number) pause only when an expression is true. Event listener breakpoints pause on any click, key press or other event, which helps when you do not know which code runs.
Network: see every request
The Network panel lists every request the page makes: documents, scripts, images, fonts and API calls, with status, size and timing. Click a request to see its headers, payload, response and timing breakdown.
Practical uses:
- Tick Disable cache while DevTools is open to always load fresh files.
- Use the Throttling dropdown to simulate a slow mobile connection.
- Filter by type (Fetch/XHR, JS, Img) to find the request you care about.
- Right-click a request and copy it as
fetchorcURLto replay it elsewhere.
Performance: find what makes a page slow
Record a page load or an interaction, and the Performance panel shows a timeline of what the browser did: scripting, rendering, painting and network. Long tasks are marked in red. The panel also shows live Core Web Vitals (LCP, CLS and INP) for your own interactions, and insights that point to likely causes. For mobile-like results, set CPU throttling to 4x or 6x before recording. More in the mobile page speed test guide.
Application: storage, cookies and service workers
The Application panel shows what the page stores: cookies, local and session storage, IndexedDB, cache storage, and registered service workers. You can edit or delete entries, which is the quickest way to reset a login or test a first-visit experience. Clear site data wipes everything for the current origin.
Lighthouse: audit a page
The Lighthouse panel runs automated audits for performance, accessibility, best practices and SEO, in mobile or desktop mode. Step-by-step: how to run a Lighthouse mobile audit.
Device mode: emulate phones and tablets
The device toolbar (Ctrl + Shift + M or Cmd + Shift + M with DevTools focused) turns the page into a phone or tablet view, with the matching viewport, pixel ratio, user agent and touch events. It is covered fully in the Chrome mobile emulator guide. For quick visual checks without opening DevTools, a mobile view extension gives the same kind of device preview from a toolbar button.
Shortcuts worth memorising
| Action | Windows / Linux | Mac |
|---|---|---|
| Open DevTools | F12 or Ctrl + Shift + I |
Cmd + Option + I |
| Open Console directly | Ctrl + Shift + J |
Cmd + Option + J |
| Inspect element mode | Ctrl + Shift + C |
Cmd + Shift + C |
| Command Menu | Ctrl + Shift + P |
Cmd + Shift + P |
| Toggle device toolbar | Ctrl + Shift + M |
Cmd + Shift + M |
| Search across all files | Ctrl + Shift + F |
Cmd + Option + F |
| Open file by name | Ctrl + P |
Cmd + P |
| Hard reload | Ctrl + Shift + R |
Cmd + Shift + R |
Extending DevTools
Chrome extensions can add their own DevTools panels: React, Vue, Angular and Redux devtools, and accessibility checkers such as axe DevTools. A short list is in Chrome extensions for web developers.
Frequently asked questions
How do I open developer tools in Chrome?
Press F12 or Ctrl + Shift + I on Windows and Linux, Cmd + Option + I on a Mac, or right-click the page and choose Inspect.
Can I edit a website with Chrome DevTools?
You can edit the HTML and CSS of the page in your own browser to try changes. The edits are local and disappear on reload; they do not change the real website.
Is Chrome DevTools free?
Yes. DevTools is part of Chrome and every Chromium-based browser, such as Edge, Brave and Opera, with no extra download.