How to Effectively Inspect Network Activity in Chrome Dev ToolsConnor FinneganBlockedUnblockFollowFollowingApr 15During a recent interview, I was shown a demo of a website and told that a piece of data being displayed was incorrect and did not match the value in the database.
I was asked to explain how I would debug this problem and try to find out where the source of the issue was.
We agreed on a debugging process after a brief conversation, but my initial suggestion relied too heavily on console.
log()s, and my interviewer encouraged me to make use of the Network panel in the Google Chrome developer tools as well.
While I had used the Chrome dev tools to inspect network activity a few times before on a project, this conversation made me realize that it would be worthwhile to take a deeper dive into this portion of the Chrome dev tools to further improve my debugging process.
In this blog post, I will share some helpful tips and tricks to make the most of this feature in Chrome.
Getting StartedTo access this feature in Chrome, simply open the developer tools (command-option-I or command-option-J on a Mac) and select the Network option from the drop-down menu at the top.
One last important thing to note: Chrome will only show Network requests that happen while the Network panel is open.
If you’re looking to inspect a request that happens on page load and you’re not seeing anything, you most likely just need to refresh the page while you have the Network panel open.
Inspecting Network RequestsAlright, now we can dive in.
As a demo, I will walk through a GET request that happens in my job search app, The Next Step.
When I go to the job search page, the Network tab will show some of the other elements that have been loaded, as demonstrated below.
Then, when I hit the search button to display job results, the Network tab will be updated to show the GET request that happens to fetch job results from The Muse’s API.
This is the first step if I’m looking to debug any portion of this search feature: I can make sure that the network request that should occur is, in fact, being called.
Now, if I click on the request, I can inspect the network request in greater detail, as shown below.
Here you can see the headers, the status code that is returned, and the parameters on the request.
Most importantly, you can see the response itself.
This is what makes the Network panel so useful: If I’m fetching something from a database in my app and the response of the request is different from what I’m expecting, I know the problem is in the back end of my app and I don’t need to bother with any console.
log()s on the front end at all.
If the response is what I’m expecting, I know to get to work debugging the front end of my app.
Simulating Different SpeedsAnother helpful feature in this section of Chrome’s dev tools lets you simulate different network speeds.
Next to the word ‘Online’ in the Network tools menu, there’s a drop down that lets you see how your site will look at different speeds.
It’s easy to forget when you’re programming on fast Wi-Fi that people are just as likely to experience your site on shaky connections on their smartphones.
Being able to test your site on ‘Fast 3G’ or ‘Slow 3G’ speeds allows you to see the timing and sequence of elements on your page loading in a range of scenarios and make any necessary adjustments.
Whether you’re new to programming or looking to refine your debugging process, I hope you found this to be a useful overview of what Chrome’s Inspect Network Activity feature has to offer.
If you’d like to dive even deeper, check out the resources below.
Inspect Network Activity In Chrome DevTools | Tools for Web Developers | Google DevelopersA tutorial on the most popular network-related features in Chrome DevTools.
developers.
google.
comChrome Dev Tools: Networking and the ConsoleIn Part 1 – Chrome Dev Tools: Markup and Style, we reviewed two panels: Elements and Resources.
Moving on, now, we'll…code.
tutsplus.
comTips and Tricks for Debugging in Chrome Developer ToolsI love to develop and debug using Chrome Dev Tools.
I find that the dev tools are generally easy to use, well…hackernoon.
com5 Ways Chrome DevTools Made My Life EasierBy Enhancing Interactions with the Webmedium.
com.