web-dev-qa-db-fra.com

Qu'est-ce que console.log?

Quelle est l'utilisation de console.log?

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

403
Mihir

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

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

#someButton was clicked apparaît alors dans l’onglet “Console” de Firebug (ou dans la console d’un autre outil, par exemple Web Inspector de Chrome) lorsque vous cliquez sur le bouton.

Pour certaines raisons, l'objet console pourrait être indisponible. Ensuite, vous pouvez vérifier si c'est le cas. C'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
}
446
Jan Hančič

Places vous pouvez voir la console! Juste pour les avoir tous dans une réponse.

Firefox

http://getfirebug.com/

(vous pouvez aussi maintenant utiliser les outils de développement intégrés à Firefox Ctrl + Maj + J (Outils> Développeur Web> Console d'erreur), mais Firebug est bien meilleur; utilisez Firebug)

Safari et Chrome

Fondamentalement les mêmes.

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

Opera

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

iOS

Fonctionne pour tous les iPhones, iPod touch et iPad.

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

Désormais, avec iOS 6, vous pouvez visualiser la console via Safari sous OS X si vous connectez votre appareil. Ou vous pouvez le faire avec l'émulateur, ouvrez simplement une fenêtre de navigateur Safari et allez à l'onglet "Développement". 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 capacité de bookmarklet. Nous utilisons donc http://jsconsole.com/ type: listen et cela vous donnera une balise de script à placer dans votre code HTML. À partir de ce moment, vous pourrez voir votre console sur le site Web de jsconsole.

iOS et Android

Vous pouvez également utiliser http://html.Adobe.com/Edge/inspect/ pour accéder aux outils de l'inspecteur Web et à la console de tout périphérique à l'aide de leur plug-in de navigateur très pratique.


Anciens problèmes de navigateur

Enfin, les anciennes versions de IE vont planter si vous utilisez console.log dans votre code et que les outils de développement ne sont pas ouverts simultanément. 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, il le définit sur un objet avec une fonction vierge appelée log. De cette façon, window.console et window.console.log ne sont jamais vraiment undefined.

224
Fresheyeball

Vous pouvez afficher tous les messages enregistrés sur 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. Ceci est particulièrement utile lorsque vous voulez voir si une fonction est en cours d’exécution ou si une variable est passée/assignée correctement. En fait, c'est plutôt utile pour comprendre ce qui n'allait pas avec votre code.

99
Fibericon

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

De plus, lorsque vous sortez un objet jQuery, il inclut une référence à cet élément dans le DOM. Un clic sur cet élément permet d'accéder à cet élément dans l'onglet Eléments/HTML.

Vous pouvez utiliser différentes méthodes, mais sachez que pour que cela fonctionne dans Firefox, vous devez avoir Firebug ouvert, sinon toute la page se plantera. Que ce que vous enregistrez soit une variable, un tableau, un objet ou un élément DOM, vous obtiendrez une ventilation complète, y compris le prototype de l’objet (il est toujours intéressant d’avoir un poke). 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 commencer à profiler une fonction, un script, etc. Et terminez-le ensuite par console.profileEnd(profileName);. Il apparaîtra dans l'onglet Profils dans Chrome (ne sait pas avec FF).

Pour une référence complète, allez à 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!

80
Fred

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

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

Donc, vous ne cassez pas votre code quand il n'est pas disponible.

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

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

console.log n'a rien à voir avec jQuery. Il s'agit d'un objet/d'une méthode commun fourni par les débogueurs (notamment 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.

22
Quentin

console.log enregistre les informations de débogage sur la console de certains navigateurs (Firefox avec Firebug installé, Chrome, IE8, tout ce dont Firebug Lite est installé). Sur Firefox, c’est un outil très puissant qui vous permet d’inspecter des objets ou d’examiner la disposition ou d’autres propriétés des éléments HTML. Ce n'est pas lié à jQuery, mais il y a deux choses qui sont couramment faites quand on l'utilise avec jQuery:

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

  • créez 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();

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

18
Tgr

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

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

15
SLaks

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

Exemple à essayer en console:

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

par contre, si vous essayez de concaténer le message texte informatif avec le contenu de l'objet, vous obtenez:

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

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

15
Thalis K.

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

Beaucoup de gens utilisent alert(hasNinjas) à cette fin mais console.log(hasNinjas) est plus facile à utiliser. L'utilisation d'une alerte ouvre 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.console est défini en premier afin que votre code ne rompt pas. s'il n'y a pas de console disponible.

12
Mark Byers

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

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

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 similaire à print_r($var); pour PHP .

10
jondavidjohn

Attention: laisser des appels à la console dans votre code de production fera que votre site s'introduira dans Internet Explorer. Ne le gardez jamais non emballé. Voir: https://web.archive.org/web/20150908041020/blog.patspam.com/2009/the-curse-of-consolelog

9
Harlo Holmes

Au début, le débogage de JS était effectué via la fonction alert() - il s’agit maintenant d’une pratique obsolète.

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

L'objet console est une extension du DOM.

La console.log() doit être utilisée 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 du serveur de production.

7
jjpcondor

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

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

Console en JavaScript. Essayez de réparer 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

Les fenêtres: Ctrl + Shift + J
Mac: Cmd + Option + J

Raccourcis clavier de la console Firefox

Les fenêtres: 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

4
S. Mayol

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

3
surajck

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

3
Poelinca Dorin

Je sens vraiment que la programmation Web est facile lorsque je lance console.log pour le débogage.

var i;

Si je veux vérifier la valeur de i runtime ..

console.log(i);

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

3
user1251300

console.log est en particulier une méthode permettant aux développeurs d'écrire du code pour informer de manière discrète les développeurs de ce que fait le code. Il peut être utilisé pour vous alerter qu'il y a un problème, mais ne devrait pas remplacer un débogueur interactif lorsque 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 en utilisant le débogueur de votre choix: Firebug , Outils de développement WebKit (intégré à Safari = et Chrome ), IE Outils de développement ou Visual Studio.

3
outis

Dans les scripts Java, il n'y a aucune fonction d'entrée ni de sortie. Donc, pour déboguer le code, la méthode 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).

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

1
NavyaKumar