Sepp: Wert einer Javascript Variablen mit Entwicklertools anzeigen lassen

Hey,

kann man den Wert einer Java-Script Variablen in den Entwicklertools anzeigen lassen, wenn das Java-Script Code Fragment nicht direkter Bestandteil des Quellcodes ist, weil es über eine externe Javascript Datei reingeladen wird?

  1. Tach!

    kann man den Wert einer Java-Script Variablen in den Entwicklertools anzeigen lassen, wenn das Java-Script Code Fragment nicht direkter Bestandteil des Quellcodes ist, weil es über eine externe Javascript Datei reingeladen wird?

    Woher etwas geladen wurde spielt keine Rolle. Du kannst alles so behandeln wie deinen eigenen Code.

    dedlfix.

    1. Woher etwas geladen wurde spielt keine Rolle. Du kannst alles so behandeln wie deinen eigenen Code.

      Wenn das Javascript von extern geladen wurde kann ich es ja nicht im Quellcode sehen. Wie will ich dann mit den Entwicklertools eine Javascript Variable einsehen, wenn es nicht im Quellcode ist?

      1. Servus!

        Woher etwas geladen wurde spielt keine Rolle. Du kannst alles so behandeln wie deinen eigenen Code.

        Wenn das Javascript von extern geladen wurde kann ich es ja nicht im Quellcode sehen.

        Doch es wird ja von Browser geladen und ist, genauso wie externe Bilder, auf die referenziert wurde, im Browser und dadurch von den Entwickler-Tools einsehbar.

        Wie will ich dann mit den Entwicklertools eine Javascript Variable einsehen, wenn es nicht im Quellcode ist?

        Der Quellcode deines HTML-Dokuments ist nicht die DOM-Struktur und die Skripten deines geladenen Dokuments.

        Schau unter F12 -> Konsole -> JS

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
      2. Tach!

        Wenn das Javascript von extern geladen wurde kann ich es ja nicht im Quellcode sehen. Wie will ich dann mit den Entwicklertools eine Javascript Variable einsehen, wenn es nicht im Quellcode ist?

        Wie sonst? Es wird schließlich von der externen Quelle auch im Quellcode ausgeliefert. Vielleicht ist es minifiziert, aber trotzdem Code und kein Kompilat oder ähnliches. Aber der Quelltext interessiert dich weder bei deinen eigenen noch bei den fremden Scripts sonderlich, sondern das was dir die Entwicklertools anzeigen. Nur dort kannst du beispielsweise Breakpoints setzen, und dann auch die Variableninhalte mit Mausdraufhalten anschauen. Der Chrome zeigt es in der Lasche Sources, der Firefox unter Debugging.

        Falls du eine minifizierte Version des externen Scripts eingebunden hast, dann hast du zwei Möglichkeiten, eine lesbare Variante zu bekommen. Die eine ist, dass meist auch eine nicht-minifizierte Version angeboten wird, die du statdessen nehmen kannst. Die andere ist, dass einige Entwicklertools eine Prettify-Funktionalität anbieten, mit der der Code in einigermaßen lesbare Form gebracht werden kann. Die eignet sich auch für das Debugging, weil es dann nicht mehr nur eine einzeilige Codewurst ist.

        dedlfix.

        1. Du schreibst:

          Der Chrome zeigt es in der Lasche Sources, der Firefox unter Debugging.

          Warum heißt das bei Chrome Sources und bei Firefox Debugging. Das sind ja grundverschiedene Bedeutungen, die wohl das gleiche zur Verfügung stellen.

          Matthias Scharwies schreibst:

          Schau unter F12 -> Konsole -> JS

          Wo kann ich denn den Wert der Javascript Variablen einsehen? Bei dem von Dir genannten Punkt (Sources bzw. Debugging) oder beim dem von Matthias Scharwiese genannten (F12 / Konsole / JS)?

          Falls du eine minifizierte Version des externen Scripts eingebunden hast, dann hast du zwei Möglichkeiten, eine lesbare Variante zu bekommen.

          Was bedeutet minifzieren? Zusammenstauchen in eine Zeile damit es schneller geladen wird?

          Die andere ist, dass einige Entwicklertools eine Prettify-Funktionalität anbieten, mit der der Code in einigermaßen lesbare Form gebracht werden kann. Die eignet sich auch für das Debugging, weil es dann nicht mehr nur eine einzeilige Codewurst ist.

          Wo finde ich dieses Prettify beim Firefox und beim Chrome?

          1. Tach!

            Der Chrome zeigt es in der Lasche Sources, der Firefox unter Debugging.

            Warum heißt das bei Chrome Sources und bei Firefox Debugging. Das sind ja grundverschiedene Bedeutungen, die wohl das gleiche zur Verfügung stellen.

            Es gibt Unterschiede. Unter Sources findet man nicht nur Javascript-Code.

            Wo kann ich denn den Wert der Javascript Variablen einsehen? Bei dem von Dir genannten Punkt (Sources bzw. Debugging) oder beim dem von Matthias Scharwiese genannten (F12 / Konsole / JS)?

            Weiß ich nicht, weil ich nicht weiß, welchen Browser du verwendest. Generelle Vorgehensweise ist, dass du zunächst einmal den Scope brauchst, in dem die Variable existiert. Wenn das nicht der globale Scope ist, dann musst du einen Breakpoint in den Scope der Variable setzen, und die Ausführung muss daran vorbeikommen. Am besten ist es also, den Breakpoint auf die Zeile zu setzen, wo auf die Variable zugegriffen wird. Ein Klick auf die Zeilennumer setzt Breakpoints.

            Falls du eine minifizierte Version des externen Scripts eingebunden hast, dann hast du zwei Möglichkeiten, eine lesbare Variante zu bekommen.

            Was bedeutet minifzieren? Zusammenstauchen in eine Zeile damit es schneller geladen wird?

            Ja, und Bezeichner auf wenige Zeichen zusammenkürzen. Das macht es schwierig, den Sinn zu verstehen, wenn statt sprechender Namen nur noch irgendwelche Buchstaben zu sehen sind.

            Die andere ist, dass einige Entwicklertools eine Prettify-Funktionalität anbieten, mit der der Code in einigermaßen lesbare Form gebracht werden kann. Die eignet sich auch für das Debugging, weil es dann nicht mehr nur eine einzeilige Codewurst ist.

            Wo finde ich dieses Prettify beim Firefox und beim Chrome?

            Über (Chrome) / unter (Firefox) dem Code.

            dedlfix.