‫Narrateur : Donc, après le genre de cours théorique
‫lourd, voyons maintenant http en action, effectuons
‫quelques requêtes et examinons les réponses
‫que nous avons obtenues en utilisant les outils de développement de nos navigateurs.
‫J'utilise donc Google Chrome comme navigateur et je
‫suis ici sur udemy. com.
‫Alors, allez sur udemy. com, puis
‫ouvrez vos outils de développement.
‫Et j'utilise l'option de commande J pour cela sur mon Mac, sous Windows, c'est
‫probablement Alt+Ctrl+J, ou faites simplement un clic droit
‫n'importe où sur la page, puis cliquez
‫sur inspecter, juste au cas
‫où vous ne seriez pas familiarisé avec les outils de développement.
‫Ensuite, nous allons nous diriger vers
‫l'onglet réseau.
‫Et puis cliquez ici sur désactiver le cache.
‫C'est important car sinon, vous pourriez
‫charger la page depuis votre ordinateur parce que vous
‫êtes allé sur udemy. com avant.
‫Bon, alors rechargeons maintenant la page,
‫de sorte que nous allons en quelque
‫sorte enregistrer l'activité du réseau ici dans cet onglet réseau.
‫Alors rechargez ceci.
‫Et maintenant, ici, nous pouvons voir toutes les demandes
‫qui se produisent sur la page.
‫Donc comme je vous l'ai dit, il va y avoir beaucoup de demandes pour
‫tous les éléments qui sont sur la page.
‫Maintenant, si nous allons vers le haut
‫ici, le premier de tous est en fait udemy. com.
‫Et nous pouvons voir ici le code d'état, qui est 200,
‫comme je l'ai dit dans la
‫dernière conférence, cela signifie d'accord.
‫Donc tout s'est bien passé.
‫Ensuite, la taille et le temps
‫qu'il a fallu pour télécharger cette ressource.
‫Mais alors, nous avons aussi toutes ces autres ressources ici
‫comme les fichiers CSS que vous voyez ici, quelques
‫images, des fichiers de script java
‫comme j'ai ici.
‫Et tout cela a en fait été initié par
‫l'index, donc par la page racine.
‫D'accord, nous avons udemy. com et que
‫l'on demandera alors tous ces actifs.
‫C'est donc l'index, donc cela ne se produit pas dans l'initiateur, et tout
‫cela ici a été demandé par l'udemy principal. com.
‫Maintenant, si nous cliquons sur l'une de ces
‫ressources, faisons udemy. com d'abord.
‫Ici, nous pouvons obtenir plus d'informations sur la demande
‫et la réponse.
‫Donc d'abord, la requête qui se trouve en fait en bas.
‫Et vous verrez que la demande a été faite à udemy. com, nous avons fait
‫une demande d'obtention, et le
‫chemin n'était que le chemin racine, comme
‫je vous l'ai expliqué dans la dernière vidéo, d'accord.
‫Ensuite, nous avons un tas
‫d'en-têtes, donc ici, par exemple,
‫cela signifie que la page a été compressée à l'aide d'un simple gzip.
‫En bas, vous avez un en-tête pour définir certains cookies
‫et un tas d'autres
‫en-têtes dont nous parlerons plus tard.
‫C'est donc la demande, puis
‫la réponse
‫contient également un tas de tous ces en-têtes, d'accord.
‫Ainsi, nous pouvons voir quand la réponse a été réellement envoyée.
‫Nous pouvons voir un tas de cookies, ainsi
‫que le code d'état ici,
‫c'est donc de là que vient le code d'état 200.
‫Et encore, un tas d'autres en-têtes, dont nous
‫parlerons un peu plus tard, d'accord.
‫Et la
‫même chose, bien sûr, pour tous les autres actifs qui ont été téléchargés.
‫Donc la réponse et la demande ici.
‫Et cette fois, nous voyons en fait que la
‫racine ici est toujours udemy. com, donc
‫ce qu'ils appellent l'autorité
‫ici, mais le chemin est alors
‫tout cela, donc cet
‫emplacement ici, où se trouve le fichier CSS.
‫Et si nous parcourons maintenant quelque part ici sur cette
‫page, disons aux cours de développement Web,
‫eh bien, voyons ce qui se passe ici.
‫Et, donc ici, nous avons cette
‫page, qui est la ressource de développement Web, d'accord.
‫Donc, fondamentalement, ce morceau ici de l'URL.
‫N'oubliez pas que cela s'appelle une ressource,
‫à partir de la dernière vidéo.
‫Donc, si nous cliquons
‫dessus, nous le verrons à nouveau ici, n'est-ce pas.
‫Nous
‫avons donc à nouveau udemy. com et le /coursesdevelopment/webdevelopment.
‫C'est donc le chemin vers lequel la demande va.
‫Ici, sur le côté gauche, nous pouvons également aimer des images
‫de prévisualisation par exemple, ce logo ici.
‫Lorsqu'il s'agit d'une image, nous pouvons voir
‫l'aperçu, nous pouvons mieux voir la réponse de celle-ci.
‫Par exemple, dans celui-ci ici, nous
‫pouvons réellement voir la réponse html qui est revenue.
‫Ainsi, au lieu de simplement voir les en-têtes comme nous l'avons
‫fait ici, nous pouvons également voir la
‫réponse et un bon aperçu de tous les cookies qui ont été
‫définis dans cette requête.
‫Maintenant, nous n'avons pas encore parlé de cookies,
‫mais encore une fois, c'est quelque chose pour plus tard.
‫Mais je pense qu'il est important que vous obteniez cet aperçu de
‫la façon dont les demandes et les réponses ressemblent réellement sous
‫un capot.
‫C'était donc exactement le but de cette
‫vidéo, j'espère que le message était clair, et que tout
‫avait du sens.
‫Et donc, passons
‫maintenant à autre chose et continuons à parler du développement backend en général.