What Are DevTools?
DevTools are developer tools built into the browser. They let you look inside a page: inspect its HTML and CSS, see JavaScript errors, check requests to the server, and view data the site stores in the browser. Nothing needs to be installed.
How to Open DevTools
In Chrome, open DevTools with F12 or one of these shortcuts:
- Ctrl + Shift + I — Windows and Linux;
- Cmd + Option + I — macOS.
You can also right-click an element on the page and choose Inspect. DevTools will open with that element selected.
How DevTools Help Find a Problem
Suppose you click Save and nothing happens. Looking at the page alone does not tell you why.
Open DevTools to see what happened after the click:
- Did a JavaScript error appear?
- Was a request sent to the server?
- What did the request send?
- What did the server return?
That turns “the button does not work” into something much more useful. For example: “After the click, a request is sent, but the server responds with 500.”
This is called bug localization: working out which part of the system is causing the problem. You will not always find the exact cause, but even a few extra details make a bug much easier to investigate.
Main Tabs
Elements
The Elements tab contains the page’s HTML markup and element styles.
Select an element on the page to see how it is built and which CSS properties apply to it.
Look here when:
- an element is not visible;
- text or an attribute differs from what you expected;
- the colour, size, or spacing is wrong;
- an element is not where it should be.
For example, a design says a button should be 200 px wide, but it looks much narrower on the page. Select the button in Elements to check its current width and styles.
Console
The Console shows JavaScript errors, warnings, and messages from the page.
If the interface stops responding after an action, open Console and repeat it. A new red error may show that JavaScript execution stopped.
For example, click Add to cart: nothing happens, but an error appears in Console at that moment.
Network
The Network tab shows requests between the browser and the server.
For each request, you can check:
- where it was sent;
- which method it used;
- which data the browser sent;
- which HTTP status came back;
- what the server returned.
Imagine that an order list does not appear on the page. Open Network and find the request for orders.
No request appeared at all — that is one situation.
A request appeared and received 500 — that is another.
It received 200 with the correct data, but the list is still empty — that is a third.
The interface shows the same result in all three cases: there are no orders. Network helps you see what happened before that.
Application
The Application tab lets you view data the site stored in the browser: cookies, local storage, and session storage.
It is useful when testing authentication, saved settings, or user state.
For example, a user changes the site language to English. After reloading, it switches back to Russian. In Application, you can check whether the selected value was saved in the browser.
Lighthouse
Lighthouse automatically checks a page and generates a report.
It can find issues with performance, accessibility, SEO, and some other aspects of the page.
It does not replace manual testing. Think of it as a quick way to get a list of things worth looking into.
Where to Start
There is no one tab to open every time. Start with what is broken.
Data did not load → start with Network. Check whether a request was sent and what the server returned.
You click a button and nothing happens → check Console, then Network.
An element does not match the design → open Elements.
The site forgets authentication or settings → look in Application.
With practice, this becomes natural: see a problem → think about what is happening behind the interface → open the relevant tab.
Open DevTools Before You Test
If you want to inspect a request in Network, open DevTools before the action you need to observe.
For example, to see requests made while the page loads:
- Open DevTools.
- Go to Network.
- Reload the page.
- Look at the requests that appear.
If you open DevTools after the page has loaded, requests that happened earlier will not be in the list.
At the interview
An interview is rarely interested in a list of the DevTools tabs. What is asked is how they are used to investigate a problem. Try answering before opening the answer.
juniorentry-level knowledge
1. What are DevTools and what does a QA engineer need them for?
DevTools are the developer tools built into the browser. They show the markup and styles of a page, JavaScript errors, requests to the server and the data held in the browser. A tester uses them to gather the facts about a defect and to work out which part of the system it comes from.
2. A button does not respond to a click. Where do you start?
Open DevTools before repeating the action. Look at Console first: a JavaScript error may appear there. Then check Network: whether a request was sent and what the server returned.
3. A list of data is missing from the page. What can the Network tab tell you?
Whether a request for the data was made at all, what address it went to, with which method, and what status and response body came back. If no request appears, the problem may be on the client; if the server returned an error or the wrong data, the cause lies before the list is drawn.
4. What does localising a defect mean?
Working out which part of the system the problem occurs in: the interface, JavaScript, the request or the server. The exact cause does not have to be found, but the observations are worth attaching — the error from Console, the request status and the server response.
middlea more advanced level
5. Why do you open DevTools before reproducing the problem?
The Network tab records requests from the moment DevTools is opened. Opened after the page has loaded or after the click, the request you need may already be missing from the list. So DevTools goes first, and the action is repeated afterwards.
6. The site forgets the selected language after a reload. Which tab do you open?
Application: it shows what the site stored in the browser. What to check is whether the selected value was written to a cookie or to storage at all, and whether it survives the reload. The symptom picks the tab in general: data did not load — Network; nothing happens on a click — Console; an element does not look like the design — Elements.
Questions on the other topics are collected on the QA interview questions on DevTools page.