Picture this scenario: Hours before an important sprint demo, a button on the site you are showcasing suddenly stops working. You click “Next,” but nothing happens—just a spinning icon that does not go away.
In a last-ditch effort, you call the developer to ask why this is happening and what you can do to fix it. It was working just yesterday! As expected, the developer is busy, and can’t look at this until after your impending demo.
“Just look through F12 Chrome DevTools and tell me what the actual issue is,” the developer says. “If I know what’s causing the problem, I can spare a minute to help.” As if the answer should be obvious.
When I found myself in this situation recently, I didn’t know what to do. To be honest, I was overwhelmed. Ultimately, I met with a developer at Credera who helped me make sense of Chrome Developer Tools (DevTools for short). With less than 30 minutes of research, I was able to use Chrome DevTools to make the developer’s job easier and get the issue resolved quickly. This post will provide non-developers with the basic knowledge needed to identify bugs in Chrome DevTools and communicate them to developers.
What Are Chrome DevTools?
Google defines DevTools as “a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.” In “non-developer” terms, this is a quick way to identify the root cause of site defects. (You can also get a detailed, technical overview of Chrome DevTools.)
How to Access Chrome Dev Tools
Accessing DevTools is easy. Simply press F12 while in Google Chrome and the following window appears:
Note: This view may vary based on your browser’s configuration.
Understanding What You See
Upon opening DevTools, you may be overwhelmed by the colorful code on your screen. And while this opening screen can be helpful for certain use cases, I want to focus on what I found most helpful: the “Network” tab. While other tabs can resolve different issues (e.g., “Elements” for front-end defects), the “Network” tab works well for back-end errors (e.g., API call errors).
Step 1: Go to the “Network”.
As the developer told me, “The Network tab will be your best friend.” The Network tab can be found as the fourth option, between “Sources” and “Performance” in the DevTools window.
Step 2: Select “All” from the row below the ‘Filter’ bar.
Step 3: Scroll down and observe if anything is flagged as an issue. DevTools makes this step easy by highlighting potential problems in red. Anything not with a Status in the 200s or 300s is most likely an indication of an error.
Step 4: Select the outlier(s) that you want to investigate. Once you click, something like the screen below will appear.
Step 5: Analyze the issue and report back to the developer.
In the scenario above, the message for the developer would be: “The facemelter API call is getting a 404 Not Found Status Code.” Include a screenshot of this page as well. While your messaging may not be perfect, the developer will be appreciative that you took the time to make their job easier.
Benefits of Having Basic DevTools Knowledge
It may not seem like much, but with less than 15 minutes of research, you can help developers diagnose the root cause of issues, rather than the symptoms. In doing so, we, the non-developers, can use the power of Chrome DevTools to make our developers’ jobs easier and decrease the turnaround time on bug fixes.
Have a technology problem that you need help solving? Credera has extensive experience in product design and development and technology implementations. We would love to discuss potential solutions and approaches with you. To learn more, contact us at findoutmore@credera.com.
Contact Us
Ready to achieve your vision? We're here to help.
We'd love to start a conversation. Fill out the form and we'll connect you with the right person.
Searching for a new career?
View job openings
