Les kits de developpement
En plus des consoles d'erreurs, certains navigateurs intègrent de base un kit de développement Web. Ces kits vous permettent de déboguer bien plus efficacement des erreurs complexes.
Ces kits possèdent plusieurs outils. Pour la plupart, ils sont constitués :
Chaque navigateur (quel qu'il soit) possède, dans sa dernière version, un kit de développement préintégré, la seule exception reste Firefox qui nécessite un module complémentaire nommé Firebug que vous pourrez trouver sur le site officiel.
Concernant Internet Explorer, il existe un kit de développement uniquement depuis la version 8, pas avant. Pour l'afficher appuyez sur la touche F12 de votre clavier ; ce raccourci clavier est aussi valable pour Firefox et Chrome.
Concrètement, à quoi peuvent réellement vous servir ces kits ? Il existe deux utilisations principales :
Nous allons décrire ces deux utilisations, mais uniquement sous Firebug étant donné que c'est le plus utilisé et surtout qu'il possède une version lite compatible sur un grand nombre de navigateurs. Si vous utilisez le kit d'un autre navigateur, ne vous inquiétez pas, le fonctionnement devrait être sensiblement le même, il suffira juste de chercher un peu.
Pour afficher dynamiquement le code HTML, cliquez sur
Cette icône permet d'afficher dynamiquement le code HTML d'une page
(raccourci clavier : Ctrl + Maj + C) et déplacez votre curseur sur la page Web. Chaque élément survolé sera encadré de bleu ; si vous cliquez sur l'un d'eux, vous verrez alors le code le concernant s'afficher comme ceci :
Au survol d'un élément, son code HTML s'affiche dans Firebug
À partir de là, vous pouvez choisir de développer les éléments pour voir ce qu'ils contiennent, vous pouvez aussi les modifier, etc.
Concernant les points d'arrêt, activez tout d'abord le panneau de script de Firebug en cliquant sur la petite flèche de l'onglet
L'onglet script de Firebug
puis en cliquant sur Activé.
Concrètement, à quoi servent les points d'arrêt ?
À faire une pause sur une ligne d'un code Javascript et à afficher l'état complet des variables, méthodes, objets, etc. La quantité d'informations disponible est tout simplement immense, vous pouvez les retrouver dans le cadre de droite de Firebug dès qu'un point d'arrêt est atteint :
Vous retrouvez les informations dans le cadre de droite de Firebug
Voyons la structure de ce panneau de débogage : à gauche vous avez le code Javascript avec un bouton qui spécifie le fichier contenant du Javascript qui est en cours de visualisation, à droite vous retrouvez toutes les informations obtenues dès qu'un point d'arrêt est atteint.
Cette icône permet de voir de quel fichier provient le Javascript
Pour ajouter un nouveau point d'arrêt, il vous suffit de cliquer à gauche du numéro de la ligne de code à laquelle vous souhaitez attribuer un point d'arrêt, vous verrez alors un point rouge s'afficher comme ceci :
Un icône indique le point d'arrêt
Notez bien que lorsque vous attribuez un point d'arrêt à une ligne de code, ce point d'arrêt mettra le code en pause avant l'exécution de la ligne en question.
Après avoir mis vos points d'arrêt, il ne vous reste plus qu'à recharger la page avec F5 et votre code sera mis en pause à chaque point d'arrêt rencontré. Firebug listera alors, dans le cadre de droite, l'état de toutes les propriétés de votre script. Pour passer au point d'arrêt suivant, vous n'aurez qu'à cliquer sur continuer
Cette icône permet de reprendre l'exécution du script après un point d'arrêt
jusqu'à ce que le code se termine.
La fonction alert() est très utile en terme de débogage, car elle met le script en pause pendant l'affichage de la valeur que vous souhaitiez voir. Cependant, parfois nous souhaiterions que le script ne soit pas mis en pause. Il faut alors entreprendre des actions fastidieuses : créer un élément HTML pour recevoir les informations de débogage puis le remplir, bref, des actions dont nous nous passerions bien.
Heureusement, depuis quelques années, un objet commence à se démocratiser. Il se nomme console et est exclusivement conçu pour le débogage de vos scripts. Cet objet possède plusieurs méthodes, mais seule l'une d'entre elles vous sera vraiment utile : log().
Le but de log() est tout simplement d'afficher la valeur que vous lui passez en paramètre, non pas dans une nouvelle fenêtre comme le ferait alert(), mais directement dans la console de débogage. Ainsi, le script n'est pas bloqué à chaque affichage de valeur et vous pouvez retrouver la liste complète des valeurs dans votre console. L'exemple suivant est réalisé avec la console Web de Firefox (Ctrl+Maj+K) :
Vous retrouvez la liste complète des valeurs dans votre console
Cet objet est disponible sur tous les navigateurs récents et sur Internet Explorer 9.
Créé avec HelpNDoc Personal Edition: Générateur complet de livres électroniques Kindle
