Wie kann man in der Chrome WebDev Tools Console auf ein JSON Objekt zugreifen?

[ebody]

Hallo,

wie kann man in der Chrome WebDev Tools Console auf ein JSON Objekt zugreifen?

const myCar2 = {
  "color": "black",
  "brand": "vw",
  "type": "Kombi"
}

console.log(myCar2);

In der Console wird das Objekt ausgegeben. Wie könnte ich jetzt in der Console selbst das JSON Objekt nochmal ausgeben lassen? Wenn ich den Variablennamen eingebe funktioniert es nicht.

Gruß ebody

[JürgenB]

Hallo,

myCar2 ist in codepen keine globale Variable. Du musst die codepen-eigene Console verwenden.

Gruß
Jürgen

[dedlfix]

Tach!

Wie könnte ich jetzt in der Console selbst das JSON Objekt nochmal ausgeben lassen? Wenn ich den Variablennamen eingebe funktioniert es nicht.

Der Scope verhindert es. Auf alles, was nicht im globalen Scope ist, kannst du nicht direkt zugreifen. Wie im Programm selbst auch. Du musst dazu im betreffenden Scope sein.

Selbst wenn du die Console vom CodePen nimmst, kannst du in folgendem Beispiel nur auf y zugreifen, nachdem das Programm gelaufen ist.

{
  const x = 42;
  console.log(x);
}

const y = 23
console.log(y);

Um xzu prüfen, müsste man einen Breakpoint auf das console.log(x) setzen, was aber anscheinend in CodePen nicht geht. Und die entsprechende Stelle in Chromes Debugger zu finden, ist recht aussichtlos. Selbst wenn du sie gefunden hast, nützt das nichts, weil man den Code nicht einfach so auf Knopfdruck laufen lassen kann. Der läuft in diesem Minimalbeispiel nur automatisch bei Änderungen, aber dabei ändert sich auch der Name der Ressource und der Breakpoint ist futsch.

dedlfix.

[Felix Riesterer]

Lieber ebody,

du kannst diverse Variablen global verfügbar machen, indem Du sie als Eigenschaften des window-Objektes definierst:

window.myCar2 = myCar2; // mache myCar2 global verfügbar

Die Zeile mit window.myCar2 ist natürlich später wieder zu entfernen, weil sie nur Debug-Zwecken geschuldet ist und im endgültigen Programm nichts mehr verloren hat.

console.log(window.myCar2); // klappt in jedem Scope

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo ebody,

die Codepen-Konsole hilft auf jeden Fall. Aber nicht zum Debuggen.

dedlfix meinte, man könne keinen Breakpoint setzen.

Das ist ein Irrtum. Aber Codepen macht es einem auch nicht leicht.

Zum einen kannst Du eine debugger-Anweisung in deinen Code setzen, allerdings schießt dann die codepen.io Logik quer, bei jeder Änderung am Quellcode die Seite neu aufzubereiten. D.h. du tippst ein Zeichen ins HTML, wartest zu lange und die Seite wird neu aufgebaut.

Und der Debugger hält an. Nach dem dritten Mal schmeißt Du das debugger-Statement wieder raus. Oder, wie ich, den Codepen aus dem Fenster und nimmst jsFiddle.

Aber Codepen hat dazugelernt. Oder ich habe das bisher immer übersehen. Geh in die Settings, dort Behavior, und schalte "Auto-Updating Preview" ab. Nun musst Du "Run" klicken, um die Seite zu aktualisieren. Angeblich funktioniert auch Strg+Shift+7, aber nicht bei mir. Weiterer Nachteil: der Button reagiert zäh. RICHTIG zäh. Ist für registrierte User oder Premium-Kunden vielleicht besser, aber bei mir dauert es 5 Sekunden bis die Seite sich aktualisiert. In jsFiddle geht es mit Strg+Enter ohne Zeitverzug.

Außer mit der debugger; Anweisung kannst Du auch Breakpoints im Sourcecode setzen. Nicht in Codepen selbst, aber in den DevTools. Dafür musst du dort die boomboom-box heraussuchen und den pen.js finden. Nein!!! Nicht den. PEN PUNKT JOTT ESS.

In pen.js steht dein Javascript-Code, und da kannst Du dann ganz normal Breakpoints setzen. Wenn er bei denen hält, kannst Du in der Konsole auch alle Variablen abfragen, die in dem Scope gelten, wo er gehalten hat.

Rolf