Firefox - Änderung an JavaScript direkt im Browser

[Karl Heinz]

Hallo,

ich würde gerne im Java-Script Code einer Webseite etwas direkt im Browser ändern und schauen wie sich diese Änderung auf die Seite auswirkt. Ich möchte diese Änderung nicht direkt in der Datei selbst machen sondern zur Laufzeit temporär überschreiben.

Kann ich solch eine Debug Änderung irgendwie im Firefox machen?

Falls ja, wie?

[Matthias Apsel]

Hallo Karl Heinz,

Kann ich solch eine Debug Änderung irgendwie im Firefox machen?

Ja. Mit den Entwicklertools [F12].

Bis demnächst
Matthias

[Karl Heinz]

Ja. Mit den Entwicklertools [F12].

Mit CSS klappt das, Java-Script kann ich leider nicht editieren :-(.

Kannst du genauer beschreiben wie das geht?

[dedlfix]

Tach!

Kann ich solch eine Debug Änderung irgendwie im Firefox machen?

Eher nicht. Javascript läuft zu verschiedenen Ereignissen, wie beispielsweise dem Laden einer Seite. Wenn du aber die Seite neu lädst, müsste der Browser deine Version lokal vorhalten. Das wird er nicht machen.

Du kannst aber Javascript-Anweisungen über die Konsole eingeben und ausführen lassen. Das geht auch, wenn du Breakpoints gesetzt hast und die Ausführung dort angehalten wird mit Zugriff auf die dortigen lokalen Variablen. Sowas reicht meist, um ein Kleinigkeiten zu testen.

dedlfix.

[Karl Heinz]

Du kannst aber Javascript-Anweisungen über die Konsole eingeben und ausführen lassen. Das geht auch, wenn du Breakpoints gesetzt hast und die Ausführung dort angehalten wird mit Zugriff auf die dortigen lokalen Variablen. Sowas reicht meist, um ein Kleinigkeiten zu testen.

Es handelt sich um eine Kleinigkeit:

Ein Kunde hat den Google Tag Manager so eingebunden:

<!--GoogleTagManager-->
<script>
	(function(w,d,s,l,i){w[l]=w[l]||[];
	w[l].push({'gtm.start':
	newDate().getTime(),event:'gtm.js'});
	varf=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
	j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTMMQV9ZC');
</script>
<!--EndGoogleTagManager--> 

Leider wird der Google Tag Manager nicht mit dem Google Chrome Plugin "Tag Assistant" gefunden.

Ich habe eine Vermutung warum er nicht gefunden wird.

Die Vermutung ist wie folgt:

Ich glaube der Tag Manager wird vom Tag Assistant nicht gefunden, weil der Code GTMMQV9ZC einen Bindestrich enthalten müsste. Er müsste so aussehen: GTM**-**MQV9ZC.

Kann ich mit dem von Dir vorgeschlagenen Vorgehen irgendwie den Bindestrich dazu packen?

[dedlfix]

Tach!

Kann ich mit dem von Dir vorgeschlagenen Vorgehen irgendwie den Bindestrich dazu packen?

Kopier den Javascript-Code, füge ihn in der Console ein, ändere den Wert und schick ihn dann ab.

dedlfix.

[Karl Heinz]

Kann ich mit dem von Dir vorgeschlagenen Vorgehen irgendwie den Bindestrich dazu packen?

Kopier den Javascript-Code, füge ihn in der Console ein, ändere den Wert und schick ihn dann ab.

Habe ich gemacht. Mit folgendem Ergebnis:

Eine Ahnung das der Fehler

Uncaught SyntaxError: Unexpected token <

zu bedeuten hat?

[Matthias Apsel]

Hallo Karl Heinz,

<script> ist kein gültiges JavaScript.

Bis demnächst
Matthias

[Karl Heinz]

<script> ist kein gültiges JavaScript.

Stehe grade auf dem Schlauch. Was meinst du damit?

[Matthias Apsel]

Hallo Karl Heinz,

<script> ist kein gültiges JavaScript.

Stehe grade auf dem Schlauch. Was meinst du damit?

Du darfst nicht

<!--GoogleTagManager-->
<script>
	(function(w,d,s,l,i){w[l]=w[l]||[];
	w[l].push({'gtm.start':
	newDate().getTime(),event:'gtm.js'});
	varf=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
	j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','GTMMQV9ZC');
</script>
<!--EndGoogleTagManager--> 

in der Konsole ausführen. Sondern nur

(function(w,d,s,l,i){w[l]=w[l]||[];
w[l].push({'gtm.start':
newDate().getTime(),event:'gtm.js'});
varf=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTMMQV9ZC');

Bis demnächst
Matthias

[Karl Heinz]

... in der Konsole ausführen. Sondern nur

(function(w,d,s,l,i){w[l]=w[l]||[];
w[l].push({'gtm.start':
newDate().getTime(),event:'gtm.js'});
varf=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTMMQV9ZC');

Genau das habe ich gemacht. Die Console zeigt mir folgene Fehlermledung:

undefined

Ich habe mir die Consolen Ausgabe beim normalen Laden der Webseite mal angeschaut. Mit "normal Laden" meine ich, dass ich den obigen Code nicht nachträglich in die Console eingefügt habe.

In der Console (von Google Chrome, in der Console von Firefox sieht die Fehlermeldung anders aus, keine Ahnung warum?) werden folgende Fehlermeldungen angezeigt:

Könnt Ihr mir sagen was da faul ist. Es geht um die Webseite www.teltec.de.

Wir haben den Tag-Manager Code 1:1 so eingefügt wie von Google vorgegeben, trotzdem scheint die Console nicht mit dem Code einverstanden zu sein. Eine Ahnung was hier falsch läuft?

Die Zeilen 121 und 125, bei welchen was nicht passen soll, sehen wie folgt aus:

[Christian Kruse]

Hallo Karl,

... in der Konsole ausführen. Sondern nur […] Genau das habe ich gemacht. Die Console zeigt mir folgene Fehlermledung:

undefined

Das ist keine Fehlermeldung, sondern der Rückgabewert des Ausdrucks, den du gerade ausgeführt hast (die Funktions-Definition). Und der ist in diesem Fall halt undefined.

In der Console (von Google Chrome, in der Console von Firefox sieht die Fehlermeldung anders aus, keine Ahnung warum?) werden folgende Fehlermeldungen angezeigt:

Könnt Ihr mir sagen was da faul ist. Es geht um die Webseite www.teltec.de.

        var google_tag_params = {
            ecomm_prodid: '',
            ecomm_pagetype: 'home',
            ecomm_totalvalue: 
        };

Hier fehlt ein Wert für ecomm_totalvalue, der Teil hinter dem Doppelpunkt. Das verursacht den Syntax-Fehler.

        newDate().getTime(),event:'gtm.js'});varf=d.getElementsByTagName(s)[0],

hier hast du ein Leerzeichen weg gelassen, es heisst new Date().

LG,
CK

[Karl Heinz]

Könnt Ihr mir sagen was da faul ist. Es geht um die Webseite www.teltec.de.

        var google_tag_params = {
            ecomm_prodid: '',
            ecomm_pagetype: 'home',
            ecomm_totalvalue: 
        };

Hier fehlt ein Wert für ecomm_totalvalue, der Teil hinter dem Doppelpunkt. Das verursacht den Syntax-Fehler.

Stimmt, vielen Dank!

Wie hast du denn diesen Fehler gefunden? Der Fehler tritt ja in Zeile 7861 auf. Die Zeile 7861 wird doch von der Console garnicht bemeckert sondern die Zeile 7848, in dieser Zeile hab ich nach dem Fehler gesucht? Wie bist du denn dann auf die Zeile 7861 aufmerksam geworden?

[Christian Kruse]

Hallo Karl,

Wie hast du denn diesen Fehler gefunden? Der Fehler tritt ja in Zeile 7861 auf. Die Zeile 7861 wird doch von der Console garnicht bemeckert?

Keine Ahnung, wie du auf Zeile 7861 kommst, aber bei mir ist das Zeile 7848:

LG,
CK

[Karl Heinz]

Hallo Karl,

Wie hast du denn diesen Fehler gefunden? Der Fehler tritt ja in Zeile 7861 auf. Die Zeile 7861 wird doch von der Console garnicht bemeckert?

Keine Ahnung, wie du auf Zeile 7861 kommst, aber bei mir ist das Zeile 7848:

Schaue ich mir mit Hilfe von Google Chrome und STRG+U den Quellcode an, so finde ich in der bemängelten Zeile 7848, bzw. in der Zeile davor, die fehlerhafte Anweisung. Hier habe ich das gleiche Ergebnis wie du.

Klicke ich allerdings im Google Chrome in den Entwicklertools auf den im nachfolgenden Screenshot rot markierten Bereich, so wird mir in Zeile 7848 etwas anderes angezeigt, dann ist die Stelle die den Fehler verursacht erst in Zeile 7861 zu zu finden.

Kannst du mir sagen warum das so ist? Ein Bug in den Google Chrome Entwicklerwerkzeugen?

PS: Genau das was Rolf hier beschreibt ist mir gerade passiert. Vielen Dank @Rolf b, durch Deinen Tipp hatte ich den Post im Zwischenspeicher, sonst hätte ich nämlich alles neu tippen müssen. Kann man das nicht irgendwie besser lösen?

[Christian Kruse]

Hallo Karl,

Schaue ich mir mit Hilfe von Google Chrome und STRG+U den Quellcode an, so finde ich in der bemängelten Zeile 7848, bzw. in der Zeile davor, die fehlerhafte Anweisung. Hier habe ich das gleiche Ergebnis wie du.

Klicke ich allerdings im Google Chrome in den Entwicklertools auf den im nachfolgenden Screenshot rot markierten Bereich, so wird mir in Zeile 7848 etwas anderes angezeigt, dann ist die Stelle die den Fehler verursacht erst in Zeile 7861 zu zu finden.

Die Entwickler-Tools zeigen den aktuellen DOM-Baum an, „Quelltext anzeigen“ zeigt an, was vom Server kommt. Das heißt konkret, dass Modifikationen, die du mit JS machst, sich in den Entwickler-Werkzeugen zeigen aber im „Quelltext anzeigen“ nicht. Dadurch kommt die Diskrepanz zustande, aber wenn du auf die Zeilenangabe in der Konsole klickst solltest du trotzdem zur richtigen Stelle kommen.

PS: Genau das was Rolf hier beschreibt ist mir gerade passiert. Vielen Dank @Rolf b, durch Deinen Tipp hatte ich den Post im Zwischenspeicher, sonst hätte ich nämlich alles neu tippen müssen. Kann man das nicht irgendwie besser lösen?

Weiss nicht, muss mal gucken. Mach am besten einen Bugreport bei Github, sonst vergesse ich das…

LG,
CK

[Matthias Apsel]

Hallo Karl Heinz,

![http://www.fotos-hochladen.net/uploads/screenshotyi4cgkrn51.png]

Warum nutzt du nicht unseren Foto-Upload?

Bis demnächst
Matthias

[Karl Heinz]

Warum nutzt du nicht unseren Foto-Upload?

Dachte die Funktion gibt es hier nicht? Ist die neu?

[Matthias Apsel]

Hallo Karl Heinz,

Warum nutzt du nicht unseren Foto-Upload?

Dachte die Funktion gibt es hier nicht? Ist die neu?

Nein, die gibt es schon lange. Unter dem Antwortfeld: „Bilder hierher ziehen oder klicken, um sie hochzuladen. Bitte beachten Sie die Nutzungsbedingungen.“

Bis demnächst
Matthias

[Rolf b]

Und AUFPASSEN, dass man das Bild genau auf den grauen Streifen zieht. Habe mir schon ein paar Postings auf diese Weise zerschossen, weil ich das Bild knapp daneben gezogen habe und dann der Browser einfach nur das Bild angezeigt hat.

Rolf

[Matthias Apsel]

Hallo Rolf b,

Und AUFPASSEN, dass man das Bild genau auf den grauen Streifen zieht. Habe mir schon ein paar Postings auf diese Weise zerschossen, weil ich das Bild knapp daneben gezogen habe und dann der Browser einfach nur das Bild angezeigt hat.

Bedauerlicherweise hilft in diesem Fall auch der Zurückbutton nicht. Der Firefox ändert den Cursor von "+ Kopieren" (grauer Streifen) auf "→ Verschieben" (außerhalb der Textarea)

Bis demnächst
Matthias

[marctrix]

Hej Rolf,

Und AUFPASSEN, dass man das Bild genau auf den grauen Streifen zieht. Habe mir schon ein paar Postings auf diese Weise zerschossen, weil ich das Bild knapp daneben gezogen habe und dann der Browser einfach nur das Bild angezeigt hat.

Ich habe mir eben ein Posting zerschossen, weil ich das hochgeladene Bild in der Vorschau versehntlich angeklickt habe - auch in dem Fall wird nur noch das Bild angezeigt…

Marc

[Christian Kruse]

Hallo marctrix,

Ich habe mir eben ein Posting zerschossen,

Warum benutzt ihr nicht einfach History back? 🤔

weil ich das hochgeladene Bild in der Vorschau versehntlich angeklickt habe - auch in dem Fall wird nur noch das Bild angezeigt…

Das Bild verlinkt auf das Original, ja.

LG,
CK

[marctrix]

Hej Christian,

Hallo marctrix,

Ich habe mir eben ein Posting zerschossen,

Warum benutzt ihr nicht einfach History back? 🤔

Das nenne ich mal moderne Nutzerführung! 😉

Nein, ich habe das auch versucht, aber bin dann natürlich wieder bei der Vorschau gelandet, so dass ich *gedacht *habe, das ist gar nicht die Seite, in der ich editiert habe. Denn das Editierfeld war außerhalb des Viewports. Dürfte der Standard sein, wenn man Bilder postet - die sind ja meist groß…

Hier kommt meine geistige Einschränkung zur Geltung, denn ich hätte den Artikel ja erkennen können als meinen und bei längerem Nachdenken mal versuchen, den zu editieren (war ja noch in dem Zeitfenster). Wenn ich den Button unter der Vorschau nicht finde, hätte ich bei der Suche danach aber über den "Speichern"-Button stolpern müssen.

Zur Erklärung wäre es gut, wenn sich der eine oder andere mal das Video "2017 design trends and their impact on accessibility" von Denis Boudreau anschaut. Ich bin der Amanda-Typ.

Das heißt, ich glaube schnell etwas zu verstehen (Marc denkt: "Aha, das ist also auch die falsche Seite"). Das funktioniert in den meisten Fällen und spart mir vermutlich auch insgesamt gesehen Zeit - manchmal kostet es aber auch Zeit (so wie in diesem Fall).

weil ich das hochgeladene Bild in der Vorschau versehntlich angeklickt habe - auch in dem Fall wird nur noch das Bild angezeigt…

Das Bild verlinkt auf das Original, ja.

Kann man das vielleicht nur für die Vorschau abschalten? - Sonst macht es ja Sinn.

Marc

[Christian Kruse]

Hallo marctrix,

Ich habe mir eben ein Posting zerschossen,

Warum benutzt ihr nicht einfach History back? 🤔

Das nenne ich mal moderne Nutzerführung! 😉

Na, es ging mir nicht um „you're holding it wrong,“ sondern um das „zerschossen.“

weil ich das hochgeladene Bild in der Vorschau versehntlich angeklickt habe - auch in dem Fall wird nur noch das Bild angezeigt…

Das Bild verlinkt auf das Original, ja.

Kann man das vielleicht nur für die Vorschau abschalten? - Sonst macht es ja Sinn.

Das ist ein technisches Problem… ich wüsste nicht, wie das so einfach umsetzbar sein sollte. Ich muss darüber nachdenken.

LG,
CK

[Karl Heinz]

Hej Rolf,

Und AUFPASSEN, dass man das Bild genau auf den grauen Streifen zieht. Habe mir schon ein paar Postings auf diese Weise zerschossen, weil ich das Bild knapp daneben gezogen habe und dann der Browser einfach nur das Bild angezeigt hat.

Ich habe mir eben ein Posting zerschossen, weil ich das hochgeladene Bild in der Vorschau versehntlich angeklickt habe - auch in dem Fall wird nur noch das Bild angezeigt…

Genau das ist mich auch kürzlich passiert.

[kackb00n]

Hallo,

ich weiß gerade nicht wie es bei anderen Browsern ist, bei Chrome kannst du einen Breakpoint setzen, die Seite neu laden, dann wird das Script am Breakpoint angehalten, dann einfach den editierten Code in der Konsole ausführen.

MfG kackb00n