Every browser ships with a full set of development tools. Press F12 (or right-click and choose Inspect) to open them. Five panels cover almost everything you will need.
Elements — the live page#
Shows the page as it exists now, including anything JavaScript changed. That is different from “view source”, which shows the original file.
- Click any element to see and edit its CSS in the Styles pane
- Tick and untick individual properties to see what each one does
- Double-click text or attributes to edit them live
- Overridden rules appear struck through — instantly showing you what won
- The “Computed” tab shows the final value of every property
Nothing you change here is saved. Refresh and it is gone, which makes it a completely safe place to experiment.
Console — errors and quick tests#
The first place to look when a page does nothing. Errors appear in red with a file and line number.
It is also a JavaScript scratchpad for the current page:
document.querySelectorAll(".card").length // does my selector match?
document.title // read anything
$0 // the element selected in ElementsThat last one is a genuine time-saver: click an element in the Elements panel, then use $0 in the console to refer to it.
Network — what the page requested#
Reload with this open and you will see every file and API call. The columns that matter:
- Status — 200 is fine, 404 means missing, 500 means the server broke
- Size — spot the 4MB image slowing everything down
- Time — find the slow request
Click any request to see its Headers, Payload and Response. When an API “returns the wrong data”, this is where you confirm what actually arrived. See the Fetch API guide.
The “Disable cache” tickbox saves a lot of confusion when you are editing CSS.
Device toolbar — testing mobile#
Click the phone icon, or press Ctrl + Shift + M. Pick a device size, rotate it, and throttle the network to simulate a slow connection.
It is not identical to a real phone — touch behaviour and font rendering differ — but it catches most layout problems in seconds. See responsive design basics.
Application — stored data#
Shows localStorage, sessionStorage, cookies and cached files for the site. Useful when your app “remembers” something you thought you cleared, and there is a button to clear it all.
Lighthouse — an automated audit#
Runs a check on performance, accessibility, best practices and SEO, and gives you a scored report with specific fixes.
Do not chase a perfect score. Read the accessibility section carefully — it catches missing alt text, poor colour contrast and unlabelled form fields, which are real problems for real people and quick to fix.
Sources — pausing your code#
Set a breakpoint by clicking a line number and your code pauses there, letting you inspect every variable at that moment. Covered in how to debug JavaScript in the browser.
Questions people ask#
Are DevTools the same in every browser?
Close enough. Chrome, Edge and Firefox all have Elements/Inspector, Console, Network and Sources/Debugger with minor naming differences. Safari requires enabling the Develop menu first.
Can visitors see my code through DevTools?
Yes — all HTML, CSS and JavaScript sent to a browser is readable. This is why API keys and any real security check must live on a server.
Why does my CSS change disappear on refresh?
Because DevTools edits the in-memory page, not your file. Copy the working rule into your stylesheet.