3. Outils de développement du navigateur
Après cette quête, tu sauras comment te servir du navigateur pour envoyer/recevoir des requêtes
Objectifs
- Comprendre ce qu'envoie un navigateur lors d'une navigation
- Récupérer les requêtes effectuées pour une seule page
- Envoyer des requêtes
Une révolution : les robots cuiseurs
Depuis quelques années, certaines technologies sont capables de remplacer l'homme. La progression ultra-rapide de la technologie, à partir de l'ère moderne, a rendu inutile énormément de savoirs ancestraux, maintenant suppléés par des machines (machine à laver le linge, cuisinière, téléphone ...).
Aujourd'hui, il existe des robots qui font la cuisine à ta place ! Si ce n'est pas génial, ça ! Toutes les tâches ingrates: couper les légumes, casser les oeufs, remuer la pâte, doser les ingrédients et surveiller la cuisson. Enfin bon, toute les étapes de la cuisine d'un plat ...
La navigation
Ton robot cuiseur sait comment tout faire, tu dois juste lui indiquer quoi faire. Il connaît une suite de recettes, l'algorithme et les gestes à effectuer pour réaliser le plat indiqué dans la recette.
Un navigateur web, c'est pareil. Il sait comment récupérer une page et il abstrait toute la couche HTTP pour te faciliter la vie. Il dispose sûrement de moins de recettes que les robots cuiseurs, mais si tu devais taper l'entièreté des requêtes pour naviguer sur la Toile, je pense que tu ne passerais pas plus d'une heure à surfer avant de jeter ton PC par la fenêtre et d'envoyer des lettres d'insultes aux concepteurs de l'Internet.
Ton navigateur communique en HTTP avec le Web, pour demander des ressources et fournir des informations aux serveurs qu'il rencontre. Tout cela se fait sans que tu le remarques : quand tu cliques sur un lien, une requête GET est envoyée à l'adresse du lien sur lequel tu as cliqué. Quand tu fournis des données (utilisateur + mot de passe + se souvenir de moi), il envoie des requêtes POST.
Mais au fait, comment un navigateur sait-il qu'il doit envoyer une requête POST ?
Les formulaires
Lorsque tu achètes un robot cuiseur, tu dois remplir un document papier spécifiant tes informations personnelles : nom, prénom, adresse de facturation et peut-être même un questionnaire commercial. Ce document s'appelle un formulaire.
Le même concept existe en informatique pour passer des données. Tu interagis avec des formulaires dès lors que tu te connectes à un site avec ton nom d'utilisateur/mot de passe. Les formulaires sont constitués de cases à remplir, chacune embarquant une valeur nommée (variable). Ces variables seront envoyées à une URL pour être traitées. Tout ceci en se servant du mécanisme des requêtes POST.
Ces formulaires sont écrits en HTML, et les éléments envoyés sont délimités par la balise <form>.
Dès que tu cliques sur le bouton pour soumettre un formulaire, ton navigateur va envoyer par défaut les données contenues dans le formulaire, dans une requête POST qu'il va adresser au serveur. Ainsi, une navigation fluide est assurée et l'utilisateur n'y voit que du feu.
Lire la première section et plus si tu es intéressé
Les outils développeurs
Ton robot cuiseur est configurable. Tu peux comprendre chacune des étapes qu'il entreprend, décomposer chacun de ses algorithmes et lui ajouter des étapes, des plats complets. Il suffit que tu actives le mode "configuration".
Eh bien un mode semblable existe dans ton navigateur : il te permet de suivre en détail tout le trafic Web que tu génères. De l'analyse du code source des pages, en passant par les requêtes que tu effectues jusqu'à l'analyse des performances des pages en question, le navigateur est le premier outil à maîtriser pour comprendre la structure du Web.
Ton navigateur dispose de fonctionnalités cachées, et notamment d'un mode développeur qui te permet d'analyser en détail tout ce qui se passe dans la machine. Pour l'exemple, nous allons utiliser Chrome qui est un des navigateurs les plus utilisés dans le monde, qui plus est moderne et respectant les standards. Tu peux faire apparaître la console développeur en appuyant sur la touche de ton clavier.
La page Web se rétrécit et tu vois apparaître un tout nouvel outil sur ta fenêtre : il s'agit des outils développeur. Cet outil tout puissant, tu vas apprendre à le maîtriser petit à petit.
Comment je me dépatouille avec tout ça ? Il y a tellement de possibilités !
Visionner les requêtes
Pour couper des tomates en petit dés, ton fier robot cuiseur va entreprendre une liste d'actions fournie : repérer une tomate, la prendre, repérer un couteau, le prendre, couper la tomate en 6 rondelles, diviser les 6 rondelles en 2, diviser encore les 12 demi-rondelles en 2, puis diviser les 24 demi-rondelles pour obtenir 48 quarts de rondelles. Recommencer avec une autre tomate. Ca fait beaucoup d'étapes !
Quand tu te connectes à un site Web, tu effectues bien souvent plus qu'une simple requête GET vers l'URL. Très souvent, le site contient des images dont il ne dispose pas. C'est alors ton navigateur qui va récupérer les ressources manquantes sur d'autres serveurs. De ce fait, pour une seule page, tu peux effectuer plus d'une dizaine de requêtes pour récupérer du contenu : des images, des scripts, de la mise en forme ...
Commençons par analyser les requêtes effectuées sur un site comme Google. Place-toi sur l'onglet "Réseau" des outils fraîchement invoqués puis connecte-toi au site de Google. Tu verras une foultitude de requêtes s'exécuter. C'est ton navigateur qui fait les requêtes: il récupère des scripts, des images, du CSS que la page Google ne fournit pas avec une seule requête GET.
Tu disposes d'une liste de filtres que tu peux appliquer sur les résultats. Ces filtres te permettent de ne visualiser qu'une partie des requêtes. Certaines requêtes concernent du contenu textuel (HTML), d'autres des scripts JavaScipt (JS) et d'autres la mise en forme (CSS). Cliquer sur un filtre restreint les requêtes au filtre en question. Tu peux combiner les filtres pour ne visualiser que ce qui t'intéresse.
Lire à partir de 2:10 jusqu'à 5:07
Lire "Activité Réseau"
Challenge
Analyse de flux
Avec ton navigateur: envoie une requête GET à Google. Récupère la liste de toutes les requêtes faites pour récupérer du HTML et du JS.
Critères de validation
- Fournis une capture d'écran de la section "Réseau" du débogueur Chrome