Free DevTools Practice for Testers

What It Is

Hands-on practice with DevTools — browser tools for investigating markup and styles, JavaScript errors, server requests, and data that a site stores in the browser.

Here, you can practise using Network, Elements, Console, and Application; read server requests and responses; check cookies and local storage; and find information that helps locate a bug.

The course has three parts:

  1. Theory — short guides to the main DevTools features.
  2. Theory questions — a check of what the guides covered.
  3. Practice tasks — problems to solve with DevTools open.

This practice app is part of Tallinn Learning’s professional QA engineer training programme, which includes the full manual testing course.

Who It Is For

The course is for people learning manual testing, preparing for a junior QA engineer interview, or already testing web applications but not yet confident with DevTools.

If you have not used DevTools before, start with the theory and work through the tasks in order.

If you already know the basics, you can go straight to the questions or practice tasks.

Theory

The course begins with short guides to the basics of DevTools. They cover:

There is nothing to answer on these pages. Their job is to give you the minimum theory you will need later.

Theory Questions

The guides are followed by questions for self-checking.

In most tasks, decide whether a statement is true and choose “True” or “False”.

There are also questions about HTTP statuses: you are given a situation and choose the appropriate response code from a list.

An explanation appears after you answer. If your answer was wrong, you can immediately see the correct option and understand why.

You do not need to open DevTools for this part.

Practice Tasks

Next come tasks to complete with DevTools.

Each task has a short situation and a description of how the application should behave. Check what actually happened and decide whether there is a defect.

Depending on the task, you may need to check:

  • whether a request was sent;
  • what the browser sent to the server;
  • which status came back;
  • what is in Response;
  • whether errors appeared in Console;
  • which data was saved in cookies or local storage;
  • what is happening to an element on the page.

These are no longer questions about theory: you need to find the answer yourself in DevTools.

How to Complete a Practice Task

  1. Select a task from the list.
  2. Read what you need to check.
  3. Open DevTools.
  4. Perform the action from the task.
  5. Check the result in the relevant DevTools tab.
  6. Compare it with what was expected.
  7. Answer “True” if the application works as described, or “False” if you find a discrepancy.

When working with Network, open DevTools before performing the action. Otherwise, the request you need may not appear in the list.

Some tasks include a form. Its input is already filled with a random value — you can leave it as it is or replace it with your own.

After you answer, the app shows the actual result and an explanation. You can run the task again with “Try again” or move to the next one.

What This Gives You

In real testing work, it is often not enough to see that “something does not work.”

For example, data does not appear on the page. With DevTools, you can check whether a request was sent, what the server returned, and whether the response contained the data you needed.

After the page opens, the /orders request returns 500.

Or:

The request returns 200 and Response contains data, but the page does not display it.

This information helps locate the problem faster and shows where to continue investigating.

Note

What is random is not the task but the behaviour of the application: before each run, the task decides whether it will work exactly as described or with a defect in it.

The same task may work correctly on its first run and contain a defect after you click “Try again”. Do not memorise the answer — check the result in DevTools every time.

Start learning for free