Qu'est-ce que console.log?

415

À quoi ça sert console.log?

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

Mihir
la source

Réponses:

455

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

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

Vous verriez alors #someButton was clickeddans l'onglet «Console» de Firebug (ou la console d'un autre outil - par exemple, l'inspecteur Web de Chrome) lorsque vous cliqueriez sur le bouton.

Pour certaines raisons, l'objet console peut ne pas être disponible. Ensuite, vous pouvez vérifier si c'est le cas - cela 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
}
Jan Hančič
la source
17
Les outils de développement de Google Chrome ont également une console intégrée.
RobertPitt
8
"Ceci est utile car vous n'avez pas besoin de supprimer votre code de débogage lorsque vous déployez en production" <- Et si un utilisateur final ouvre Firebug?
AbdullahC
6
il est également utile de ne pas laisser IE lancer une erreur pour que la console ne soit pas définie
Alan Whitelaw
4
À mon humble avis, mieux que de vérifier à chaque fois si console.log est disponible, il vaut mieux avoir quelque chose comme ceci: if (typeof (console) == 'undefined') {console = {'log': function () {return}}} In dans ce cas, vous pouvez écrire console.log à chaque fois que vous en avez besoin sans en vérifier la présence!
Enrico Carlesso
12
if (console.log)(ou même if (console && console.log)) générera toujours une erreur si la console n'est pas disponible. Vous devez utiliser window.console(comme il windowest garanti d'exister) et ne vérifier qu'un seul niveau de profondeur à la fois.
Tgr
226

