TodayTools

Chrome DevTools flashcards

Inspect, debug and speed up any web page, the way front-end engineers do it on real bugs.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Chrome DevToolsStart from zero · 1 of 12

What is Chrome DevTools, in one plain sentence?

A set of tools built into the Chrome browser that lets you look inside any web page and see how it is made and how it behaves.

X-ray glasses for web pages.
Show again
12 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What DevTools is and why it exists4 cards
    • How a web page is built and delivered5 cards
    • Getting around the panels3 cards

  2. Core basics

    • Opening DevTools and finding any feature2 cards
    • Elements, Styles and layout7 cards
    • Console essentials and reading errors4 cards
    • Network, cache and storage3 cards
    • Device mode and screenshots2 cards

  3. Next steps

    • Breakpoints and stepping through code4 cards
    • Catching code that changes the page3 cards
    • Inspecting hover, focus and pop-ups2 cards
    • Network deep dive4 cards
    • Console power tools and snippets3 cards
    • Throttling, recording and auditing4 cards

  4. Go deeper

    • Core Web Vitals and runtime performance6 cards
    • Memory leaks2 cards
    • Testing changes and failures on production2 cards
    • Service workers, caching and navigation2 cards
    • Source maps and workspaces2 cards
    • Accessibility and rendering checks2 cards
    • Remote and Node.js debugging2 cards
    • Security and safe sharing2 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversChrome 157 stable (October 2026)Core Web Vitals: LCP, INP, CLS
How these cards are made

Chrome DevTools at a glance

Chrome DevTools is a toolbox inside the Chrome browser that shows how any web page is built and lets you test fixes live.

Like a mechanic lifting a car bonnet: you see the parts, read the gauges and try a fix before changing anything for real.

Words you will meet

Element
One piece of a web page, like a heading, a button or a picture
DOM
The live tree of all the elements on the page, as the browser holds it right now
Console
The panel where the page writes messages and where you can type code
Request
A message your browser sends to a server asking for a page, file or data
Cache
Saved copies of files so a page loads faster next time
Cookie
A small note a site keeps in your browser, such as that you are signed in
Selector
A short pattern that picks elements, like button or .price
Panel
One tab of DevTools, such as Elements, Console or Network

The steps

  1. 1. Start from zero (12 cards): What DevTools is, why it exists and the few words you need, in plain English.
  2. 2. Core basics (18 cards): Open DevTools, inspect and edit the live page, read the Console and the Network list.
  3. 3. Next steps (20 cards): Breakpoints of every kind, network forensics and Console power tools.
  4. 4. Go deeper (20 cards): Web Vitals, performance traces, memory leaks, overrides, source maps and remote devices.
All 12 cards in Start from zero
What is Chrome DevTools, in one plain sentence?
A set of tools built into the Chrome browser that lets you look inside any web page and see how it is made and how it behaves.
Before DevTools, how did people find out why a page looked wrong?
They guessed, changed the code, reloaded and hoped. DevTools shows the exact code, the mistakes and the messages, so you can see the cause instead of guessing.
You have probably been one click away from DevTools already. Where?
Right-click anything on a web page in Chrome and choose Inspect. Browsers built on the same base, like Edge and Brave, have almost the same tools.
What is a good everyday picture of what DevTools does?
A mechanic opening a car bonnet: the car is the web page, and DevTools lifts the cover so you can see the parts, read the gauges and try a fix.
A web page is made of three kinds of code. What are they?
HTML is the structure (headings, buttons, pictures), CSS is the look (colours, sizes, layout) and JavaScript is the behaviour (what happens when you click).
What are an element and a tag?
An element is one piece of a page, like a button. The opening tag starts it, the text is what you see, and the closing tag ends it.
What is the DOM, and why does DevTools show it instead of the file?
The DOM is the live tree of elements the browser builds from the HTML. JavaScript can change it while the page runs, so DevTools shows the tree as it is right now.
Where does a web page come from? What are a server, a request and a response?
A server is a computer that stores the site. Your browser sends it a request, and the server sends back a response: a page, a picture or data. Putting new code on the server is called a deploy.
What are the cache, cookies and storage?
The cache keeps saved copies of files so pages load faster next time. Cookies are small notes a site keeps in your browser, such as "Kiran is signed in". Storage holds bigger notes.
DevTools has many parts. What are panels, the Console and the drawer?
Panels are the tabs along the top: Elements, Console, Network, Application and more. The Console is where the page writes messages. The drawer is an extra strip at the bottom with more tools.
What do you need to start, and what is a first tiny win?
Only Chrome, nothing to install. Press F12, click Console, type this line and press Enter. console.log prints a message, and the message text shows up below.
What will you be able to do after this topic?
Inspect any element and see why it looks the way it does, read errors in the Console, watch what the page asks the server for, clear saved data, and test your page at phone size.
Chrome DevTools cheatsheet

Open and find (Windows and Linux; Mac uses Cmd+Option)

  • F12 Open or close DevTools
  • Ctrl+Shift+J Console (Mac: Cmd+Option+J)
  • Ctrl+Shift+C Pick an element (Mac: Cmd+Shift+C)
  • Ctrl+Shift+M Device toolbar
  • Ctrl+Shift+P Command Menu
  • Ctrl+P Open a source file
  • Ctrl+Shift+F Search all sources (Mac: Cmd+Option+F)
  • Ctrl+[ Previous panel (Ctrl+] next)

Console utilities

  • $0 Selected element ($1 the one before)
  • $$('img:not([alt])') All matches as an array
  • $x('//button[text()="Pay"]') XPath query
  • copy(temp1) Copy a value as JSON
  • getEventListeners($0) Listeners on an element
  • monitorEvents(window, 'resize') Log events as they fire
  • queryObjects(Promise) Live objects of a type
  • debug(applyCoupon) Pause when it is called
  • $_ Last evaluated result

Debugger

  • F8 Resume
  • F10 Step over
  • F11 Step into
  • Shift+F11 Step out
  • Ctrl+B Toggle breakpoint on line
  • Ctrl+F8 Turn all breakpoints off or on

Network filter box

  • status-code:404 Only that status
  • method:POST Only POST
  • larger-than:500k Big responses
  • domain:api.shop.in One host
  • -domain:*.doubleclick.net Hide a host
  • mime-type:image/webp By content type
  • has-response-header:set-cookie Requests that set cookies
  • /\/v[12]\/orders/ Regex on the URL

Elements shortcuts

  • H Hide the selected node
  • Delete Remove the node
  • F2 Edit node as HTML
  • Ctrl+Z Undo DOM or style edit
  • Alt+Click Expand node and all children

Core Web Vitals targets (good, p75)

  • LCP 2.5 s Largest content shown
  • INP 200 ms Input to next paint
  • CLS 0.1 Total unexpected layout shift
  • Long task 50 ms Main thread blocked
Donate