Every website you see in your browser is more than what’s visible at first glance. With browser DevTools (developer tools), you can look behind the scenes: inspect the HTML code, tweak CSS live, find JavaScript errors, and see what data is being exchanged between browser and server. This article covers the basics, plus practical first exercises to try out immediately.
Table of Contents
What are browser DevTools and why do you need them?
Developer tools are a built-in toolkit in every modern browser (Chrome, Firefox, Edge, Safari). They’re aimed at developers, but they’re accessible to anyone curious about how a webpage is put together. With DevTools you can, among other things:
- view and temporarily edit the HTML and CSS of any webpage live
- see JavaScript errors and warnings in the console
- track which files and data get transferred when a page loads
- simulate how a page looks on different screen sizes
Opening DevTools: Chrome and Firefox
In most browsers you open DevTools with the F12 key or the keyboard shortcut Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). Alternatively: right-click any element on the page and choose “Inspect” — this opens DevTools directly with the clicked element in focus. This works nearly identically across Chrome, Firefox, Edge, and most Chromium-based browsers.
The Elements tab
In the Elements tab (Firefox: “Inspector”) you see the full HTML structure of the current page as an expandable tree. Hover over an element in the code and the corresponding area on the page gets highlighted — a quick way to figure out which HTML element controls which visible part of the page.
Right next to it, a CSS panel shows every styling rule affecting the selected element. You can click values here and change them directly (e.g. a background color or font size) — the change appears instantly. Important to know: these changes are local and temporary only; they reset on page reload and have no effect on the real website. That makes DevTools the ideal place to try out design ideas risk-free.
The Console
The console shows error messages, warnings, and messages the webpage itself outputs. If a page contains JavaScript code that causes an error (e.g. calling a function that doesn’t exist), a red error message appears here with the exact line in the code. For developers, the console is often the first place to look when debugging.
You can also type JavaScript commands directly into the console and run them immediately — ideal for testing small snippets of code without creating a whole file. Try typing console.log("Hello World") and pressing Enter to get started.
The Network tab — briefly explained
The Network tab shows every single file and data request exchanged between the browser and server while a page loads — HTML documents, CSS files, images, fonts, and API requests. For each request you see the status code (e.g. 200 for “success” or 404 for “not found”), the load time, and the size of the data transferred. This is especially useful for understanding why a page loads slowly or why an expected data request never arrives. If terms like server, HTTP, or status codes are still unfamiliar, our article How Does the Web Work? lays the right groundwork.
Three practical first exercises
Exercise 1: change text on a real webpage
Open any webpage, right-click a heading, and select “Inspect”. Double-click the text between the HTML tags in the Elements tab and change it. The change shows up instantly on the page — but only for you, and only temporarily.
Exercise 2: find an error message in the console
Open the console on a few different websites and check whether any warnings or errors show up. Many real-world websites carry small JavaScript errors that don’t disrupt normal operation but are still visible — a good way to see what real error messages look like.
Exercise 3: watch a network request in the Network tab
Open the Network tab, reload a page, and watch the list of requests fill in gradually. Click on a single request (e.g. an image) and inspect its details (size, load time, response headers).
Why this pays off for aspiring developers
DevTools are one of the most powerful free tools you’ll use daily as a web developer — for debugging your own projects, understanding other people’s websites, and quickly experimenting with CSS changes before implementing them in real code. Combine this knowledge with the fundamentals from our HTML basics series to really understand what you’re seeing in DevTools.
Frequently Asked Questions
Can I use DevTools to permanently change a real website?
No. Changes made through the Elements view are only visible in your own browser and disappear on reload. To permanently change a website, you need access to its actual source code and server.
Do DevTools work the same way on smartphones?
Not directly within the mobile browser app, but most desktop DevTools offer a device simulation mode that lets you test a page’s behavior and appearance at various smartphone and tablet screen sizes without needing a real device.
What does the red text in the console actually mean?
Red text usually marks a JavaScript error — something in the page’s code couldn’t run as expected. Yellow text is usually a warning, which doesn’t necessarily break the page’s functionality but signals a potential issue.
Do I need programming knowledge to use DevTools effectively?
Not necessarily for basic use (inspecting elements, viewing network requests). To really understand and fix error messages in the console, a basic grasp of HTML, CSS, and JavaScript helps — you’ll build that up naturally over time.
Is it normal for every website to show small errors in the console?
Yes, surprisingly often. Many production websites carry small, harmless errors or warnings that nobody has fixed because they don’t visibly affect functionality. That’s normal and not a sign that a site is fundamentally broken.
