Home
QA
Web Testing

Debugging with Inspect Element

In my first year as a full-time QA, I learned a lot about debugging. Most of these insights came from engineers (shoutout to them for sharing and explaining things!).

I believe debugging has many different approaches, but personally, since I work a lot with website testing, I want to talk about a dev tool: Inspect Element. Surprisingly, this tool was never covered in the QA bootcamp I attended—not sure why. In reality, this skill is one of the most essential ones to have.



Inspect Element offers a lot of useful tools, but let's focus on the basics and the ones I use daily:

1. Elements Tab

This is where we can see the structure of the webpage—HTML, CSS, and how everything is styled. When performing UI testing, it’s crucial to check the colors, fonts, and component sizes to ensure they match the Figma design.




2. Console Tab

The Console Tab is super useful for debugging JavaScript errors. It's mainly used when there's an issue on the Front-End side. While the Network Tab is often associated with Back-End debugging, the Console Tab focuses more on Front-End issues (not all, but most of the time). You can check for errors and warnings by looking at the red messages—these usually indicate something is broken. Usually, I check the Network Tab first, but if there are no errors there, I move on to the Console.

3. Network Tab

This one is a lifesaver when debugging API calls or slow-loading pages. Some things I do here:

  • Checking the payload sent to the server (Header tab): This is more related to the Front-End side. We could verify if the payload sent to the API is correct to determine whether the error originates from the Front-End or Back-End. However, this can be tricky because not all APIs are used directly on the website. Some are wrapped before being used, meaning the variables might differ from the original API. It's always best to refer to the documentation. 💪

  • Checking if API requests are successful or failing (Response tab): Again, to determine if the issue is on the Back-End or Front-End, we can check whether the response contains an error message from the Back-End.

  • Inspecting response data (Preview or Response tab): If some data isn’t displaying correctly in the UI, we need to check the specific response from the Back-End to determine whether the issue is on the Back-End or Front-End.


  • Analyzing load times and spotting performance bottlenecks: Lastly, we can check how long it takes for the API to respond to the web request. This helps assess the API’s performance.













Inspect Element has saved me so many times when debugging. It doesn’t always give me instant answers, but at least it helps point me in the right direction. I personally rely on these three tabs—Elements, Console, and Network—to figure out what’s wrong.

There’s still so much to explore in Inspect Element, and I might update this in the future if I find something new🚀

Post a Comment