Wie verwende ich die neue Ausgabe von "console.log ()" in Chrome?

8

Chrome 24 bietet eine neue Möglichkeit zur Ausgabe von Objekten in console.log() .

Beispiel: console.log($("p")); auf dieses jsFiddle-Beispiel gibt diesen Wahnsinn aus:

%Vor%

Ich kann sehen, dass es die Sammlung von DOM-Elementen am Anfang platziert. Aber wenn du versuchst, sogar ein einfaches <p> -Tag zu erweitern, das meistens leer ist, wirft es dich überall hin:

%Vor%

Wie verwende ich all diese Informationen? Mein erster Instinkt ist es, es zu zähmen Früher sah es so aus, aber auf den zweiten Blick gibt es wirklich eine Menge Infos, auf die ich zugreifen könnte. Aber mir fällt es schwer zu verstehen, was ich sehe. Vieles davon sieht wie jQuery-Werte aus. Ist dies eine Liste aller jQuery-Werte, die das Objekt besitzt (oder nicht hat)?

Dann ist da noch die ganze Sache mit dem ► context: Ding und dem ► __proto__: Ding. Sobald Sie anfangen, in __proto__ zu bohren, werden Sie nie aufhören. Ich denke, es geht unendlich runter!

Wie kann ich anfangen zu lernen, wie man diese neue Ausgabe verwendet?

BEARBEITEN : Ich habe gerade festgestellt, dass ich immer noch Chrome 23 benutze, dies wurde nicht in 24 eingeführt. Jemand in Dieser Thread sagte, dass es sich um ein Problem mit Chrome 24 gehandelt habe, aber vielleicht ist es in 23 neu? Jedenfalls habe ich erst kürzlich festgestellt, dass dies auf jQuery-Objekten zu beobachten ist.

BEARBEITEN 2 : Wenn Sie nur nach dem alten Protokoll suchen, versuchen Sie Folgendes: ( Hut Tipp )

%Vor%     
brentonstrine 16.11.2012, 00:46
quelle

3 Antworten

2

In Ihrer Demo-Geige protokollieren Sie NodeLists oder HTMLCollections. Jedes der Elemente innerhalb einer NodeList wird als numerischer Index 0, 1, 2 usw. dargestellt. 0 ist das erste Element in der NodeList, wenn darin Elemente vorhanden sind.

Wenn Sie die Elemente erweitern, sehen Sie alle verfügbaren Eigenschaften eines HTML-Elements, wie in der DOM-Core-3-Spezifikation definiert. Weitere Informationen zu diesem Ссылка finden Sie hier. Eine Liste aller Eigenschaften und ihrer Zwecke finden Sie hier: Ссылка . Nichts davon ist neu in Chrome.

Was in der neuesten Chrome-Version neu ist, ist das protokollierte Objekt auf oberster Ebene. Wenn Sie die Konsole gerade geöffnet haben und Folgendes eingegeben haben:

%Vor%

Was für mich, als ich es gerade gemacht habe, hat eine Vorschau dessen aufgezeichnet, was das erweiterte Fensterobjekt beim Logging darstellt. So sollten Sie beispielsweise Folgendes sehen:

%Vor%

Weitere NodeList-Eigenschaften, die unter den Elementen der Liste aufgeführt sind:

  • Kontext - der Kontext der Auswahl - Ссылка
  • length - die Anzahl der Elemente in der HTMLCollection
  • selector - der Selektor, mit dem das Element oder NodeList
  • ausgewählt wird
  • __proto__ - Die Eigenschaft __proto__ eines Objekts verweist auf dasselbe Objekt wie das interne [[Prototyp]] (oft als "der Prototyp" bezeichnet), bei dem es sich um ein Objekt oder um null handeln kann (im Fall von Object.prototype.__proto__ ). Weitere Informationen hierzu finden Sie unter: Ссылка

Ich habe die Geige leicht modifiziert und sollte die Vorschau der Objekte anzeigen, wenn Sie die Konsole Ссылка

Sie können diese Dinge auch nicht wirklich loswerden, sie sind ein Teil des DOM und werden immer existieren, sonst ist der NodeType von dem, was Sie sehen, etwas anderes als ein ElementNode.

>     
jaredwilli 23.11.2012 18:50
quelle
0

Ich bin genauso genervt wie du mit dieser Veränderung. Ich weiß, das ist nicht ideal, aber es wird dir hoffentlich ein wenig helfen.

%Vor%

Möglicherweise haben Sie diese Lösung schon einmal gesehen und dann festgestellt, dass sie nicht funktionierte, wenn Sie sich zum Beispiel in einer Schleife befanden:

%Vor%

Das bringt Ihnen nicht das Ergebnis, das Sie gewohnt waren, also musste ich ['context'] anstelle von [0] wie folgt verwenden:

%Vor%

Auch ich suche selbst nach einer besseren Lösung, aber ich dachte, ich würde mit dir teilen, was ich gefunden habe.

    
jarodtaylor 21.11.2012 05:31
quelle
0

Sie wollen das erste Element, also verwenden Sie [0]

Als eine weitere Option, check out Firebug in Firefox. Ich weiß, ich liebe auch Chrom und benutze es jeden Tag, aber Firebug ist ein großartiges Plugin und ich hatte nie ein Problem damit.

    
jsteinmann 26.11.2012 04:42
quelle