web-dev-qa-db-fra.com

Pourquoi Google Chrome a-t-il une sortie différente de console.log () via jQuery?

Lorsque je console, connectez-vous à un objet jQuery, par exemple.

var s = $("#item");
console.log(s);

Je reçois quelque chose comme ça

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]

Je me souviens avant (il y a environ un mois), j'obtiendrais quelque chose comme:

 [<div id="item">pas</div>]

Ce changement concerne-t-il Chrome? Ou il y avait un changement de jQuery? Ou j'ai effectivement fait quelque chose pour que la sortie ait un aspect différent

Je trouve cette deuxième sortie beaucoup plus facile à lire et je peux la survoler et la faire marquer à la page. Maintenant, je reçois trop d'informations, c'est assez difficile à lire

jquerygoogle-chromeconsole.log
14
Zokora

Oui, il peut y avoir un changement avec jquery, vérifiez comment ils traitent maintenant les objets dom dans la version 1.9.1

http://jsfiddle.net/5HJ3L/1/

si vous essayez le console.log de cette manière

var s = $("#item");
console.log(s);

la sortie sera comme

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]
0: div#item
context: document
length: 1
selector: "#item"
__proto__: Object[0]

si vous le cochez de près, vous trouverez la sortie requise dans le tableau ci-dessus à la clé 0. La sortie de la ligne suivante sera donc

console.log(s[0]);

Sortie:

<div id="item">pas</div>

aussi si vous essayez sans jquery la sortie sera celle qui vous est demandée

var e = document.getElementById('item');
console.log(e);

Sortie:

<div id="item">pas</div>

PS: ceci n’est pas une suggestion contre jquery mais pour montrer comment ils seront traités par google-chrome

Correction: Notez également que la mention de sortie dans la question est sous la forme array alors que les façons que j'ai suggérées sont sous la forme string

1
zzlalani

Ce que je pense que vous remarquez, c’est la différence entre évaluer un objet jQuery dans la console et l’afficher avec console.log(). En utilisant fiddle de David Thomas, définissez un point d'arrêt sur l'instruction console.log. Quand il s'arrête au point d'arrêt, tapez $s dans la console et vous verrez

[<div id="item">pas</div>]

Continuez ensuite, et vous verrez l'objet verbeux imprimé par console.log().

Je ne suis pas vraiment sûr de ce que jQuery ou Chrome fait qui cause cette différence. La sortie lorsque vous tapez $s semble être le résultat de $s.toArray(), alors que console.log() affiche le véritable objet jQuery.

Une preuve supplémentaire que ce n'est pas un nouveau comportement - je viens de relier une question dupliquée de novembre.

1
Barmar

essayer...

var s = $("<div>").append($("#item").clone()).html();

console.log(s);

$(s).remove();

Ce n'est pas dans sa forme la plus jolie mais le résultat correspond à ce que vous recherchez et je suis sûr que vous pouvez en créer une bonne fonction ...

Fondamentalement, je crée un div, y insère une copie de #item et envoie le innerHTML de la div à la console afin d'afficher l'élément #item complet. (Pas seulement innerHTML de # item) Ensuite, je détruis s pour le nettoyer.

1
JxAxMxIxN

Vous pouvez contrôler le style de sortie d'un journal de console avec le style c console.log: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

Par exemple, pour mettre avec un simple style d’élément dom:

console.log("%o", document.body)
1
Daiwei

J'ai eu le résultat attendu pour la console envoyant l'élément DOM et non le jquery.

console.log($("div")[0])
0
Paulo Lima
var s = $("#item").html();
console.log(s)
0
Amol Navsupe