Des 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 maintenant les outils de développement intégrés de Firefox Ctrl + Maj + J (Outils> Développeur Web> Console d'erreur), mais Firebug est bien meilleur; utilisez Firebug)

Safari et Chrome

Fondamentalement, 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/ recherchez 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

Maintenant, 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, ouvrez simplement une fenêtre du navigateur Safari et allez dans l'onglet "Développer". Vous y trouverez des options pour que l'inspecteur Safari communique avec votre appareil.

Windows Phone, Android

Les deux n'ont pas de console intégrée et aucune capacité de bookmarklet. Nous utilisons donc http://jsconsole.com/ type: listen et il vous donnera une balise de script à placer dans votre code HTML. À partir de là, vous pouvez voir votre console dans le site Web jsconsole.

iOS et Android

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


Problèmes de navigateur plus anciens

Enfin, les anciennes versions d'IE se bloqueront si vous utilisez console.log dans votre code et que 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 sinon elle la définit sur un objet avec une fonction vide appelée log. De cette façon, window.console et window.console.log ne sont jamais vraimentundefined.

Fresheyeball
la source
26
Corrigez-moi si je me trompe, mais je pense qu'il n'y a pas besoin de Firebug dans Firefox pour afficher la console, cliquez simplement sur Ctrl + Maj + J (Outils> Développeur Web> Console d'erreur)
Dane411
4
@ Dane411 c'est vrai, mais firebug est meilleur et plus couramment utilisé.
Fresheyeball
3
@Fresheyeball Quelqu'un doit nettoyer toutes les ordures, mais je pense qu'à un moment donné, il devient moins intéressant de récolter ces représentants et de garder la communauté propre.
andlrc
2
Quiconque a rejeté cette réponse, veuillez commenter. les votes sans commentaires sont inutiles
Fresheyeball
il y avait window.dump avant window.console.log. C'est mieux que la fonction de journal vide
OCTAGRAM
100

Vous pouvez afficher 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 quel que soit l'outil que vous décidez d'utiliser pour inspecter votre code), vous verrez le message que vous avez demandé à la fonction de consigner. Cela est particulièrement utile lorsque vous souhaitez voir si une fonction est en cours d'exécution ou si une variable est passée / affectée correctement. C'est en fait plutôt utile pour déterminer ce qui n'a pas fonctionné avec votre code.

Fibericon
la source
10
N'oubliez pas de le définir d'abord pour éviter les erreurs dans IE: stackoverflow.com/a/7585409/318765
mgutt
83

Il affichera un message de journal sur la console javascript du navigateur, par exemple Firebug ou Developer Tools (Chrome / Safari) et affichera la ligne et le fichier d'où il a été exécuté.

De plus, lorsque vous générez un objet jQuery, il inclura une référence à cet élément dans le DOM, et en cliquant dessus, vous accéderez à cela dans l'onglet Éléments / HTML.

Vous pouvez utiliser différentes méthodes, mais sachez que pour que cela fonctionne dans Firefox, vous devez avoir Firebug ouvert, sinon la page entière plantera. Que ce que vous enregistrez soit une variable, un tableau, un objet ou un élément DOM, il vous donnera une ventilation complète, y compris le prototype de l'objet également (toujours intéressant d'avoir un coup d'œil). Vous pouvez également inclure autant d' arguments que vous le souhaitez 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 démarrer le profilage d'une fonction, d'un script, etc. Ensuite, terminez-le avec console.profileEnd(profileName);et il apparaîtra dans l'onglet Profils de Chrome (je ne sais pas avec FF).

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

J'espère que cela t'aides!

Fred
la source
1
Pourquoi vaut console.log("x:", x)mieux que console.log("x:" + x)? Est-il moins sujet aux erreurs car a ,est plus facile à lire qu'un a +?
Kevin Meredith
À mon avis, il est légèrement plus facile à lire lorsque vous sortez beaucoup de choses différentes. Dans ce cas, il devrait probablement être utilisé +strictement, mais je voulais montrer que vous pouvez également utiliser des virgules dans les fonctions de la console. De plus, cela évite les problèmes si les deux variables sont des entiers ou des tableaux.
Fred
5
console.log("x:", x)est nettement meilleur, car quand xest un objet ou un tableau (ou autre chose qu'une chaîne), il s'affiche correctement, sans conversion en chaîne.
Josef Kufner le
34

Il n'y a rien à voir avec jQuery et si vous voulez l'utiliser je vous conseille de le 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 l'utiliser console.logcomme d'habitude

if (!window.console) { window.console = { log: function(){} }; }
Baptiste Pernet
la source
18
Puis-je recommander plutôt de faire if(!window.console){ window.console = function(){}; }à la place, puis d'utiliser console.log comme d'habitude.
Fresheyeball
23

console.logn'a rien à voir avec jQuery. Il s'agit d'un objet / méthode commun fourni par les débogueurs (y compris le débogueur Chrome et Firebug) qui permet à un script de consigner des données (ou des objets dans la plupart des cas) sur la console JavaScript.

Quentin
la source
19

console.logenregistre les informations de débogage sur la console sur certains navigateurs (Firefox avec Firebug installé, Chrome, IE8, tout ce qui est équipé de Firebug Lite). Sur Firefox, c'est un outil très puissant, vous permettant d'inspecter des objets ou d'examiner la mise en page ou d'autres propriétés des éléments HTML. Il n'est pas lié à jQuery, mais deux choses sont généralement effectuées lors de son utilisation avec jQuery:

  • installez l' extension FireQuery pour Firebug. Cela, entre autres avantages, rend la journalisation des objets jQuery plus agréable.

  • créer un wrapper plus conforme aux conventions de code de chaînage de jQuery.

Cela signifie généralement quelque chose comme ceci:

$.fn.log = function() {
    if (window.console && console.log) {
        console.log(this);
    }
    return this;
}

que vous pouvez ensuite invoquer comme

$('foo.bar').find(':baz').log().hide();

pour vérifier facilement à l'intérieur des chaînes jQuery.

Tgr
la source
16

console.log n'a rien à voir avec jQuery.

Il enregistre un message dans une console de débogage, telle que Firebug.

SLaks
la source
16

Un point de confusion est parfois que pour enregistrer un message texte avec le contenu de l'un de vos objets à l'aide de console.log, vous devez passer chacun des deux comme argument différent. Cela signifie que vous devez les séparer par des virgules car si vous deviez utiliser l'opérateur + pour concaténer les sorties, cela appellerait implicitement la .toString()méthode de votre objet. Dans la plupart des cas, cela n'est pas explicitement annulé et l'implémentation par défaut héritée parObject ne fournit aucune information utile.

Exemple à essayer dans la console:

>>> var myObj = {foo: 'bar'}
undefined
>>> console.log('myObj is: ', myObj);
myObj is: Object { foo= "bar"}

alors que si vous essayez de concaténer le message texte informatif avec le contenu de l'objet, vous obtiendrez:

>>> console.log('myObj is: ' + myObj);
myObj is: [object Object]

Gardez donc à l'esprit que console.log prend en fait autant d'arguments que vous le souhaitez.

Thalis K.
la source
13

Utilisez console.logpour ajouter des informations de débogage à votre page.

Beaucoup de gens l'utilisent alert(hasNinjas)à cette fin, mais il console.log(hasNinjas)est plus facile de travailler avec eux. L'utilisation d'une alerte fait apparaître une boîte de dialogue modale qui bloque l'interface utilisateur.

Edit: je suis d'accord avec Baptiste Pernet et Jan Hančič que c'est une très bonne idée de vérifier si window.consoleest défini en premier afin que votre code ne casse pas s'il n'y a pas de console disponible.

Mark Byers
la source
12

Un exemple - supposons que vous vouliez savoir quelle ligne de code vous avez pu exécuter votre programme (avant qu'il ne se casse!), Tapez simplement

console.log("You made it to line 26. But then something went very, very wrong.")
Gautam Kshatriya
la source
11

Vous l'utilisez pour déboguer du code JavaScript avec Firebug pour Firefox ou la console JavaScript dans les navigateurs WebKit .

var variable;

console.log(variable);

Il affichera le contenu de la variable, même s'il s'agit d'un tableau ou d'un objet.

Il est semblable à print_r($var);de PHP .

jondavidjohn
la source
3
Une astuce très pratique ... Je comprend toujours les éléments suivants dans un fichier javascript globalement accessible: if (!window.console) { window.console = { log : function() {} }; }. Cela vous permet de vous en sortir en oubliant de supprimer l'instruction de débogage occasionnelle.
roufamatic
@roufamatic Je ne sais pas ... ajouter du code, pour gérer le code qui n'appartient pas, semble être une solution assez terrible ... surtout quand trouver / remplacer est si facile ...
jondavidjohn
10

Attention: laisser des appels à la console dans votre code de production entraînera la rupture de votre site dans Internet Explorer. Ne le gardez jamais déballé. Voir: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

Harlo Holmes
la source
2
Ce n'est pas que le journal de la console se cassera si vous utilisez une machine Windows, mais il cassera votre site si vous utilisez Internet Explorer.
Kris Hollenbeck
Je pense que le blog référencé dans la réponse n'existe plus.
Tsundoku
Le lien d'origine est mort. J'ai trouvé une copie des archives Web.
Alex
8

Au début, le débogage JS était effectué via la alert()fonction - maintenant c'est une pratique obsolète.

La console.log()est une fonction qui écrit un message pour ouvrir une session sur la console de débogage, tels que Webkit ou Firebug. Dans un navigateur, vous ne verrez rien à l'écran. Il enregistre un message dans une console de débogage. Il n'est disponible que dans Firefox avec Firebug et dans les navigateurs Webkit (Chrome et Safari). Cela ne fonctionne pas bien dans toutes les versions d'IE .

L'objet console est une extension du DOM.

Le console.log()doit être utilisé dans le code uniquement pendant le développement et le débogage.

Il est considéré comme une mauvaise pratique que quelqu'un laisse console.log()dans le fichier javascript sur le serveur de production.

jjpcondor
la source
5

Si votre navigateur prend en charge le débogage, vous pouvez utiliser la méthode console.log () pour afficher les valeurs JavaScript.

Activez le débogage dans votre navigateur avec F12et sélectionnez "Console" dans le menu du débogueur.

Console en JavaScript. Essayez de corriger ou de «déboguer» un programme JavaScript qui ne fonctionne pas et entraînez-vous à utiliser la commande console.log (). Il existe des raccourcis qui vous aideront à accéder à la console JavaScript, en fonction du navigateur que vous utilisez:

Raccourcis clavier de la console Chrome

Windows: Ctrl+ Shift+ J
Mac: Cmd+ Option+J

Raccourcis clavier de la console Firefox

Windows: Ctrl+ Shift+ K
Mac: Cmd+ Option+K

Raccourcis clavier de la console Internet Explorer

F12 clé

Raccourcis clavier de la console Safari

Cmd+ Option+C

S. Mayol
la source
4

console.logest spécifiquement une méthode pour les développeurs d'écrire du code pour informer discrètement les développeurs de ce que fait le code. Il peut être utilisé pour vous avertir qu'il y a un problème, mais ne doit pas remplacer un débogueur interactif quand vient le temps de déboguer le code. Sa nature asynchrone signifie que les valeurs enregistrées ne représentent pas nécessairement la valeur lors de l'appel de la méthode.

En bref: enregistrez les erreurs avec console.log(si disponible), puis corrigez les erreurs à l'aide du débogueur de votre choix: Firebug , WebKit Developer Tools (intégré à Safari et Chrome ), IE Developer Tools ou Visual Studio.

outis
la source
4

Je pense vraiment que la programmation Web est facile lorsque je commence le console.logdébogage.

var i;

Si je veux vérifier la valeur du iruntime ..

console.log(i);

vous pouvez vérifier la valeur actuelle de idans l'onglet console de firebug. Il est spécialement utilisé pour le débogage.

aksu
la source
4

Il est utilisé pour se connecter (tout ce que vous passez) à la console Firebug . L'utilisation principale serait de déboguer votre code JavaScript.

Poelinca Dorin
la source
4

Outre les utilisations mentionnées ci-dessus, console.logpeut également imprimer sur le terminal en node.js. Un serveur créé avec express (par exemple) peut utiliser console.logpour écrire dans le fichier journal de sortie.

surajck
la source
2

Dans les scripts java, il n'y a pas de fonctions d'entrée et de sortie. Ainsi, pour déboguer, la méthode code console.log () est utilisée, c'est une méthode de journalisation. Il sera imprimé sous le journal de la console (outils de développement).

Il n'est pas présent dans IE8 et sous jusqu'à ce que vous ouvriez l'outil de développement IE.

NavyaKumar
la source
2

Ce n'est rien pour gérer le jQuery. Fait console.log()référence à la fonction de journalisation de l'objet console, qui fournit des méthodes de journalisation des informations sur la console du navigateur. Ces méthodes sont destinées à des fins de débogage uniquement et ne doivent pas être utilisées pour présenter des informations aux utilisateurs finaux.

Aravinda Meewalaarachchi
la source