Javascript / Chrome - Kopieren eines Objekts aus dem Webkit-Inspektor als Code


493

Ich mache eine console.log-Anweisung in meinem Javascript, um ein Javascript-Objekt zu protokollieren. Ich frage mich, ob es einen Weg gibt, dieses Objekt als Javascript-Code zu kopieren. Ich versuche, ein Objekt, das mit Ajax erstellt wurde, um einen XML-Feed zu analysieren, in ein statisches Javascript-Objekt zu konvertieren, damit eine Datei lokal ohne Server ausgeführt werden kann. Ich habe einen Screenshot des Objekts in das Chrome-Inspektorfenster aufgenommen, damit Sie sehen können, was ich versuche.Geben Sie hier die Bildbeschreibung ein


1
Versuchen Sie es mit Firefox und der Option .toSource (). Es ist einfacher
chepe263

Antworten:


1247
  1. Klicken Sie mit der rechten Maustaste auf ein Objekt in der Chrome-Konsole und wählen Sie es Store as Global Variableaus dem Kontextmenü aus. Es wird so etwas wie temp1der Variablenname zurückgegeben.

  2. Chrome hat auch eine copy()Methode, daher copy(temp1)sollte dieses Objekt in der Konsole in Ihre Zwischenablage kopiert werden.

Copy Javascript Object in Chrome DevTools

Hinweis zu rekursiven Objekten: Wenn Sie versuchen, ein rekursives Objekt zu kopieren, erhalten Sie [object Object]. Der Ausweg besteht darin copy(JSON.stringify(temp1)), dass das Objekt als gültiger JSON vollständig in Ihre Zwischenablage kopiert wird, sodass Sie es mit einer von vielen Ressourcen nach Ihren Wünschen formatieren können.


3
Rückgabe undefiniert in Chrome Version 49.0.2623.87 (64-Bit)? warum>?
Pardeep Jain

10
@PardeepJain - das wird von der copy () -Methode erwartet, da nichts zurückgegeben werden kann. Die Daten sollten sich in Ihrer Zwischenablage befinden.
Carl

35
Das gibt nur [object Object]für mich.
Ullallulloo

1
@Ullallulloo versuchen, sich mit JSON.stringify wie folgt
abzumelden

