Le code est sujet aux erreurs. Vous ferez très probablement des erreurs… Oh, de quoi je parle ? Vous allez absolument faire des erreurs, du moins si vous êtes un humain et non un robot.
Mais dans le navigateur, les utilisateurs ne voient pas les erreurs par défaut. Ainsi, si quelque chose ne va pas dans le script, nous ne verrons pas ce qui est cassé et ne pourrons pas le réparer.
Pour voir les erreurs et obtenir de nombreuses autres informations utiles sur les scripts, des « outils de développement » ont été intégrés aux navigateurs.
La plupart des développeurs se tournent vers Chrome ou Firefox pour le développement, car ces navigateurs disposent des meilleurs outils de développement. D'autres navigateurs fournissent également des outils de développement, parfois dotés de fonctionnalités spéciales, mais sont généralement en train de « rattraper » Chrome ou Firefox. Ainsi, la plupart des développeurs ont un navigateur « favori » et passent à un autre si un problème est spécifique au navigateur.
Les outils de développement sont puissants ; ils ont de nombreuses fonctionnalités. Pour commencer, nous apprendrons comment les ouvrir, examiner les erreurs et exécuter des commandes JavaScript.
Ouvrez la page bug.html.
Il y a une erreur dans le code JavaScript. Il est caché aux yeux d'un visiteur ordinaire, alors ouvrons les outils de développement pour le voir.
Appuyez sur F12 ou, si vous êtes sur Mac, alors Cmd + Opt + J .
Les outils de développement s'ouvriront par défaut sur l'onglet Console.
Cela ressemble un peu à ceci :
L'apparence exacte des outils de développement dépend de votre version de Chrome. Cela change de temps en temps mais devrait être similaire.
Ici, nous pouvons voir le message d'erreur de couleur rouge. Dans ce cas, le script contient une commande « lalala » inconnue.
Sur la droite, il y a un lien cliquable vers la source bug.html:12 avec le numéro de ligne où l'erreur s'est produite.
Sous le message d'erreur se trouve un symbole bleu > . Il marque une « ligne de commande » où nous pouvons taper des commandes JavaScript. Appuyez sur Entrée pour les exécuter.
Nous pouvons désormais voir les erreurs, et cela suffit pour commencer. Nous reviendrons plus tard sur les outils de développement et aborderons le débogage plus en profondeur dans le chapitre Débogage dans le navigateur.
Entrée multiligne
Habituellement, lorsque nous mettons une ligne de code dans la console, puis appuyons sur Enter , elle s'exécute.
Pour insérer plusieurs lignes, appuyez sur Shift + Enter . De cette façon, on peut saisir de longs fragments de code JavaScript.
La plupart des autres navigateurs utilisent F12 pour ouvrir les outils de développement.
Leur apparence et leur convivialité sont assez similaires. Une fois que vous savez utiliser l’un de ces outils (vous pouvez commencer avec Chrome), vous pouvez facilement passer à un autre.
Safari (navigateur Mac, non pris en charge par Windows/Linux) est ici un peu spécial. Nous devons d’abord activer le « menu Développer ».
Ouvrez les Préférences et accédez au volet « Avancé ». Il y a une case à cocher en bas :
Maintenant, Cmd + Opt + C peut basculer la console. Notez également que le nouvel élément de menu supérieur nommé « Développer » est apparu. Il propose de nombreuses commandes et options.
Les outils de développement nous permettent de voir les erreurs, d'exécuter des commandes, d'examiner des variables et bien plus encore.
Ils peuvent être ouverts avec F12 pour la plupart des navigateurs sous Windows. Chrome pour Mac nécessite Cmd + Opt + J , Safari : Cmd + Opt + C (vous devez d'abord l'activer).
L’environnement est désormais prêt. Dans la section suivante, nous passerons à JavaScript.