Lorsque vous commencez à créer vos premiers sites avec du code JavaScript, il est difficile de trouver et corriger les erreurs dans votre code.
Heureusement, il existe plusieurs techniques pour grandement simplifier le debug avec JavaScript.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment effectuer du debug avec JavaScript via Firebug pour Google Chrome / Firefox
Bonjour à tous et bienvenu sur Développement Facile.
Voici une nouvelle série de cours consacrée, cette fois-ci, au langage JavaScript. A travers plusieurs cours, vous allez apprendre à utiliser le langage JavaScript et à quoi sert JavaScript. Si vous combinez JavaScript, plus HTML, plus les feuilles de styles CSS, vous pouvez faire des choses fabuleuses, sur vos sites Internet, et utiliser justement, tout le monde en parle, le Web 2.0 la technologie AJAX, grâce à JavaScript, vous allez modifier, en direct sans avoir à recharger la page, vous pouvez modifier des parties de votre page HTML, par exemple le formulaire ou une zone dite, une zone bien définie sur votre page Web et tout ça sans recharger la page donc c’est beaucoup plus rapide la technologie Ajax, ça communique directement avec le serveur, ça échange des données, vous pouvez interroger un fichier PHP via JavaScript, une base de données MySQL, donc récupérez les infos, mettre à jour des informations dans une base de données, tout ça grâce à la puissance de JavaScript, combinée à l’HTML, aux feuilles de styles CSS pour avoir des graphismes fabuleux et donc avec des Frameworks comme Prototypes, JQuery etc. C’est ce que vous allez voir, tout ça à travers plusieurs vidéos sur Développement Facile, toujours des vidéos très courte, moins de 10 minutes, comme ça dès que vous avez un moment vous regardez la vidéo, vous téléchargez le code source sous la vidéo, et vous mettez directement en pratique dans votre développement.
Le debug Javascript
Là vous allez apprendre à effectuer du debug avec Javascript, avec Firefox, Google Chrome, il y a une extension Firebug qui offre énormément de possibilités. Cette extension, dans votre code JavaScript, vous allez pouvoir envoyer des sortes de echo, c’est l’équivalent en PHP, pour faire afficher vos variables, le contenu de vos variables, faire afficher directement l’heure de passage de votre code, l’exécution votre code, toutes les informations dont vous avez besoin, pour effectuer du debug en direct. Je vais vous montrer rapidement, je n’ai pas de code, donc on va aller sur un site Internet je vais vous montrer ce que ça peut donner, l’extension Firebug. Alors j’ai lancé le navigateur Firefox, je vous montre l’extension dans les modules complémentaires, ici Firebug, donc vous taper Firebug dans le catalogue, ici, et ça va vous permette justement de récupérer cette extension et de l’installer directement. Vous avez tout un tas d’extension pour utiliser Firebug, donc vu que je l’ai déjà installé elle n’apparaît pas ici, vous elle apparaîtra quand vous taperez Firebug, ensuite vous l’avez ici, et donc qu’est-ce que vous faites ? Vous allez sur un site Internet, vous cliquez ici, donc là vous avez plusieurs options, vous cliquez là et après dans console il est activé, et donc vous lancez le chargement d’une page quelconque. Là on charge sur ActionScript facile et donc vous avez du debug qui s’affiche, il y a une application Flash vous pouvez le faire avec une application JavaScript, donc on voit l’URL qui est chargée, et différents debug, donc vous avez l’heure précise de echo du debug, et la variable qui est écoutée, et vous pouvez envoyer différentes variables.
C’est très pratique pour débuguer Firebug, que ce soit des applications avec Adobe Flash, avec JavaScript, avec PHP, également donc installez cette extension dès maintenant, elle existe également sous Google Chrome, sous Internet Explorer, sous Firefox elle est gratuite. Vous retrouverez bien évidemment, un exemple de code source en JavaScript, sous ce cours vidéo, si vous avez des questions, posez-les directement sous le cours vidéo et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’extension Firebug
Ajoutez l’extension Firebug pour effectuer le debug de votre code JavaScript :
