Debug HTTP with Chrome DevTools Network Panel

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.

Watch User Created Playlist (6)

This playlist is user created.

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

P

Test Slow Network Performance with the Chrome Devtools

P

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

P

Understand HTTP Status Codes with the Chrome Devtools

P
chrome-devtools tutorial about Examine AJAX Requests with Chrome Devtools

Examine AJAX Requests with Chrome Devtools

4:04 chrome-devtools

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!

chrome-devtools tutorial about Analyze HTTP Requests and Responses with Chrome Devtools

Analyze HTTP Requests and Responses with Chrome Devtools

7:02 chrome-devtools

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.

chrome-devtools tutorial about Filter Requests in the Network Panel in Chrome Devtools

Filter Requests in the Network Panel in Chrome Devtools

3:44 chrome-devtools PRO

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.

chrome-devtools tutorial about Test Slow Network Performance with the Chrome Devtools

Test Slow Network Performance with the Chrome Devtools

2:53 chrome-devtools PRO

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.

chrome-devtools tutorial about Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

Analyze Overall Network Traffic Using Overview Tool in Chrome Devtools

1:43 chrome-devtools PRO

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.

chrome-devtools tutorial about Understand HTTP Status Codes with the Chrome Devtools

Understand HTTP Status Codes with the Chrome Devtools

6:14 chrome-devtools PRO

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.

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