<aside>
</aside>
Dans cette partie, vous allez prendre en main l’inspecteur Chrome pour modifier le jeu : vous voulez sauter plus haut ou devenir invincible ? C’est possible !
Objectif : Apprendre à utiliser l’inspecteur Chrome pour coder en JavaScript.
Pour commencer, ouvrez la page du jeu Chrome Dino : copiez-collez l’URL chrome://dino/ dans la barre de recherche en haut de la page web.
Ouvrez l’inspecteur Chrome : pour cela, appuyez sur F12 ou Ctrl + Shift + I (Cmd + Option + I sur Mac) ou faites un clic droit sur la page web et sélectionnez "Inspecter" ou "Inspecter l'élément".
<aside> 📕
L’inspecteur Chrome, aussi appelé DevTools, est un outil intégré à Google Chrome permettant d’analyser et de modifier le code HTML, CSS et JavaScript d'une page web en temps réel.
</aside>
Voici à quoi ressemble l’inspecteur Chrome :
Celui-ci a plusieurs onglets dont :
Elements : Permet de voir et modifier le HTML et CSS en direct.
<aside> 📕
L’HTML (HyperText Markup Language) est le langage de base pour structurer le contenu d’une page web. Il utilise des balises pour définir différents types de contenu comme des titres, des paragraphes, des images, des liens, etc.
</aside>
Console : Sert à exécuter du JavaScript et voir les erreurs.
<aside> 📕
Le JavaScript est un langage de programmation utilisé principalement pour rendre les pages web interactives. Alors que l’HTML structure le contenu, le JavaScript ajoute de la dynamique : clics, animations, mises à jour en temps réel, etc.
</aside>
Sources : Permet de debugger du code JavaScript.
Network : Analyse les requêtes HTTP envoyées et reçues par le site.
Performance : Vérifie la rapidité du site.
Application : Accède au LocalStorage, cookies, cache…
Allez dans l'onglet Console. Vous pouvez écrire du code Javascript ici pour interagir avec le jeu. Pour exécuter une ligne de code, appuyez sur la touche Entrée.
<aside> 💡
Si jamais vous voulez recharger la page parce-que vous avez trop modifié le code de la page, appuyez sur Ctrl + Shift + R (Cmd + Option + R sur Mac) ou faites un clic droit et appuyez sur “Recharger”.
</aside>