If you're seeing this message, it means we're having trouble loading external resources on our website.

Si vous avez un filtre web, veuillez vous assurer que les domaines *. kastatic.org et *. kasandbox.org sont autorisés.

Contenu principal
Heure actuelle :0:00Durée totale :2:55

Transcription de la vidéo

L'une des compétences les plus utiles que vous pouvez acquérir en tant que développeur Web est de savoir déboguer vos pages web, en utilisant les outils qui vous sont offerts, comme les outils de développement du navigateur. Tous les navigateurs, aujourd'hui, proposent des outils de développement. Vous devez donc, théoriquement, apprendre à vous servir de chacun d’eux, mais il est aussi bon de savoir quel navigateur propose les outils les plus puissants et commencer à déboguer avec ce navigateur. Pour l'instant, c’est Chrome, au moins pour moi, mais ça peut changer à l’avenir. OK. Ouvrons donc les outils de développement de Chrome. Il y a plusieurs façons de procéder. J’aime savoir quel est le raccourci clavier sur mon navigateur et mon système d’exploitation, et l’utiliser car c'est ce qu'il y a de plus rapide. Sur Mac, c’est Command-Option-I. Ta-da ! Voici nos outils de développement. Une autre façon de faire est de faire un clic droit, Inspecter l’élément, et ça ouvrira les outils de développement. Ça ouvrira sur la console HTML, donc vous pouvez cliquer sur ce que vous voulez inspecter. Et c’est également assez rapide. Finalement, il y a la méthode longue, qui consiste à accéder à votre menu, aller sur Plus d’outils, puis sur Outils de développement, et ça s'ouvrira aussi. C’est un chemin sûr, mais c'est long, donc je vous recommande de trouver le raccourci clavier et de l’utiliser, encore et encore, jusqu’à ce que vous le mémorisiez. OK. Allons-y pour le raccourci clavier. Super ! Il y a beaucoup d'outils là-dedans, et il y en a un qu'on va vite utiliser. C’est celui-là que je vais vous montrer. Il s’agit de la Console JavaScript. Cette console vous montre tous les avertissements et les erreurs associés aux requêtes HTTP, aux fichiers CSS et JavaScript, ainsi que tout ce que nous voudrons y afficher. Pour vous monter, je vais utiliser 'console.log' pour afficher un message. Pour le moment, remarquez qu’elle affiche de nombreuses erreurs de syntaxe, comme 'consol is not defined'. C’est parce que je tape lentement et que je suis dans un environnement en temps réel qui évalue constamment le nouveau code. Il me montre donc toutes les erreurs pendant ma saisie. C’est quelque chose qu’il faut avoir à l’esprit quand on utilise la console dans ses pages Web, ici, à la Khan Academy. Vous pouvez tous les ignorer, tous ces messages ici, jusqu’à ce que vous ayez terminé de taper pour voir quelle est vraiment l'erreur, ou, encore mieux, aucune erreur. Presto ! la console me dit Hello. Qu’elle est sympathique ! Très bien. Il y a énormément de choses à faire avec les outils de développement de votre navigateur et vous devez définitivement les explorer d'avantage mais cela devrait suffire à vous aider à faire un débogage simple quand vous suivrez ce cours.