Motivation
Have you ever wondered how a website loads images, videos or displays information when you click a button? The ❝Network❞ tab in your browser's developer tools acts like a traffic monitor, showing all the requests your browser makes to the website's server and the server's responses.
What is the Network Tab?
Imagine a website as a restaurant. You (the browser) place orders (requests) for different items (images, text) from the kitchen (server). The Network tab lets you see these orders being sent and the kitchen staff (server) delivering the food (responses) back to you.
Getting to the Console:
Open your browser and visit any website.
Right-click anywhere on the page and select ❝Inspect❞ or ❝Inspect Element❞ or hotkeys
Cmd + Option + I(macOS) orCtrl + Shift + I(Windows or Linux).This opens the developer tools. Look for a tab labelled ❝Network❞ and click on it.
Parts of the Network Tab:
Request List: This logs your browser's requests to load the page. Each entry shows details like the file requested (image, script) and size.
Status Codes: These codes indicate if the request was successful (delivered food) or not (e.g., 200 for OK, 404 for Not Found).
Waterfall Chart (Optional): This visualizes the order and timing of requests, helping you see which ones take the longest to load.
How Can Testers Use the Network Tab?
Find broken images, GIFs or resources: Look for entries with error codes (e.g., 404). These might indicate missing images or broken links.
Identify information: Look for information that is not visible but that is part of the page. Is there something you did not see that is shown there?
Bonus Tip: Many browsers allow filtering requests by type (images, scripts) or searching for specific resources. This can help you pinpoint problematic elements.
For instance, we've mentioned that the search results page retrieved is based on the algorithm implemented in the search feature, which explores a database based on specific criteria to retrieve items. When these items don't meet the query users entered, we must verify if the users are getting what they are looking for.
So, let's find out why, on this book site, there is no visible reason why a user who searches for ❝Potter❞ seems to get an incorrect result: ❝Alice in Wonderland❞ by Lewis Carroll, while the author of the other two books is Beatrix Potter.
In this case, the testing method would focus on the elements that seem not to match the criteria directly on the search results page. In this case, we can dismiss two books by Beatrix Potter and focus on ❝Alice in Wonderland❞.
Since we don't know why this book was retrieved, we must navigate to the book's product detail page (PDP) to see if the term ❝Potter❞ is somewhere on the page❞. The best way to do this is by using the find box supporter by many web browsers by using Cmd + F or Ctrl + F, then enter the query to look up for.
As shown on the screencast, nothing visible can be found. So we must go a step ahead! For this, we use the Network tab, which shows us the entire content currently downloaded within the browser. Then, we must identify the HTML file related to the URL we are using to access the page's content, both visible for humans and not visible.
Search for ❝Potter❞, as we did before, but this time with all content accessible by the internal finder of the Network tab. This shows us that within the accordion, the term ❝Potter❞ can be found, but because it is closed by default, the browser's finder couldn't identify it before.
By this method and this DevTools, we quickly and easily understand that the search functionality correctly retrieved ❝Alice in Wonderland❞ by Lewis Carrol, not a bug.
Sometimes, the data we seek is less visible than in this example. Still, as far as it can be found on the document that the browser downloaded, that is enough proof to understand whether an item on the search result page was incorrectly rendered.
Using the Network tab, you can become a website traffic detective, uncovering bottlenecks and broken elements that might hinder user experience.