JEDES MAL Ich sehe ein Objekt in der Konsole, das ich erweitern möchte, daher wird es mühsam, JEDES MAL auf den Pfeil klicken zu müssen :) Gibt es eine Verknüpfung oder Einstellung, um dies automatisch zu erledigen?
google-chrome-devtools
Jeremy Smith
quelle
quelle
Antworten:
Die erwähnte Lösung
JSON.stringify
ist in den meisten Fällen ziemlich gut, weist jedoch einige Einschränkungen aufconsole.log
solche Objekte elegant gepflegt werden können.Hier ist eine Lösung (verwendet die Bibliothek underscore.js ), die beide oben genannten Probleme löst, indem sie kreativ (ab) Folgendes verwendet
console.group
:Jetzt läuft:
Gibt dir so etwas wie:
Der Wert von MAX_DEPTH kann auf eine gewünschte Ebene angepasst werden. Über diese Verschachtelungsebene hinaus wird das erweiterte Protokoll auf die übliche console.log zurückgesetzt
Versuchen Sie etwas wie:
Beachten Sie, dass die Unterstrichabhängigkeit leicht entfernt werden kann - extrahieren Sie einfach die erforderlichen Funktionen aus der Quelle .
Bitte beachten Sie auch, dass dies
console.group
nicht dem Standard entspricht.quelle
Erwägen Sie die Verwendung von console.table () .
quelle
Um einen Knoten und alle seine untergeordneten Knoten zu erweitern / zu reduzieren,
(Beachten Sie, dass im Windows- Entwicklungsdokument Strg + Alt + Klicken aufgeführt ist, unter Windows jedoch nur Alt + Klicken erforderlich ist).
quelle
Könnte nicht die beste Antwort sein, aber ich habe dies irgendwo in meinem Code getan.
Update :
Verwenden
JSON.stringify
Sie diese Option , um Ihr Objekt automatisch zu erweitern:Sie können jederzeit eine Verknüpfungsfunktion erstellen, wenn es weh tut, all das einzugeben:
Vorherige Antwort:
dann statt:
Sie machen:
Nicht die beste Lösung, funktioniert aber gut für meine Verwendung. Tiefere Objekte funktionieren nicht, daher kann dies verbessert werden.
quelle
pretty(a)
an allen Standorten haben können ;)console.table
handelt sich um eine flache Erweiterung, "Option / Alt + Klick" ist ein manueller Vorgang, und das Schreiben einer benutzerdefinierten Funktion, die underscore.js verwendet, lohnt sich nicht der Overhead)Option + Klicken Sie auf einen Mac. Habe es gerade selbst entdeckt und meine Woche gemacht! Das war so nervig wie alles andere
quelle
Hier ist eine modifizierte Version von Lorefnons Antwort, die nicht von Unterstrichen abhängt:
quelle
Hier ist meine Lösung, eine Funktion, die alle Eigenschaften des Objekts einschließlich der Arrays durchläuft.
In diesem Beispiel iteriere ich über ein einfaches mehrstufiges Objekt:
Sie haben auch die Möglichkeit, die Iteration auszuschließen, wenn die Eigenschaften mit einem bestimmten Suffix beginnen (dh $ für eckige Objekte).
Hier ist die Ausgabe der Funktion:
Sie können diese Funktion auch in jede Webseite einfügen und alle Eigenschaften kopieren und analysieren. Probieren Sie die Google-Seite mit dem Befehl chrome aus:
Sie können die Ausgabe des Befehls auch mit dem Befehl chrome kopieren:
quelle
Wenn Sie ein großes Objekt haben, gibt JSON.stringfy den Fehler Uncaught TypeError aus: Konvertieren einer kreisförmigen Struktur in JSON. Hier ist ein Trick, um eine modifizierte Version davon zu verwenden
Jetzt können Sie verwenden
JSON.stringifyOnce(obj)
quelle
Ich bin wirklich kein Fan davon, wie Chrome und Safari Objekte konsolidieren (überentwickelt). Die Konsole komprimiert das Objekt standardmäßig, sortiert die Objektschlüssel, wenn das Objekt erweitert wird, und zeigt die internen Funktionen aus der Prototypenkette an. Diese Funktionen sollten Opt-In-Einstellungen sein. Entwickler sind wahrscheinlich standardmäßig an den Rohergebnissen interessiert, damit sie überprüfen können, ob ihr Code ordnungsgemäß funktioniert. Diese Funktionen verlangsamen die Entwicklung und führen zu falschen Sortierergebnissen.
So erweitern Sie Objekte in der Konsole
Empfohlen
console.log(JSON.stringify({}, undefined, 2));
Könnte auch als Funktion verwendet werden:
"Option + Klicken" (Chrome auf Mac) und "Alt + Klicken" (Chrome auf Fenster) Es wird
jedoch nicht von allen Browsern (z. B. Safari) unterstützt, und Console druckt weiterhin die Ketten des Prototyptyps. Objektschlüssel werden automatisch sortiert, wenn erweitert usw.
Nicht empfohlen
Ich würde keine der Top-Antworten empfehlen
console.table()
- Dies ist nur eine flache Erweiterung und erweitert keine verschachtelten ObjekteSchreiben Sie eine benutzerdefinierte Funktion underscore.js - zu viel Aufwand für eine einfache Lösung
quelle
Es ist eine Umgehung, aber es funktioniert für mich.
Ich verwende in dem Fall, in dem ein Steuerelement / Widget abhängig von Benutzeraktionen automatisch aktualisiert wird. Wenn Sie beispielsweise die typeahead.js von Twitter verwenden, verschwindet das Dropdown-Menü, sobald Sie sich aus dem Fenster konzentrieren, und die Vorschläge werden aus dem DOM entfernt.
In dev Tools direkt auf dem Sie erweitern möchten Knoten klicken aktivieren Pause auf ... -> subtree Änderungen , dies wird Ihnen dann an den Debugger senden. Halten Sie schlagen F10 oder Shift + F11 , bis Sie dom mutiert. Sobald das mutiert, können Sie überprüfen. Da der Debugger aktiv ist, ist die Benutzeroberfläche von Chrome gesperrt und schließt die Dropdown-Liste nicht. Die Vorschläge befinden sich weiterhin im DOM.
Sehr praktisch bei der Fehlerbehebung beim Layout dynamisch eingefügter Knoten, die ständig eingefügt und entfernt werden.
quelle
Ein anderer einfacher Weg wäre
Ich habe dies für einfache Objekte versucht.
quelle
Sie können hier sehen:
https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/
Einfachster Weg:
Sie müssen tsconfig auch folgenden Code hinzufügen:
Ich beanspruche kein Eigentum daran, sondern verweise nur auf eine hilfreiche Quelle.
quelle
Sie können Ihr Element anzeigen, indem Sie auf document.getElementsBy ... zugreifen und dann mit der rechten Maustaste auf das resultierende Objekt klicken und es kopieren. Beispielsweise:
document.getElementsByTagName('ion-app')
Gibt ein Javascript-Objekt zurück, das in den Texteditor eingefügt werden kann, und zwar vollständig.Besser noch: Klicken Sie mit der rechten Maustaste auf das resultierende Element - 'Als HTML bearbeiten' - 'Alle auswählen' - 'Kopieren' - 'Einfügen'
quelle