Qu'est-ce que console.log ?

Question

Quelle est l'utilité de console.log ?

Veuillez expliquer comment l'utiliser en JavaScript, avec un exemple de code.

Answer 1

Ce n'est pas une fonctionnalité de jQuery mais une fonctionnalité à des fins de débogage. Vous pouvez par exemple enregistrer quelque chose dans la console lorsque quelque chose se produit. Par exemple :

$('#someButton').click(function() {
  console.log('#someButton was clicked');
  // do something
});

Vous verrez alors #someButton was clicked dans l'onglet "Console" de Firebug (ou dans la console d'un autre outil, par exemple l'inspecteur Web de Chrome) lorsque vous cliquez sur le bouton.

Pour certaines raisons, l'objet console peut être indisponible. Vous pouvez alors vérifier s'il l'est - ce qui est utile car vous n'avez pas à supprimer votre code de débogage lorsque vous déployez en production :

if (window.console && window.console.log) {
  // console is available
}

Answer 2

Les endroits où vous pouvez voir la console ! Juste pour les avoir tous dans une seule réponse.

Firefox

http://getfirebug.com/

(vous pouvez également utiliser les outils de développement intégrés de Firefox en appuyant sur Ctrl+Shift+J (Outils > Développeur Web > Console d'erreurs), mais Firebug est bien meilleur ; utilisez Firebug).

Safari et Chrome

En gros, c'est la même chose.

https://developers.google.com/chrome-developer-tools/docs/overview

https://developer.apple.com/technologies/safari/developer-tools.html

Internet Explorer

N'oubliez pas que vous pouvez utiliser les modes de compatibilité pour déboguer IE7 et IE8 dans IE9 ou IE10.

http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

Si vous devez accéder à la console dans IE6 pour IE7 utilisez le bookmarklet Firebug Lite

http://getfirebug.com/firebuglite/ rechercher un bookmarklet stable

http://en.wikipedia.org/wiki/Bookmarklet

Opéra

http://www.opera.com/dragonfly/

iOS

Fonctionne pour tous les iPhones, iPod touch et iPads.

http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Désormais, avec iOS 6, vous pouvez afficher la console via Safari dans OS X si vous branchez votre appareil. Ou vous pouvez le faire avec l'émulateur, il suffit d'ouvrir une fenêtre du navigateur Safari et d'aller dans l'onglet "Develop". Vous y trouverez des options permettant à l'inspecteur Safari de communiquer avec votre appareil.

Windows Phone, Android

Les deux n'ont pas de console intégrée ni de possibilité de bookmarklet. Nous utilisons donc http://jsconsole.com/ tapez :listen et cela vous donnera une balise script à placer dans votre HTML. A partir de là, vous pouvez visualiser votre console à l'intérieur du site jsconsole.

iOS et Android

Vous pouvez également utiliser http://html.adobe.com/edge/inspect/ d'accéder aux outils de l'inspecteur Web et à la console sur n'importe quel appareil à l'aide de leur plugin de navigateur pratique.

---

Problèmes liés aux anciens navigateurs

Enfin, les anciennes versions d'IE plantent si vous utilisez console.log dans votre code et si les outils de développement ne sont pas ouverts en même temps. Heureusement, c'est une solution facile. Utilisez l'extrait de code ci-dessous en haut de votre code :

 if(!window.console){ window.console = {log: function(){} }; } 

Cela vérifie si la console est présente, et si ce n'est pas le cas, elle la place dans un objet avec une fonction vide appelée log . De cette façon, window.console et window.console.log ne sont jamais vraiment undefined.

Answer 3

Vous pouvez voir tous les messages enregistrés dans la console si vous utilisez un outil tel que Firebug pour inspecter votre code. Disons que vous faites ceci :

console.log('Testing console');

Lorsque vous accédez à la console dans Firebug (ou tout autre outil que vous décidez d'utiliser pour inspecter votre code), vous verrez le message que vous avez demandé à la fonction d'enregistrer. Ceci est particulièrement utile lorsque vous voulez voir si une fonction s'exécute, ou si une variable est passée/assignée correctement. C'est en fait assez précieux pour comprendre ce qui a mal tourné dans votre code.

Answer 4

Il affichera un message de journal dans la console javascript du navigateur, par exemple Firebug ou Developer Tools (Chrome / Safari) et indiquera la ligne et le fichier à partir desquels il a été exécuté.

De plus, lorsque vous produisez un objet jQuery, il inclut une référence à cet élément dans le DOM, et en cliquant dessus, vous accédez à cet élément dans l'onglet Elements/HTML.

Vous pouvez utiliser différentes méthodes, mais attention, pour que cela fonctionne dans Firefox, vous devez avoir Firebug ouvert, sinon la page entière se plantera. Que ce que vous enregistrez soit une variable, un tableau, un objet ou un élément du DOM, vous obtiendrez une analyse complète, y compris le prototype de l'objet (toujours intéressant de le consulter). Vous pouvez également inclure comme beaucoup arguments que vous voulez, et ils seront remplacés par des espaces.

console.log(  myvar, "Logged!");
console.info( myvar, "Logged!");
console.warn( myvar, "Logged!");
console.debug(myvar, "Logged!");
console.error(myvar, "Logged!");

Ceux-ci apparaissent avec des logos différents pour chaque commande.

Vous pouvez également utiliser console.profile(profileName); pour commencer à profiler une fonction, script etc. Et terminer par console.profileEnd(profileName); et il s'affichera dans votre onglet Profils dans Chrome (je ne sais pas pour FF).

Pour une référence complète, consultez le site http://getfirebug.com/logging et je vous suggère de le lire. (Traces, groupes, profilage, inspection des objets).

J'espère que cela vous aidera !

Answer 5

Il n'y a rien à faire avec jQuery et si vous voulez l'utiliser je vous conseille de faire

if (window.console) {
    console.log("your message")
}

Ainsi, vous ne cassez pas votre code lorsqu'il n'est pas disponible.

Comme suggéré dans le commentaire, vous pouvez également l'exécuter en un seul endroit, puis utiliser la fonction console.log comme d'habitude

if (!window.console) { window.console = { log: function(){} }; }