• 8 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 17/12/2018

Network

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

The Network tab lets you see information about network activity on your page. You can see HTTP headers, timing data associated with each item loaded on the page, and more. 

Here's the test page loaded in the Network tab. You can see information regarding each bit of network information:

  • Name of the item

  • Status (often HTTP code)

  • Type of item

  • Initiator (what kicked off the item's loading)

  • Time the item took to load

Networks tab
Networks tab

You'll immediately see three files loaded: the HTML document, the CSS stylesheet, and the jQuery that accompanies the project. Pretty simple! You can also see the size of each file.

You also have a timeline chart on the right hand side, indicating where each item fits therein. Sort it based on different criteria:

Timeline view options
Timeline view options

Let's se a more complicated example, taking a webpage that loads an image and an external JSON file. Here's a simple fake candy storefront that you may have seen if you've taken JavaScript or jQuery courses on OpenClassrooms! 

HTML document that loads an image and JSON file
HTML document that loads an image and JSON file

Loading it in the Network tab brings up the following result, in which I've clicked on the JSON file (loaded via AJAX). You'll notice you can even see the contents of the external JSON file, which is exactly the data the browser received!

Loaded JSON file contents
Loaded JSON file contents

By clicking on the image file in the left list, you can also see the exact image that was loaded in.

Image loaded into the webpage
Image loaded into the webpage

That's all cool, but a lot of it you can do via other developer tools tabs. However, for every item loaded into your web page, you can also see the time it took to load the item. For example, I can see that the image took the longest to load in my webpage. By hovering over its associated bar, I can even see a breakdown of what took the longest in the image loading process.

Image loading timeline
Image loading timeline

Filters

Notice that you have a series of buttons, called filters, such as "All," "XHR," "JS," "CSS," etc. By selecting one of these filters, you'll only see the terms that match these criteria. For example, if you're trying to evaluate only your image load times, selecting the "IMG" filter would be a great choice.

Visit your favorite website and, while it's loading, check out the Network tab to see what's behind the amount of time the page takes to load!

Exemple de certificat de réussite
Exemple de certificat de réussite