3
Es funktioniert nur, wenn Sie ein flaches JS-Objekt haben. Wenn Sie ein rekursives tiefes Objekt haben, erhalten Sie [
Objektobjekt

62

Versuchen Sie es JSON.stringify(). Kopieren Sie die resultierende Zeichenfolge. Funktioniert nicht mit Objekten, die Zirkelverweise enthalten.


7
Ich sehe nicht, wie das funktionieren würde, wenn Sie nicht den Code ändern, der es protokolliert.
iConnor

16
Ich bekommeTypeError: Converting circular structure to JSON
Tony Brasunas

40

Sie können ein Objekt mit copy (JSON.stringify (Object_Name)) in Ihre Zwischenablage kopieren. in der Konsole.

Beispiel: - Kopieren Sie den folgenden Code, fügen Sie ihn in Ihre Konsole ein und drücken Sie die EINGABETASTE. Versuchen Sie nun, es an einer anderen Stelle einzufügen (STRG + V für Windows oder CMD + V für Mac), und Sie erhalten {"name": "Daniel", "age": 25}

var profile = {
    name: "Daniel",
    age: 25
};

copy(JSON.stringify(profile));

14
Funktioniert nicht mit DOM-Knoten, Fenstern oder anderen Objekten, die kreisförmig sind
Carles Alcolea

Mit Abstand die einfachste Lösung für ein großes, aber einfaches Objekt.
Hersheezy

einfachste Lösung
Anandhukrishna VR

26

Sie können dies jetzt in Chrome erreichen, indem Sie mit der rechten Maustaste auf das Objekt klicken und "Als globale Variable speichern" auswählen: http://www.youtube.com/watch?v=qALFiTlVWdg

Geben Sie hier die Bildbeschreibung ein


2
Ab Version 39.0.2171.95 ist die Option "Als globale Variable speichern" nicht verfügbar, wenn Android-Geräte mit Chrome überprüft werden.
Walter Roman

1
@ David Calhoun, ich habe für deine Antwort gestimmt. Es sieht so aus, als ob Ihre Antwort am 12. Juni 2014 veröffentlicht wurde und die am 5. August 2014 akzeptierte, wobei weitgehend genau das übernommen wurde, was Sie hatten. Ich muss zugeben, dass er temp1 erwähnt, wo Ihre Antwort es nur in Ihrem Video zeigt. Vielleicht wurde deshalb die andere Antwort akzeptiert. Die besten Wünsche.
PatS

13

Befolgen Sie die folgenden Schritte:

  1. Geben Sie das Objekt mit console.log wie folgt aus Ihrem Code aus: console.log (myObject)
  2. Klicken Sie mit der rechten Maustaste auf das Objekt und klicken Sie auf "Als globales Objekt speichern". Chrome würde an dieser Stelle den Namen der Variablen drucken. Nehmen wir an, es heißt "temp1".
  3. Geben Sie in die Konsole Folgendes ein : JSON.stringify(temp1).
  4. An dieser Stelle sehen Sie das gesamte JSON-Objekt als Zeichenfolge, die Sie kopieren / einfügen können.
  5. Sie können Online-Tools wie http://www.jsoneditoronline.org/ verwenden , um Ihre Zeichenfolge an dieser Stelle zu verschönern.

Ein Schritt mit JSON.stringify (temp1) kann sich auf eine lange Ausführung auswirken, wenn das Objekt groß ist.
Heroin

@ JoeTidee Ich hatte das gleiche Problem, aber ich habe eine debuggerAnweisung eingerichtet und dann meine Variable direkt von der Konsole am Haltepunkt abgerufen.
Tony Brasunas


0

Die Verwendung von "Als globale Variable speichern" funktioniert, erhält jedoch nur die endgültige Instanz des Objekts und nicht den Moment, in dem das Objekt protokolliert wird (da Sie wahrscheinlich Änderungen an dem Objekt vergleichen möchten, sobald sie auftreten). Um das Objekt genau zum Zeitpunkt der Änderung zu erhalten, verwende ich Folgendes ...

function logObject(object) {
    console.info(JSON.stringify(object).replace(/,/g, ",\n"));
}

Nennen wir es so ...

logObject(puzzle);

Möglicherweise möchten Sie den regulären Ausdruck .replace (/./ g, ", \ n") entfernen, wenn Ihre Daten Kommas enthalten.


0

Damit,. Ich hatte dieses Problem. außer ich habe [Objekt Objekt]

Ich bin sicher, Sie könnten dies mit Rekursion tun, aber das hat bei mir funktioniert:

Folgendes habe ich in meiner Konsole getan:

var object_that_is_not_shallow = $("all_obects_with_this_class_name");
var str = '';
object_that_is_not_shallow.map(function(_,e){
    str += $(e).html();
});
copy(str);

Fügen Sie dann in Ihren Editor ein.


0

Dies sollte helfen, tiefe Objekte zu stringifizieren, indem rekursive Objekte Windowund NodeObjekte weggelassen werden.

function stringifyObject(e) {
  const obj = {};
  for (let k in e) {
    obj[k] = e[k];
  }

  return JSON.stringify(obj, (k, v) => {
    if (v instanceof Node) return 'Node';
    if (v instanceof Window) return 'Window';
    return v;
  }, ' ');
}

0

Klicken Sie mit der rechten Maustaste auf Daten, die Sie speichern möchten

  • Klicken Sie zunächst mit der rechten Maustaste auf die Daten, die Sie speichern möchten -> wählen Sie "Als globale Variable speichern". Die neue temporäre Variable wird wie folgt angezeigt: (temporäre Variable): Neue temporäre Variable wird in der Konsole angezeigt
  • Verwenden Sie zum zweiten Mal den Befehl copy (temp_variable_name) wie das Bild: Geben Sie hier die Bildbeschreibung ein. Danach können Sie Daten an einer beliebigen Stelle einfügen. hoffe nützlich /

0

Fügen Sie dies Ihrer Konsole hinzu und führen Sie es aus

copy(JSON.stringify(foo));

Dadurch wird Ihr JSON in die Zwischenablage kopiert

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.