Chrome Dev Tools: Network Tab

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on August 24, 2015 10:00:33 PM ● Video Link: https://www.youtube.com/watch?v=dsVbhlBIfz0

Duration: 2:00

18,168 views

138

Info and mini-lesson on the 'Network' tab of Chrome Dev Tools. Info and mini-lesson on the 'Network' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/profile-performance/network-performance/resource-loading

The network tab helps answer questions like "Which element or part of the page took the longest?" or "What initiated a request?".

The network panel records detailed information about how long each element of your page or app takes to load.

Every request is recorded in the log, which can be found lower in the network panel.

If you look at the line on the side, you'll notice a pattern of colors. Those colors each represent a different type of content in the request.

The longer the line is a certain color, the longer that type of content took in that request. Ultimately, you want short lines, and if any request has long lines, you know what may be slowing down the web page.

If you click a request in the log, you can get even more detailed information.