wake-up-neo.net

console.log () gibt kein HTML des jQuery-Auswahlobjekts aus

Bei der Verwendung von console.log in Google Chrome ist ein Problem aufgetreten. Als ich plötzlich ein Element wie $(this) ausgab, wurde es wie folgt angezeigt:

[<div>, context: <div>]

oder

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

in der Konsole (Beide kamen aus derselben Zeile: console.log($(this)))

Dieses Problem ist gestern aus dem Nichts entstanden. Es gibt kein Problem mit dem Code. Ich habe genau dasselbe auf einem anderen Computer angemeldet und dort wird es wie folgt angezeigt:

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

Update: die neue Chrome-Version ändert die Ausgabe von console.log()

Weiß jemand, wie ich zu den ursprünglichen Einstellungen der Google Chrome-Konsole zurückkehren kann?

22
hgerdin

Um die Frage zu beantworten:

  • Weiß jemand, wie ich zu den ursprünglichen Einstellungen der Google Chrome Console zurückkehren kann?

Es gibt keine Einstellungen, um die vorherige Ausgabe von console.log () abzurufen. Du kannst entweder:

  • downgrade des Browsers (verwenden Sie eine ältere Version von Chrome oder Chrom-basierte Alternativen )
  • Überschreiben Sie console.log() durch Hinzufügen Ihrer eigenen function log()
  • verwenden Sie in einigen Fällen outerHTML oder führen Sie ein Upgrade auf chrome aus. 25.0.1323.1 (dev-Kanal) wobei console.log ($ (# Selector) [0]); gibt outHMTL erneut aus (siehe unten).

Chrome 23/24: Ausgabe von console.log () geändert manchmal

Gemäß user916276 hat sich die Ausgabe von console.log (jQuery-Object) geändert:

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

Der Benutzer brentonstrine hat mich darauf aufmerksam gemacht, dass meine context.outerHTML nicht immer funktioniert. 

Ich habe meinen Code mit ein neues Beispiel aktualisiert. Es scheint, dass die Existenz von jqObject.context.outerHTML davon abhängt, wie Sie das jQuery-Objekt an die Funktion übergeben. Ich habe es mit Chrome dev channel (25.0.1323.1) und zwei Chrom-basierten Versionen (21, 22) getestet. . 

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

Um Missverständnisse zu vermeiden. In dieser Antwort geht es um das geänderte Verhalten beim Schreiben eines jQuery-Objekts in die Inbuild Console der aktuellen Google Chrome-Browser (Version 24, 25). 

Chrome-Quellcode

Ich habe mir die Chrom-Quellcodeänderungen in der Console.cpp und in der Timeline-Ansicht angesehen, um etwas über die Änderungen in WebInspector herauszufinden. Ich konnte die genaue Änderung nicht finden, die für das geänderte Verhalten von console.log() verantwortlich ist. Ich gehe davon aus, dass es sich um Änderungen an ConsoleView.js , 2 , 3 handelt. Wenn jemand möchte, dass console.log() dieselbe Ausgabe zurückgibt wie in Chrome 21, 22, könnte er einen Fehler einreichen. Dieses zweibugs kann als Vorlage zum Platzieren der Änderungsanforderung verwendet werden.

15
surfmuggle

console.log.apply(console, $(this));

10
brentonstrine

Die Ausgabe ist korrekt, da $ (this) sich auf das jQuery-Auswahlobjekt bezieht, nicht auf die zugrunde liegenden DOM-Objekte.

Wenn Sie die rohen DOM-Elemente ausgeben möchten, können Sie Folgendes versuchen:

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

Oder Sie können auch:

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

Hier ist eine noch bessere Lösung als console.log.apply(console, obj);, die ich gerade entdeckt habe. Check out console.dirxml(obj);, was fast die gleiche Ausgabe ergibt, wenn obj eine Ergebnismenge eines jQuery-Selektors ist. Nur letzteres funktioniert jedoch, wenn obj ein bestimmtes Element aus der Ergebnismenge eines jQuery-Selektors ist.

Hier ist eine Demo, die Sie auf dieser Seite machen können ...

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]);

Sie sehen, dass # 4 Protokolle "undefined" protokolliert.

Performed at the console on this very page.

Von nun an werde ich console.dirxml verwenden, weil es einfach, effektiv und eingebaut ist. console als erstes Argument an apply übergeben zu haben, hat mir sowieso nie recht gegeben.

3
Bruno Bronosky

Standardmäßig gibt chrome jetzt ein Objekt mit allen Details zu diesem Element zurück, wenn Sie eine console.log ($ (element)) ausführen. 

ein Beispiel dafür, was es tatsächlich zurückgibt 

  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]

wenn Sie also console.log ($ ('input: first') [0]) verwenden, erhalten Sie das gewünschte Ergebnis. 

hoffe das hilft 

2
achand8238

Meine Antwort an @ brentonstrines Antwort wurde abgelehnt, daher werde ich eine neue Antwort dafür erstellen. Aber siehe meine andere Antwort auf dieser Seite für eine noch bessere Lösung.

Diese Demo zeigt Ihnen, warum es uns wichtig ist, diesen neuen Weg gegenüber dem normalen Weg zu protokollieren ...

// 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>

Update:Einfachere Lösung .


Gründe für die Konsolenausgabeänderung:

Was war der Grund für die Bitte, .__ nicht aufzunehmen. Attribute/TextInhalt?

Antwort von pfeldman, Entwickler von DevTools:

leute, die DOM-Listen ablegen, schätzen das dichte Aussehen.

crbug.com/50316

1
NVI

Das ist meine Vermutung, dass ich console.log in meine eigene Funktion einwickeln kann. Es hat einige Nachteile. Es sagt Ihnen nicht, welche Zeilennummer das Problem aufgetreten ist, aber ich mache aus, indem Sie signifikante Protokollnachrichten ausgeben ... wenn jemand möchte verbessern es sich frei fühlen!

Hinweis: underscore.js ist eine Abhängigkeit, ich bin mir sicher, dass Sie es in pure JS machen können, aber ich bin immer auf underscore.js angewiesen :)

// 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);
        }
    };

Die Nachricht nach Hause ist hier:

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

Dann machen Sie einfach: log($(".some.class")); und erhalten die Elemente als old school DOM-Objekte in der Konsole.

0
Victor S