Debug HTTP with Chrome DevTools Network Panel

25 minutes

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

pro-course-rss-logo

PRO RSS Feed

Examine AJAX Requests with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

otherjs tutorial about Examine AJAX Requests with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

4:04 otherjs

AJAX allows us to send requests to the server from our javascript applications, rather than allowing the browser to directly request declaratively specified resources. Under the hood, though, AJAX requests are still just HTTP requests - and that means we can use the Network Panel in Chrome’s DevTools to inspect our AJAX operations!

otherjs tutorial about Analyze HTTP Requests and Responses with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

7:02 otherjs

To understand the Network DevTool, you have to understand what HTTP is and how it works. Let’s use the Network DevTool to inspect an HTTP request and its corresponding response so that we can understand what the browser is doing.

otherjs tutorial about Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 otherjs

A large enough project will frequently flood the network devtool with content. Use the filter tool to restrict which HTTP requests you’re inspecting so that you don’t get overwhelmed.

otherjs tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 otherjs

Often when we’re developing we’re serving our content directly from our local machines, meaning that our network performance is incredibly fast. In production, though, conditions are often much less reliable. To replicate production conditions for testing and debugging it can be useful to throttle our local network speeds - you can do that here.

otherjs tutorial about Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 otherjs

Use the Overview tool in the Network devtool to see requests over time, and to constrain the tool to a given window of time so that you can focus on a subset of traffic.

otherjs tutorial about Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 otherjs

Anyone who’s been around the net long enough has seen various HTTP error codes - things like “404 file not found!” or “500 internal server error”. But what are these, exactly? Let’s use the Network DevTool to better understand them. Learn the four major types of HTTP status code, and how to use the Network panel to inspect failed HTTP Requests.

Presented by:

mykola bilokonsky

Myk writes codes, flies drones, and spends too much time thinking about consciousness.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?