Chrome Dev Tools: Network Tab

Published: 24 August 2015
on channel: freeCodeCamp.org

23,053

201

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/too...

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.

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

Watch video Chrome Dev Tools: Network Tab online, duration hours minute second in high quality that is uploaded to the channel freeCodeCamp.org 24 August 2015. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 23,053 times and liked it 201 visitors.

185