Réponses:
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 clicked
dans 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
}
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 window
est garanti d'exister) et ne vérifier qu'un seul niveau de profondeur à la fois.
Des endroits où vous pouvez voir la console! Juste pour les avoir tous dans une seule réponse.
Firefox
(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.
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.
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.
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!
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 +
?
+
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.
console.log("x:", x)
est nettement meilleur, car quand x
est un objet ou un tableau (ou autre chose qu'une chaîne), il s'affiche correctement, sans conversion en chaîne.
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.log
comme d'habitude
if (!window.console) { window.console = { log: function(){} }; }
if(!window.console){ window.console = function(){}; }
à la place, puis d'utiliser console.log comme d'habitude.
console.log
enregistre 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.
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.
Utilisez console.log
pour 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.console
est défini en premier afin que votre code ne casse pas s'il n'y a pas de console disponible.
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.")
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 .
if (!window.console) { window.console = { log : function() {} }; }
. Cela vous permet de vous en sortir en oubliant de supprimer l'instruction de débogage occasionnelle.
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
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.
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
console.log
est 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.
Je pense vraiment que la programmation Web est facile lorsque je commence le console.log
débogage.
var i;
Si je veux vérifier la valeur du i
runtime ..
console.log(i);
vous pouvez vérifier la valeur actuelle de i
dans l'onglet console de firebug. Il est spécialement utilisé pour le débogage.
Il est utilisé pour se connecter (tout ce que vous passez) à la console Firebug . L'utilisation principale serait de déboguer votre code JavaScript.
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.
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.