web-dev-qa-db-fra.com

console.log () ne génère pas le code HTML d'un objet de sélection jQuery

J'ai un problème lors de l'utilisation de console.log dans Google Chrome. Soudain, lorsque je produisais un élément comme $(this), il s’affichait comme

[<div>, context: <div>]

ou

[jQuery.fn.jQuery.init[1]]

dans la console. (Les deux venaient de la même rangée: console.log($(this)))

Ce problème est né hier de nulle part. Il n'y a pas de problème avec le code. J'ai enregistré exactement la même chose sur un autre ordinateur et il est affiché comme ceci:

[<div class='element'></div>, ...]

Mise à jour: la nouvelle version de Chrome modifie le résultat de console.log()

Est-ce que quelqu'un sait comment je peux revenir aux paramètres d'origine de la console Google Chrome?

javascriptgoogle-chromeconsole
22
hgerdin

Pour répondre à la question:

  • Est-ce que quelqu'un sait comment je peux revenir aux paramètres d'origine de la console Google Chrome?

Il n'y a pas de paramètres pour obtenir l'ancienne sortie de console.log (). Tu peux soit:

  • rétrograder le navigateur (utilisez une version antérieure de chrome ou alternatives basées sur le chrome )
  • écraser console.log() en ajoutant votre propre function log() 
  • dans certains cas, utilisez outerHTML ou effectuez une mise à niveau vers chrome 25.0.1323.1 (canal dev), où console.log ($ (# Selector) [0]); renvoie outHMTL à nouveau (voir ci-dessous).

Chrome 23/24: La sortie de console.log () a été modifiée parfois

Selon user916276, la sortie de console.log (jQuery-Object) a été modifiée:

// output of console.log($jQuerObject) 
[<div class='element'></div>, ...] // in chrome <= 23
[<div>, context: <div>]            // in chrome 24

L'utilisateur brentonstrine m'a fait prendre conscience du fait que mon contexte.outerHTML ne fonctionne pas toujours. 

J'ai mis à jour mon code avec un nouvel exemple . Il semble que l’existence de jqObject.context.outerHTML dépend de la manière dont vous passez l'objet jQuery à la fonction . Je l'ai testé avec chrome dev channel (25.0.1323.1) et deux versions à base de chrome (21, 22). 

console.log($(this)); // old chrome versions 
// new chrome version >23
// if you pass this to the function see my getThis(_this) function
console.log($(this).context.outerHTML); 
// if you use a jQuery selector
console.log($(this)[0]);   // at least in chrome build 25.0.1323.1

Pour éviter les malentendus. Cette réponse concerne le comportement modifié lors de l'écriture d'un objet jQuery sur le inbuild console des navigateurs Google Chrome récents (version 24, 25). 

Code source de Chrome

J'ai consulté les modifications du code source de chrome sur le fichier Console.cpp et dans la vue de la timeline pour connaître les modifications apportées au WebInspector . Je n'ai pas pu trouver le changement exact responsable du changement de comportement de console.log(). Je suppose qu’il s’agit de modifications apportées à ConsoleView.js , 2 , 3 . Si quelqu'un souhaite lancer cette fonction, console.log() renvoie le même résultat que dans Chrome 21, 22 il pourrait créer un bogue. Ce deuxbugs pourrait être utilisé comme modèle pour placer la demande de modification.

15
surfmuggle

La sortie est correcte car $ (this) fait référence à un objet de sélection jQuery, pas aux objets DOM sous-jacents.

Si vous souhaitez générer le ou les éléments DOM bruts, essayez les solutions suivantes:

 console.log( $( this ).get(0) ) 
 // Or just 
 console.log( this )

Ou vous pouvez aussi faire:

 console.log( $( this ).html() )
6
Mikko Ohtamaa

Voici une solution encore meilleure que console.log.apply(console, obj); que je viens de découvrir. Consultez console.dirxml(obj); qui donne presque le même résultat lorsque obj est un ensemble de résultats de sélecteur jQuery. Cependant, seul ce dernier fonctionne lorsque obj est un élément spécifique d'un jeu de résultats de sélecteur jQuery.

Voici une démo que vous pouvez faire sur cette page ...

var i=0
console.log(++i);
console.dirxml($$('.answer'));
console.log(++i);
console.dirxml($$('.answer')[0]);
console.log(++i);
console.log.apply(console, $$('.answer'));
console.log(++i);
console.log.apply(console, $$('.answer')[0]);

Vous verrez que le n ° 4 enregistre "non défini".

Performed at the console on this very page.

Donc, à partir de maintenant, je vais utiliser console.dirxml car c’est simple, efficace et intégré. Devoir passer console comme premier argument de apply ne m’a de toute façon jamais bien passé.

3
Bruno Bronosky

Par défaut, chrome renvoie désormais un objet avec tous les détails relatifs à cet élément lorsque vous faites un fichier console.log ($ (élément)). 

un exemple de ce qu'il retourne réellement 

  console.log($('input:first'));
  [<input>, prevObject: c.fn.c.init[1], context: #document, selector: "input:first"] 
  0: <input>
  context: #document
  length: 1
  prevObject: c.fn.c.init[1]
  selector: "input:first"
  __proto__: Object[0]

donc, si vous faites console.log ($ ('input: first') [0]), vous obtiendrez le résultat souhaité. 

j'espère que cela t'aides 

2
achand8238

Ma réponse à la modification de @ brentonstrine a été rejetée, je vais donc vous en proposer une nouvelle. Mais voir mon autre réponse sur cette page pour une solution encore meilleure.

Cette démo vous montre pourquoi nous nous soucions de la journalisation de cette nouvelle façon par rapport à la manière habituelle ...

// paste this whole block into the console of THIS PAGE and see a working demo!

var domlog = function(obj){ console.log.apply(console, obj); };

domlog($('#answer-13594327'));

// compare ^that^ to the normal element logging...

var normallog = function(obj){ console.log(obj); };

normallog($('#answer-13594327'));

Demo of the 2 different loggin metods

1
Bruno Bronosky
console.log.apply(console, [].slice.call($('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>

Mise à jour:Solution plus simple .

Justification du changement de sortie de la console:

Quelle était la raison derrière la demande de ne pas inclure attributs/textContent?

Réponse de pfeldman, développeur de DevTools:

les personnes qui vident les listes DOM apprécient le look dense.

crbug.com/50316

1
NVI

Ceci est ma solution, pour envelopper console.log dans ma propre fonction, il a quelques inconvénients, comme il ne vous dit pas le numéro de la ligne dans laquelle le problème est survenu, mais je me rattrape en envoyant des messages de journalisation significatifs ... si quelqu'un veut Améliorez-vous, n'hésitez pas!

Note: underscore.js est une dépendance, je suis sûr que vous pouvez le faire en JS pur, mais je dépend toujours de underscore.js :)

// wrap the console.log function
var log = function(data) {
    // switch setting
    var allowed = true;
    if (allowed) {
        console.log("LOG");
        console.log(typeof data);
        if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }
    };

Le message à emporter ici est:

if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }

Ensuite, il vous suffit de: log($(".some.class")); et d’obtenir les éléments en tant qu’objets DOM old school dans la console.

0
Victor S