nicht angemeldet
wie Quellcode anschauen, so wie er im DOM vorliegt
Hallo,
im Firefox gibt es ja verschiedene Möglichkeiten um sich den Quellcode anzeigen zu lassen, u.a. folgende zwei:
1.) Durch die Tastenkombination STRG+U den Quelltext der Seite anzeigen lassen 2.) Zunächst den kompletten Quellcode mit Hilfe von STRG+A markieren und dann anschließend über das Kontextmenü „Auswahl Quelltext anzeigen“ auszuwählen.
Dazu ein paar Fragen:
Frage 1:
Zeigen mir diese beiden Varianten den komplett gleichen Quellcode an oder unterscheiden Sie sich?
Frage 2:
Ich habe die Vermutung, dass bei Variante 1.) der noch unverarbeitete Quellcode angezeigt wird, bei Variante zwei hingegen ist es so, dass der verarbeitete Quellcode angezeigt wird, so wie er in das DOM geladen wurde, sprich die Java-Script Funktionen die den Quellcode u.U. modifizieren sind schon entsprechend im Quellcode eingearbeitet. Liege ich mit dieser Vermutung richtig?
Frage 3:
Falls ich mit meiner Vermutung in Punkt 2 nicht richtig liege würde mich interessieren, wie ich mir den kompletten Quellcode anschauen kann, wie dieser im DOM vorliegt, also nach Verarbeitung der JavaScript Funktionen. Gibt es hier eine Möglichkeit?
-
Tach!
1.) Durch die Tastenkombination STRG+U den Quelltext der Seite anzeigen lassen 2.) Zunächst den kompletten Quellcode mit Hilfe von STRG+A markieren und dann anschließend über das Kontextmenü „Auswahl Quelltext anzeigen“ auszuwählen. Zeigen mir diese beiden Varianten den komplett gleichen Quellcode an oder unterscheiden Sie sich?
Oder. Variante zwei ist aus dem DOM zurückgerechnet und kann deswegen Fehlerkorrekturen des Browsers oder DOM-Manipulationen enthalten, beispielsweise von Javascript.
Ich habe die Vermutung, dass bei Variante 1.) der noch unverarbeitete Quellcode angezeigt wird, bei Variante zwei hingegen ist es so, dass der verarbeitete Quellcode angezeigt wird, so wie er in das DOM geladen wurde, sprich die Java-Script Funktionen die den Quellcode u.U. modifizieren sind schon entsprechend im Quellcode eingearbeitet. Liege ich mit dieser Vermutung richtig?
Fast. Siehe oben.
Falls ich mit meiner Vermutung in Punkt 2 nicht richtig liege würde mich interessieren, wie ich mir den kompletten Quellcode anschauen kann, wie dieser im DOM vorliegt, also nach Verarbeitung der JavaScript Funktionen. Gibt es hier eine Möglichkeit?
DOM ist DOM und kein Quellcode. Ein solcher existiert nach dem Parsen nicht mehr. Es gibt nur das was aus dem DOM zurückgerechnet wurde, wenn das verlangt wird.
dedlfix.
-
Ok, dann habe ich das jetzt verstanden, erstmal danke für Deine ausführliche Antwort.
Anhand des jetzt vorhandenen Wissens habe ich eine weitere konkrete Frage:
Seitens Google Chrome existiert das Plugin „Tag Assistant“. Dies Plugin zeigt mir an ob Google Code Schnipsel im Quellcode erkannt werden. Im konkreten Beispiel bezogen auf die URL www.grueneperlen.com zeigt mir der Google Tag Assistant beispielsweise an, das folgendes Code Schnipsel im Quellcode vorhanden ist:
<img height="1" width="1" style="border-style:none;" alt="" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/0/?label=null&guid=ON&script=0&ord=9341773700434714">Suche ich allerdings im Quellcode durch die Tastenkombination STRG+U nach diesem Code-Fragment, so ist dieses nicht zu finden. Meine Vermutung liegt deshalb darin, dass das Code-Fragment per Java-Script in das DOM geladen wird. Um meine Vermutung zu überprüfen habe ich zunächst den kompletten Quellcode mit STRG+A markiert und dann per Kontextmenü auf Auswahl-Quelltext anzeigen geklickt. Wenn das Code Fragment nicht direkt im Quellcode vorhanden ist sondern per Java-Script in das DOM geladen wird, dann müsste das Code-Fragment doch im aus dem DOM zurückgerechneten Code zu finden sein. Allerdings finde ich auch hier nicht das Code Fragment. Hast du eine Ahnung warum ich das Code Fragement auch hier nicht finde?
PS: Ich habe nicht nach dem ganzen Fragment gesucht, sondern nur auch nach teilen davon z.B. auch nur nach der Nummer 9341773700434714 die im Fragement enthalten ist, auch die Numemr ist nicht zu finden.
-
Tach!
Seitens Google Chrome existiert das Plugin „Tag Assistant“. Dies Plugin zeigt mir an ob Google Code Schnipsel im Quellcode erkannt werden. Im konkreten Beispiel bezogen auf die URL www.grueneperlen.com zeigt mir der Google Tag Assistant beispielsweise an, das folgendes Code Schnipsel im Quellcode vorhanden ist:
<img height="1" width="1" style="border-style:none;" alt="" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/0/?label=null&guid=ON&script=0&ord=9341773700434714">Suche ich allerdings im Quellcode durch die Tastenkombination STRG+U nach diesem Code-Fragment, so ist dieses nicht zu finden.
Ich habe es im DOM gefunden. Das kann man sich mit Rechtsklick irgendwohin und "Inspect Element" anzeigen lassen. Strg+F und lossuchen. Drumherum steht was von adroll. Das ist auch im originalen Quellcode zu finden.
Meine Vermutung liegt deshalb darin, dass das Code-Fragment per Java-Script in das DOM geladen wird. Um meine Vermutung zu überprüfen habe ich zunächst den kompletten Quellcode mit STRG+A markiert und dann per Kontextmenü auf Auswahl-Quelltext anzeigen geklickt. Wenn das Code Fragment nicht direkt im Quellcode vorhanden ist sondern per Java-Script in das DOM geladen wird, dann müsste das Code-Fragment doch im aus dem DOM zurückgerechneten Code zu finden sein.
Ich hab keine Ahnung was die Browser da konkret zurückrechnen. Als Entwickler interessiert mich nur das was im DOM steht. Für den Code, den man daraus zurückrechnen kann, hab ich keine Verwendung.
dedlfix.
-
Tach!
Seitens Google Chrome existiert das Plugin „Tag Assistant“. Dies Plugin zeigt mir an ob Google Code Schnipsel im Quellcode erkannt werden. Im konkreten Beispiel bezogen auf die URL www.grueneperlen.com zeigt mir der Google Tag Assistant beispielsweise an, das folgendes Code Schnipsel im Quellcode vorhanden ist:
<img height="1" width="1" style="border-style:none;" alt="" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/0/?label=null&guid=ON&script=0&ord=9341773700434714">Suche ich allerdings im Quellcode durch die Tastenkombination STRG+U nach diesem Code-Fragment, so ist dieses nicht zu finden.
Ich habe es im DOM gefunden. Das kann man sich mit Rechtsklick irgendwohin und "Inspect Element" anzeigen lassen. Strg+F und lossuchen. Drumherum steht was von adroll. Das ist auch im originalen Quellcode zu finden.
Ich stehe hier leider komplett auf dem Schlauch. Ich erkläre mal genau was ich gemacht habe:
- laden der Webpräsenz www.grueneperlen.com über den Google Chrome
- Rechtsklick irgendwo auf der Seite (ohne vorher STRG+A betätigt zu haben) und dann auf "Element untersuchen"
- der Code im DOM wird mir in den Entwicklertools unter der Registerkarte Elements angezeigt.
- über STRG+F suche ich habe einem Teil auf dem Fragement oben, habs einfach mit der Nummer 9341773700434714 getestet.
Die Nummer wird leider nicht gefunden. Kannst du mir sagen, was ich falsch mache?
Meine Vermutung liegt deshalb darin, dass das Code-Fragment per Java-Script in das DOM geladen wird. Um meine Vermutung zu überprüfen habe ich zunächst den kompletten Quellcode mit STRG+A markiert und dann per Kontextmenü auf Auswahl-Quelltext anzeigen geklickt. Wenn das Code Fragment nicht direkt im Quellcode vorhanden ist sondern per Java-Script in das DOM geladen wird, dann müsste das Code-Fragment doch im aus dem DOM zurückgerechneten Code zu finden sein.
Ich hab keine Ahnung was die Browser da konkret zurückrechnen. Als Entwickler interessiert mich nur das was im DOM steht. Für den Code, den man daraus zurückrechnen kann, hab ich keine Verwendung.
Nochmal zum Verständnis eine Frage zum Google Chome. So wie ich das verstanden habe gibt es drei Möglichkeiten:
1.) STRG+U (der Quelltext bevor er in das DOM geparst wird wird angezeigt) 2.) STRG+A und dann "Auswahl-Quelltext anzeigen" (das DOM wird in Code zurückgerechnet, hier sollten demnach die Veränderungen durch JavaScript schon integriert sein) 3.) Rechtsklick und dann "Element untersuchen" (das DOM wird über die Entwicklertools angezeigt und zwar in der Registerkarte Elements der Entwicklertools)
Ist das so richtig erklärt?
-
Tach!
Ich stehe hier leider komplett auf dem Schlauch. Ich erkläre mal genau was ich gemacht habe:
- laden der Webpräsenz www.grueneperlen.com über den Google Chrome
- Rechtsklick irgendwo auf der Seite (ohne vorher STRG+A betätigt zu haben) und dann auf "Element untersuchen"
- der Code im DOM wird mir in den Entwicklertools unter der Registerkarte Elements angezeigt.
- über STRG+F suche ich habe einem Teil auf dem Fragement oben, habs einfach mit der Nummer 9341773700434714 getestet. Die Nummer wird leider nicht gefunden. Kannst du mir sagen, was ich falsch mache?
So hab ich das auch gemacht, nur dass ich nicht nach der Nummer sondern nach "double" oder "googleads" gesucht habe.
Nochmal zum Verständnis eine Frage zum Google Chome. So wie ich das verstanden habe gibt es drei Möglichkeiten: 1.) STRG+U (der Quelltext bevor er in das DOM geparst wird wird angezeigt) 2.) STRG+A und dann "Auswahl-Quelltext anzeigen" (das DOM wird in Code zurückgerechnet, hier sollten demnach die Veränderungen durch JavaScript schon integriert sein) 3.) Rechtsklick und dann "Element untersuchen" (das DOM wird über die Entwicklertools angezeigt und zwar in der Registerkarte Elements der Entwicklertools) Ist das so richtig erklärt?
Ja, aber das DOM ist kein statisches Gebilde. Das wackelt in modernen Anwendungen ständig vor sich hin, je mehr da mit Javascript irgendwelche Spielereien (oder auch sinnvolle Dinge) gemacht werden. Nummer 1 ist längst Geschichte, wenn die Seite läuft. Nummer 2 ist immer nur eine Momentaufnahme, die im nächsten schon wieder veraltet sein kann. Die Änderungen im DOM hingegen sieht man auch in den Entwickler-Tools laufend aktualisiert.
dedlfix.
-
Tach!
Ich stehe hier leider komplett auf dem Schlauch. Ich erkläre mal genau was ich gemacht habe:
- laden der Webpräsenz www.grueneperlen.com über den Google Chrome
- Rechtsklick irgendwo auf der Seite (ohne vorher STRG+A betätigt zu haben) und dann auf "Element untersuchen"
- der Code im DOM wird mir in den Entwicklertools unter der Registerkarte Elements angezeigt.
- über STRG+F suche ich habe einem Teil auf dem Fragement oben, habs einfach mit der Nummer 9341773700434714 getestet. Die Nummer wird leider nicht gefunden. Kannst du mir sagen, was ich falsch mache?
So hab ich das auch gemacht, nur dass ich nicht nach der Nummer sondern nach "double" oder "googleads" gesucht habe.
Jetzt habe ich den Code auch gefunden, vielen Dank für Deine prima Hilfe!
Und schon die nächste Frage:
Ich möchte erreichen, dass der Code
<img height="1" width="1" style="border-style:none;" alt="" src="http://googleads.g.doubleclick.net/pagead/viewthroughconversion/0/?label=null&guid=ON&script=0&ord=9341773700434714">zukünftig nichtmehr in das DOM integriert wird. Ich muss demnach irgendwie den Teil des Quellcodes identifizieren (vermutlich eine JavaScript Funktion) die dafür verantwortlich ist, das dieser Code in das DOM integriert wird.
Wie wäre denn das einfachste Vorgehen um die JavaScript Funktion zu identifizieren, die dafür verantwortlich ist das der Code in das DOM integriert wird?
-
Tach!
Wie wäre denn das einfachste Vorgehen um die JavaScript Funktion zu identifizieren, die dafür verantwortlich ist das der Code in das DOM integriert wird?
Ob einfach oder nicht, das Ziel muss erreicht werden. Du hast ja jezt die Stelle im DOM. Schau nach, ob in der Umgebung ein paar Indizien auf einen möglichen Verursacher zu finden sind. Der Verusacher ist Javascript, also halte mal Ausschau nach Javascript in der Umgebung. Weiterhin kannst du dir die anderen Elemente im DOM anschauen, die da in der Gegend liegen. Vielleicht ist es ein selten vorkommendes Element (body) oder eine bestimmte Konstellation von Elementen, die du im originalen Code wiederfinden kannst. Da kann dann auch das verursachende Javascript in der Nähe liegen. Andererseits kann es auch wo ganz anders stehen und sich den Platz für das Einfügen über eine ID oder ein selten vorkommendes HTML-Element suchen. Der Name eines solchen Elements muss dann im Code des Scripts auftauchen. Aber es kann auch sein, dass der Code für das Einfügen auch erst nachträglich geladen und ins DOM eingefügt wird.
dedlfix.
-
Muss ich das wirklich so umständlich machen? In Zeiten von Firebug und den Entwicklertools müsste es doch auch irgendwie einfacher möglich sein herauszufinden, welche Bereiche im DOM aus welchen Java-Script-Funktionen resultieren?
-
Tach!
Muss ich das wirklich so umständlich machen? In Zeiten von Firebug und den Entwicklertools müsste es doch auch irgendwie einfacher möglich sein herauszufinden, welche Bereiche im DOM aus welchen Java-Script-Funktionen resultieren?
Dazu müsste der Browser eine Historie führen, wann er was und warum geändert hat. Das ist ein ziemlich aufwendiges Unterfangen mit allgemein geringem Nutzwert. In IDEs gibt es sie allerdings gelegentlich, im Visual Studio beispielsweise in dessen teuerster Ausführung. Wie auch immer, für Browser ist mir sowas nicht bekannt.
dedlfix.
-
-
-
-
-
-
Falls ich mit meiner Vermutung in Punkt 2 nicht richtig liege würde mich interessieren, wie ich mir den kompletten Quellcode anschauen kann, wie dieser im DOM vorliegt, also nach Verarbeitung der JavaScript-Funktionen. Gibt es hier eine Möglichkeit?
Menü -> Entwicklerwerkzeuge -> Inspektor oder Kontextmenü -> Element untersuchen. Alternativ Firebug.