Ist es möglich, jQuery-hinzugefügte Daten in Chrome anzuzeigen

Lesezeit: 3 Minuten

Beim Erstellen von Websites verwende ich oft jQuery .data() Funktion zum Hinzufügen von Daten zu Elementen.

Ist es möglich, alle Daten, die mit einem Element gespeichert sind, in Chrome anzuzeigen?

Wenn ich also ein Element inspiziere, zeigt es die Daten in Chrome selbst an.

Wenn nicht, wäre es möglich, ein Plugin zu schreiben, um Chrome zu erweitern element inspector Daten auch zeigen?

Öffnen Sie den Inspektor und geben Sie in die Konsole ein

$('<some selector>').data()

und drücken Sie dann die Eingabetaste, um die auszuwerten data() -Methode und zeigen ihren Rückgabewert direkt an.

Es besteht keine Notwendigkeit zu verwenden console.log es sei denn, Sie rufen es in nicht interaktivem Code auf.

  • Das hilft mir nicht. Ich iteriere über eine Reihe von Divs, die dieselbe Klasse haben, und speichere in jedem einzelne Daten. Jetzt möchte ich diese Daten sehen, aber ich kann diese Divs mit Ihrem Ansatz nicht einfach einzeln auswählen.

    – Agoldew

    23. Dezember 2015 um 13:54 Uhr

  • @ Toni Versuch $('<some selector>').map(function (el) { return el.data(); })

    – Namuol

    7. Januar 2016 um 16:42 Uhr

  • Tipp: Wenn Sie ein Element im Fenster Elemente auswählen, wird es zu $0 in der Konsole. Dann kannst du eintreten $($0).data() Noch ein Tipp: Mit der Esc-Taste sehen Sie sowohl Elements als auch Console in einem Splitscreen.

    – Bob Stein

    3. Juni 2017 um 11:40 Uhr


  • BobStein-VisiBone: Magie! Konnte diese Informationen nirgendwo finden, und es sollte die akzeptierte Antwort sein.

    – ChrisAdmin

    24. Juni 2017 um 11:10 Uhr

  • Stimme Wade Hatler zu. Das ist der zweite tolle Tipp für mich heute. Die andere ist die Funktion “Als globale Variable festlegen” von Chrome.

    – Todd Hammer

    7. Februar 2019 um 4:19 Uhr


Chrome-Abfrage

Zu finden in der Webstore für Chrome-Erweiterungen und fügt dem Eigenschaftsfenster in den Entwicklertools eine weitere Registerkarte hinzu.

  • Perfekt, vielen Dank! Ihre Antwort sollte die neue akzeptierte Antwort sein.

    – GG.

    29. November 2013 um 12:46 Uhr


  • Verlängerung tut was sie soll. Wirklich bequem. Die Dev-Leiste sollte nach der Installation geschlossen und wieder geöffnet werden.

    – Deutsch

    6. Februar 2014 um 12:03 Uhr

  • Dies scheint in der neuesten Version von Chrome nicht mehr zu funktionieren

    – JLo

    2. März 2016 um 13:16 Uhr

  • Die Erweiterung funktioniert, aber Datenfelder werden nicht live aktualisiert, wenn sie sich ändern.

    – Ben Wheeler

    7. August 2016 um 15:13 Uhr

Geben Sie in die Chrome-Konsole ein:

console.log($('selector').data());

und es wird die auflisten data in diesem Element

  • Wenn Sie dies innerhalb der Konsultation ausführen, können Sie die auslassen console.log(…) und einfach laufen $('selector').data(). Das Ergebnis wird trotzdem in der Konsole ausgegeben.

    – Quinn Comendant

    18. November 2015 um 18:30 Uhr

Chrome-Abfrage

Benutzer-Avatar
jdavid.net

Aus diesem Grund verwende ich die nicht $(selector).data() Muster, und stattdessen verwende ich ein natürlicheres HTML $(selector).attr('data-name','value') die die Werte zum eigentlichen HTML hinzufügt.

$(selector).attr('data-name','value') funktioniert nicht in IE8+ Browsern. .data() Ist bevorzugt. Auch eine benutzerdefinierte Variable wie sagen: data-name ist kein Attribut in HTML.

  • Einverstanden, dies ist ein viel besser erkennbares Muster als ‘data()’

    – Scott Weber

    5. Juni 2013 um 16:53 Uhr

  • Ich stimme den primitiven Datentypen zu, aber was ist mit komplexen Typen?

    – Der_Schwarze_Schlumpf

    3. Mai 2014 um 18:44 Uhr

  • Ich könnte argumentieren, dass Sie abhängig von Ihren Mustern ein Ansichtsmodell oder ein Datenmodell haben sollten. im Knockout sehen Sie den Knotenkontext. In anderen Mustern speichern Sie dort möglicherweise nur eine ID und suchen sie dann per Delegation basierend auf der ID. Es gibt sogar Plugins für Chrome, die den Knotenkontext für Knockout im Debugger/Inspektor anzeigen.

    – jdavid.net

    4. Mai 2014 um 20:00 Uhr

  • Einverstanden, dies ist ein viel besser erkennbares Muster als ‘data()’

    – Scott Weber

    5. Juni 2013 um 16:53 Uhr

  • Ich stimme den primitiven Datentypen zu, aber was ist mit komplexen Typen?

    – Der_Schwarze_Schlumpf

    3. Mai 2014 um 18:44 Uhr

  • Ich könnte argumentieren, dass Sie abhängig von Ihren Mustern ein Ansichtsmodell oder ein Datenmodell haben sollten. im Knockout sehen Sie den Knotenkontext. In anderen Mustern speichern Sie dort möglicherweise nur eine ID und suchen sie dann per Delegation basierend auf der ID. Es gibt sogar Plugins für Chrome, die den Knotenkontext für Knockout im Debugger/Inspektor anzeigen.

    – jdavid.net

    4. Mai 2014 um 20:00 Uhr

1226750cookie-checkIst es möglich, jQuery-hinzugefügte Daten in Chrome anzuzeigen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy