Skip to main content

Module 5 · Web testing

DevTools and network requests

Read what the page sends and receives, and turn it into evidence.

About 10 min reading and 15 min practice (estimates)

Loading progress…

Read

Learning objectives

  • Open DevTools and find the Console, Network and Application panels.
  • Inspect a request's method, status, headers, payload and response.
  • Use network evidence to decide whether a bug is in the front end or the back end.

Explanation

Every modern browser includes developer tools (F12, or Ctrl+Shift+I / Cmd+Option+I). For testers, three panels matter most:

  • Console: JavaScript errors and warnings. A red error when you click a button is valuable evidence.
  • Network: every request the page makes. Select one to see its method, URL, status code, request and response headers, payload and response body, and timing. Turn on "Preserve log" so requests survive a page navigation, and use throttling to simulate a slow connection.
  • Application (Storage in Firefox): cookies, local storage and session storage for the site.

Network evidence helps locate a bug. If the request sends the wrong data, the front end is likely at fault. If the request is right but the response is wrong, look at the back end. If both are right but the page shows something else, the problem is in how the page displays the response.

Example: a failed add-to-cart request

Illustrative — not a working endpoint.

POST /v1/cart/items HTTP/1.1
Host: api.dar-al-souq.example
Content-Type: application/json

{"productId": "leather-journal", "quantity": 0}

HTTP/1.1 422 Unprocessable Content
Content-Type: application/json

{"error": "quantity must be between 1 and 10"}
Illustrative request on a fictional API. The page sent quantity 0, so the bug is on the front end even though the API returned the error.

Common mistakes

  • Reporting "nothing happens" without checking the Console and Network panels.
  • Losing requests because "Preserve log" was off during a redirect.
  • Pasting full requests that contain tokens or cookies into a bug report — redact them.

Try

Practise what you just read. Answers are checked here; nothing is graded publicly or counts toward Bug Arena.

Exercise

Clicking "Save" shows no error, but your change is lost after a refresh. In Network, the save request returned 200 and its payload contains the old value. Where is the bug most likely?

Choose one answer.

Review

Check yourself — you should now be able to:

  • Open DevTools and find the Console, Network and Application panels.
  • Inspect a request's method, status, headers, payload and response.
  • Use network evidence to decide whether a bug is in the front end or the back end.

Practise in QA Lab

References

Continue

When you’re ready, mark the lesson complete in the Try step and move on.

Marked as read when you reach the end of the lesson.