2
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. jQLeadBrite("#leadplayer_video_element_5304F5EBC986A").leadplayer(false, "eyJnYSI6dHJ1 ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJ odHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjB DIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDR VZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIE VtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidH h0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludm FsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3Nv dXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMwNEY1RUJDOTg2QSIsInd pZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgZW ZmZWN0dWVyIGR1IGRlYnVnIGF2ZWMgSmF2YVNjcmlwdCB2aWEgRmlyZWJ1ZyBwb3VyIEd vb2dsZSBDaHJvbWUgXC8gRmlyZWZveCAiLCJkZXNjcmlwdGlvbiI6IkNvbW1lbnQgZWZmZWN 0dWVyIGR1IGRlYnVnIGF2ZWMgSmF2YVNjcmlwdCB2aWEgRmlyZWJ1ZyBwb3VyIEdvb2dsZ SBDaHJvbWUgXC8gRmlyZWZveCAiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiO nRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOiJlbmQiLCJi dGV4dCI6IkRcdTAwZTljb3V2cmV6IG1hIE1cdTAwZTl0aG9kZSBwb3VyIENyXHUwMGU5ZXIgZ GVzIEFwcGxpY2F0aW9ucyBKYXZhU2NyaXB0IFwvIEhUTUw1ICBQZXJmb3JtYW50ZXMgISB DbGlxdWV6IGljaS4uLiIsInVybCI6Imh0dHA6XC9cL3d3dy5wcm9ncmFtbWF0aW9uLWZhY2lsZ S5jb21cL2pzZSIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI 6IkluZHhNd0J0NjNNIn0="); 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 1 / 2

Comment effectuer du debug avec JavaScript via Firebug pour Google Chrome / Firefox

Embed Size (px)

Citation preview

  • Lorsque vous commencez crer vos premiers sites avec du code JavaScript, il est difficile detrouver et corriger les erreurs dans votre code. Heureusement, il existe plusieurs techniquespour grandement simplifier le debug avec JavaScript. Tout est dans la vido ci-dessous.

    jQLeadBrite("#leadplayer_video_element_5304F5EBC986A").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMwNEY1RUJDOTg2QSIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgZWZmZWN0dWVyIGR1IGRlYnVnIGF2ZWMgSmF2YVNjcmlwdCB2aWEgRmlyZWJ1ZyBwb3VyIEdvb2dsZSBDaHJvbWUgXC8gRmlyZWZveCAiLCJkZXNjcmlwdGlvbiI6IkNvbW1lbnQgZWZmZWN0dWVyIGR1IGRlYnVnIGF2ZWMgSmF2YVNjcmlwdCB2aWEgRmlyZWJ1ZyBwb3VyIEdvb2dsZSBDaHJvbWUgXC8gRmlyZWZveCAiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOiJlbmQiLCJidGV4dCI6IkRcdTAwZTljb3V2cmV6IG1hIE1cdTAwZTl0aG9kZSBwb3VyIENyXHUwMGU5ZXIgZGVzIEFwcGxpY2F0aW9ucyBKYXZhU2NyaXB0IFwvIEhUTUw1ICBQZXJmb3JtYW50ZXMgISBDbGlxdWV6IGljaS4uLiIsInVybCI6Imh0dHA6XC9cL3d3dy5wcm9ncmFtbWF0aW9uLWZhY2lsZS5jb21cL2pzZSIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6IkluZHhNd0J0NjNNIn0=");

    Afficher le texte de la vidoComment effectuer du debug avec JavaScript via Firebug pour Google Chrome / FirefoxBonjour tous et bienvenu sur Dveloppement Facile. Voici une nouvelle srie de coursconsacre, 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, plusHTML, plus les feuilles de styles CSS, vous pouvez faire des choses fabuleuses, sur vos sitesInternet, et utiliser justement, tout le monde en parle, le Web 2.0 la technologie AJAX, grce JavaScript, vous allez modifier, en direct sans avoir recharger la page, vous pouvez modifierdes parties de votre page HTML, par exemple le formulaire ou une zone dite, une zone biendfinie sur votre page Web et tout a sans recharger la page donc c'est beaucoup plus rapide latechnologie Ajax, a communique directement avec le serveur, a change des donnes, vouspouvez interroger un fichier PHP via JavaScript, une base de donnes MySQL, donc rcuprezles infos, mettre jour des informations dans une base de donnes, tout a grce lapuissance de JavaScript, combine l'HTML, aux feuilles de styles CSS pour avoir desgraphismes fabuleux et donc avec des Frameworks comme Prototypes, JQuery etc. C'est ce

    1 / 2

  • que vous allez voir, tout a travers plusieurs vidos sur Dveloppement Facile, toujours desvidos trs courte, moins de 10 minutes, comme a ds que vous avez un moment vousregardez la vido, vous tlchargez le code source sous la vido, et vous mettez directementen pratique dans votre dveloppement.Le debug Javascript L vous allez apprendre effectuer du debug avec Javascript, avec Firefox, Google Chrome, il y a une extension Firebugqui offre normment de possibilits. Cette extension, dans votre code JavaScript, vous allezpouvoir 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'excution votre code, toutes les informations dont vous avez besoin, pour effectuer du debugen direct. Je vais vous montrer rapidement, je n'ai pas de code, donc on va aller sur un siteInternet je vais vous montrer ce que a peut donner, l'extension Firebug. Alors j'ai lanc lenavigateur Firefox, je vous montre l'extension dans les modules complmentaires, ici Firebug,donc vous taper Firebug dans le catalogue, ici, et a va vous permette justement de rcuprercette extension et de l'installer directement. Vous avez tout un tas d'extension pour utiliserFirebug, donc vu que je l'ai dj install elle n'apparat pas ici, vous elle apparatra quand voustaperez Firebug, ensuite vous l'avez ici, et donc qu'est-ce que vous faites ? Vous allez sur unsite Internet, vous cliquez ici, donc l vous avez plusieurs options, vous cliquez l et aprs dansconsole il est activ, et donc vous lancez le chargement d'une page quelconque. L on chargesur ActionScript facile et donc vous avez du debug qui s'affiche, il y a une application Flashvous pouvez le faire avec une application JavaScript, donc on voit l'URL qui est charge, etdiffrents debug, donc vous avez l'heure prcise de echo du debug, et la variable qui estcoute, et vous pouvez envoyer diffrentes variables.Votre plan d'actions ! C'est trspratique pour dbuguer Firebug, que ce soit des applications avec Adobe Flash, avecJavaScript, avec PHP, galement donc installez cette extension ds maintenant, elle existegalement sous Google Chrome, sous Internet Explorer, sous Firefox elle est gratuite. Vousretrouverez bien videmment, un exemple de code source en JavaScript, sous ce cours vido,si vous avez des questions, posez-les directement sous le cours vido et je vous dis trsbientt sur Dveloppement Facile.

    Tlchargez l'extension FirebugAjoutez l'extension Firebug pour effectuer le debug de votre code JavaScript :

    InstallezExtension Firebug pour le navigateur Firefox.InstallezExtension Firebug pour le navigateur Google Chrome.InstallezExtension Firebug pour le navigateur Internet Explorer.

    Partagez vos techniques de debugIl existe d'autres solutions, tout aussi puissante, pour le debug du code JavaScript. Partagezvos techniques dans les commentaires ci-dessous.Comment effectuer du debug avecJavaScript via Firebug pour Google Chrome / Firefox

    Powered by TCPDF (www.tcpdf.org)

    2 / 2