Beste Möglichkeit, die generierte Quelle der Webseite anzuzeigen?

84

Ich suche nach einem Tool, das mir die richtige generierte Quelle liefert, einschließlich DOM-Änderungen, die von AJAX-Anforderungen für die Eingabe in den W3-Validator vorgenommen wurden. Ich habe folgende Methoden ausprobiert:

  1. Webentwickler-Symbolleiste - Generiert eine ungültige Quelle gemäß dem Dokumenttyp (z. B. entfernt sie den selbstschließenden Teil von Tags). Verliert den Doctype-Teil der Seite.
  2. Firebug - Behebt mögliche Fehler in der Quelle (z. B. nicht geschlossene Tags). Verliert auch den Doctype-Teil der Tags und fügt die Konsole ein, die selbst ungültiges HTML ist.
  3. IE Developer Toolbar - Generiert eine ungültige Quelle gemäß dem Dokumenttyp (z. B. werden alle Tags gegen die XHTML-Spezifikation in Großbuchstaben geschrieben).
  4. Markieren + Auswahlquelle anzeigen - Häufig schwierig, die gesamte Seite abzurufen, schließt auch den Dokumenttyp aus.

Gibt es ein Programm oder Add-On, das mir die genaue aktuelle Version der Quelle liefert, ohne sie zu reparieren oder auf irgendeine Weise zu ändern? Bisher scheint Firebug das Beste zu sein, aber ich mache mir Sorgen, dass es einige meiner Fehler beheben könnte.

Lösung

Es stellt sich heraus, dass es keine genaue Lösung für das gibt, was ich wollte, wie Justin erklärte. Die beste Lösung scheint darin zu bestehen, die Quelle in der Firebug-Konsole zu überprüfen, obwohl sie einige durch Firebug verursachte Fehler enthält. Ich möchte mich auch bei Forgotten Semicolon für die Erklärung bedanken, warum "View Generated Source" nicht mit der tatsächlichen Quelle übereinstimmt. Wenn ich 2 beste Antworten markieren könnte, würde ich.

Jeremy Kauffman
quelle
Hmmm, ich dachte, er fragt nach dem Gegenteil - dem genauen HTML, das vom Server ausgegeben wird. Jeremy?
Justin Grant
egal, habe gerade den neuen Kommentar gesehen. Jetzt macht es mehr Sinn, was Sie versuchen - danke für die Klarstellung. Ich werde meine Antwort entsprechend aktualisieren.
Justin Grant
Es ist bemerkenswert, dass viele Zuschauer dieses Beitrags den Hauptpunkt übersehen haben, nämlich dass die statische Quelle nicht zum Analysieren von Seiten verwendet werden kann, die durch Javascript geändert wurden. Firebug ist dafür großartig, aber es wäre schön, wenn es ein IE-Tool gäbe, um dasselbe zu tun, da die Browserkompatibilität ein großes Problem mit dem IE ist.
Paul Keister
1
Firebug behebt keine Fehler in HTML. Es werden nur Tags aus dem Firefox-DOM gerendert. Firebug 1.6 vermeidet das Hinzufügen von Elementen. Bei allen Versionen von Firebug können Sie das Ändern des DOM vermeiden, indem Sie das Konsolenfenster deaktivieren.
Johnjbarton
1
Ich habe gerade so viel aus dieser Frage gelernt!
Sergey Orshanskiy

Antworten:

32

[Aktualisierung als Antwort auf weitere Details in der bearbeiteten Frage]

Das Problem, auf das Sie stoßen, ist, dass, sobald eine Seite durch Ajax-Anforderungen geändert wurde, der aktuelle HTML-Code nur im DOM des Browsers vorhanden ist. Es gibt keinen unabhängigen Quell-HTML-Code mehr, den Sie überprüfen können, außer dem, was Sie aus dem herausziehen können DOM.

Wie Sie bemerkt haben, speichert das IE-DOM Tags in Großbuchstaben, korrigiert nicht geschlossene Tags und nimmt viele andere Änderungen an dem ursprünglich erhaltenen HTML-Code vor. Dies liegt daran, dass Browser im Allgemeinen sehr gut darin sind, HTML mit Problemen (z. B. nicht geschlossenen Tags) zu verwenden und diese Probleme zu beheben, um dem Benutzer etwas Nützliches anzuzeigen. Sobald der HTML-Code vom IE kanonisiert wurde, geht der ursprüngliche Quell-HTML-Code meines Wissens aus der Sicht des DOM im Wesentlichen verloren.

Firefox nimmt höchstwahrscheinlich weniger dieser Änderungen vor, daher ist Firebug wahrscheinlich die bessere Wahl.

Eine letzte (und arbeitsintensivere) Option kann für Seiten mit einfachen Ajax-Änderungen funktionieren, z. B. das Abrufen von HTML vom Server und das Importieren dieses HTML-Codes in die Seite innerhalb eines bestimmten Elements. In diesem Fall können Sie mit Fiddler oder einem ähnlichen Tool den ursprünglichen HTML-Code manuell mit dem Ajax-HTML-Code zusammenfügen. Dies ist wahrscheinlich mehr Ärger als es wert ist und fehleranfällig, aber es ist eine weitere Möglichkeit.

[Ursprüngliche Antwort hier auf die ursprüngliche Frage]

Fiddler ( http://www.fiddlertool.com/ ) ist ein kostenloses, browserunabhängiges Tool, das sehr gut funktioniert, um den genauen HTML-Code abzurufen, den ein Browser empfängt. Es zeigt Ihnen genaue Bytes auf dem Draht sowie dekodierten / entpackten / etc-Inhalt, den Sie in jedes HTML-Analysetool einspeisen können. Es zeigt auch Header, Timings, HTTP-Status und viele andere gute Dinge.

Sie können Fiddler auch zum Kopieren und Neuerstellen von Anforderungen verwenden, wenn Sie testen möchten, wie ein Server auf leicht unterschiedliche Header reagiert.

Fiddler arbeitet als Proxyserver zwischen Ihrem Browser und der Website und protokolliert den Datenverkehr in beide Richtungen.

Justin Grant
quelle
Mit Fiddler vertraut, ist es keine einfache Möglichkeit, das zu tun, was ich möchte (Anzeigen der generierten Quelle einer Seite, nachdem sie vom Benutzer geändert wurde).
Jeremy Kauffman
1
Er möchte die Quelle der Seite, nachdem Javascript den Dom geändert hat.
Byron Whitlock
Ich bin nicht der Downvoter, aber Ihre Antwort hat nichts mit der Frage selbst zu tun. Die Frage wurde möglicherweise bearbeitet, seit Sie einen Kommentar abgegeben haben.
Bradlis7
Ja, das weiß ich jetzt ... die ursprüngliche Frage erwähnte dieses wichtige Detail jedoch nicht. :-) Nachdem ich die neuen Informationen vom OP erhalten habe, habe ich gerade meine Antwort aktualisiert. Aber ich denke, meine ursprüngliche Antwort war eine vernünftige Antwort auf die ursprüngliche Frage. Auch wenn es nicht die beste Antwort ist (ich mag Forgotten Semicolon viel besser!), Frage ich mich, warum meine Antwort eine Ablehnung wert war. Keine große Sache, ich frage mich nur.
Justin Grant
Vielen Dank für diese Erklärung zum aktuellen HTML-Code, der nur im DOM des Browsers vorhanden ist. Dies ist der Kern meines Problems und ich habe das nicht verstanden, als ich gefragt habe. Ich glaube, dass das, wonach ich frage, im Wesentlichen unmöglich ist.
Jeremy Kauffman
34

Justin ist tot auf. Der entscheidende Punkt hierbei ist, dass HTML nur eine Sprache zur Beschreibung eines Dokuments ist. Sobald der Browser es liest, ist es weg . Offene Tags, geschlossene Tags und Formatierungen werden vom Parser erledigt und verschwinden dann . Jedes Tool, das Ihnen HTML anzeigt, generiert es basierend auf dem Inhalt des Dokuments, sodass es immer gültig ist.

Ich musste dies einmal einem anderen Webentwickler erklären, und es dauerte eine Weile, bis er es akzeptierte.

Sie können es in jeder JavaScript-Konsole selbst ausprobieren:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

Die nicht geschlossenen Tags und Tag-Namen in Großbuchstaben sind verschwunden, da dieser HTML-Code nach der zweiten Zeile analysiert und verworfen wurde.

Der richtige Weg , um das Dokument von JavaScript zu ändern ist mit documentMethoden ( createElement, appendChild, setAttribute, etc.) , und Sie werden bemerken , dass es keinen Hinweis auf Tags oder HTML - Syntax in eine dieser Funktionen. Wenn Sie verwenden document.write, innerHTMLoder andere HTML-sprachigen Anrufe Ihre Seiten zu ändern, zu validieren , der einzige Weg , um es zu fangen ist , was man in sie setzen sind und bestätigen , dass HTML getrennt.

Der einfachste Weg, um zur HTML-Darstellung des Dokuments zu gelangen, ist folgender:

document.documentElement.innerHTML
s4y
quelle
1
Um diese Antwort neu zu formulieren, ist dies wie das Kompilieren eines Programms, das Optimieren oder anderweitige Ändern des Codes mit einem Tool oder sogar das Infizieren des Programms mit einem Virus und das anschließende Abfragen des Quellcodes des Ergebnisses. Die Transformation HTML-> DOM ist eine Einwegfunktion.
Sergey Orshanskiy
+1, heilige Hölle, das funktioniert, um den Code vor und nach jeder Änderung zu sehen. sehr kluges Denken! Vielen Dank
Jimjim
Dies mag wahr sein, beantwortet aber die Frage nicht ganz. Es ist durchaus möglich, das aktuell manipulierte DOM wieder in HTML zu konvertieren, sodass Sie "die generierte Quelle anzeigen" können. Dies ist gelegentlich sehr nützlich, wenn Sie beispielsweise ein einzelnes Stück JavaScript mit einem realistischen Testkabel vergleichen müssen.
Superluminary
21

Ich weiß, dass dies ein alter Beitrag ist, aber ich habe gerade dieses Stück Gold gefunden . Dies ist alt (2006), funktioniert aber immer noch mit IE9. Ich habe persönlich ein Lesezeichen hinzugefügt.

Kopieren Sie diese und fügen Sie sie in die Adressleiste Ihres Browsers ein:

javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))

Was Firefox betrifft, erledigt die Webentwickler-Symbolleiste die Aufgabe. Normalerweise verwende ich dies, aber manchmal erzeugen einige schmutzige asp.net-Steuerelemente von Drittanbietern unterschiedliche Markups basierend auf dem Benutzeragenten ...

BEARBEITEN

Wie Bryan im Kommentar zeigte, entfernen einige Browser den javascript:Teil beim Kopieren / Einfügen in die URL-Leiste. Ich habe gerade getestet und das ist bei IE10 der Fall.

Johnny5
quelle
Wow, das ist in der Tat PURE GOLD! Funktioniert hervorragend mit einem einzigen Klick auf das Lesezeichen. Zumindest gerade in Firefox. Mit Chrome wurde das Popup gerendert - ignoriert es möglicherweise den "Text / Plain"?
Jon Coombs
Ich kopiere, füge dies in die Adressleiste meines Browsers ein und ENTER, nichts passiert
eMi
1
@eMi Ich habe IE10 hier und kann das javascript:Teil nicht einfügen . Ich muss es manuell eingeben . Vielleicht passiert genau das. Überprüfen Sie noch einmal, was eingefügt wird.
Johnny5
1
Unter Google Chrome (mindestens ab v44.0.2403.155) unter Mac OS X führt das Lesezeichen von @ Johnny5 nicht zu einer Nur-Text-Seite, die die Quelle des Öffners enthält. Chrome versucht jedoch, den HTML-Code zu rendern, jedoch ohne CSS. so wie es aussieht.
Dave Land
@ Johnny5 ist möglicherweise als Hinweis in der Antwort erwähnenswert javascript:, der beim Kopieren / Einfügen in einigen Browsern abgeschnitten wird. Hatte gerade dieses Problem in Chrome.
Bryan
12

Wenn Sie das Dokument in Chrome laden, wird in der Developer|ElementsAnsicht der HTML-Code angezeigt, der von Ihrem JS-Code bearbeitet wird. Es handelt sich nicht direkt um HTML-Text, und Sie müssen alle interessierenden Elemente öffnen (entfalten), aber Sie können den generierten HTML-Code effektiv überprüfen.

Carl Smotricz
quelle
11
In Google Chrome können Sie in Inspect Element mit der rechten Maustaste auf ein Element klicken und "Als HTML kopieren"
JasonPlutext
3
@ Jason Vielen Dank dafür. Wenn Sie mit der rechten Maustaste auf das <html> -Element klicken und "Als HTML kopieren" auswählen, habe ich genau das erhalten, was ich heute in Chrome benötigt habe.
DaveGauer
11

Haben Sie in der Webentwickler-Symbolleiste die Optionen Tools -> Validate HTMLoder ausprobiert Tools -> Validate Local HTML?

Die Validate HTMLOption sendet die URL an den Validator, was bei öffentlich zugänglichen Websites gut funktioniert. Die Validate Local HTMLOption sendet den HTML-Code der aktuellen Seite an den Validator. Dies funktioniert gut mit Seiten hinter einem Login oder solchen, die nicht öffentlich zugänglich sind.

Sie sollten auch versuchen , View Source - Diagramm (auch als Firefox - Add-on ). Ein interessanter Hinweis dort:

Frage: Warum ändert View Source Chart meine XHTML-Tags in HTML-Tags?

A. Das tut es nicht. Der Browser nimmt diese Änderungen vor. VSC zeigt lediglich an, was der Browser mit Ihrem Code gemacht hat. Am häufigsten: Selbstschließende Tags verlieren ihren schließenden Schrägstrich (/). Weitere Informationen finden Sie in diesem Artikel zu Rendered Source (archive.org) .

Vergessenes Semikolon
quelle
Ich habe das Downvote nicht durchgeführt, aber "HTML validieren" sendet nicht das generierte HTML, sondern die Originalquelle. (Siehe die bearbeitete Frage)
Pekka
Ich habe es gerade versucht. Es scheint nicht, dass die generierte Quelle (dh die Quelle mit DOM-Änderungen) gesendet wird, sondern die Quelle, die mit der Option "Quelltext anzeigen" von Firefox angezeigt wird.
Jeremy Kauffman
Ändern Sie die Torpfosten auf mich!
Vergessenes Semikolon
1
Ich dachte, "View Generated Source" würde diesen Teil der Frage klar machen, aber nach den 4 Antworten zu urteilen, habe ich mich eindeutig geirrt :)
Jeremy Kauffman
Der Link zum View Source Chart ist defekt
Casebash
6

Verwenden der Firefox Web Developer-Symbolleiste ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Gehen Sie einfach zu Quelle anzeigen -> Generierte Quelle anzeigen

Ich benutze es die ganze Zeit für genau das Gleiche.

lewsid
quelle
Und ich sehe jetzt Ihre Bearbeitung, in der Sie das Doctype-Problem mit der Symbolleiste zitieren. Das ist eine faire Kritik und ich habe nichts anderes vorzuschlagen.
lewsid
3
Funktioniert hervorragend und ist jetzt direkt in Vanilla Firefox integriert. Strg + A, Rechtsklick, E. Siehe auch das ausgezeichnete Lesezeichen, das Johnny5 gefunden hat.
Jon Coombs
In Firefox: Klicken Sie mit der rechten Maustaste auf die Seite mit dem generierten Inhalt, den Sie anzeigen möchten, und dann auf Web Developer> Quelle anzeigen> Generierte Quelle anzeigen
Mark Gavagan
5

Ich hatte das gleiche Problem und habe hier eine Lösung gefunden:

http://ubuntuincident.wordpress.com/2011/04/15/scraping-ajax-web-pages/

Um Crowbar zu verwenden, das Tool von hier:

http://simile.mit.edu/wiki/Crowbar (jetzt (2015-12) 404s)
Wayback-Maschinenlink:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ Wiki / Brechstange

Es gab mir das fehlerhafte, ungültige HTML.

Adamvagyok
quelle
Schauen Sie sich auch die anderen Teile dieser Serie an: Teil 2 , Teil 3 .
Jabba
Brechstange scheint nicht mehr da zu sein
Mousey
Nicht zu benutzerfreundlich, kann aber dennoch über SVN heruntergeladen werden: devres.zoomquiet.io/data/20110810165553/index.html
adamvagyok
5

Dies ist eine alte Frage, und hier ist eine alte Antwort, die für mich seit vielen Jahren einwandfrei funktioniert hat , aber nicht mehr, zumindest nicht ab Januar 2016:

Das Lesezeichen "Generated Source" von SquareFree macht genau das, was Sie wollen - und wird im Gegensatz zum ansonsten feinen "alten Gold" von @ Johnny5 als Quellcode angezeigt (anstatt zumindest im Fall von Google vom Browser normal gerendert zu werden Chrome auf Mac):

https://www.squarefree.com/bookmarklets/webdevel.html#generated_source

Leider verhält es sich genauso wie das "alte Gold" von @ Johnny5: Es wird nicht mehr als Quellcode angezeigt. Es tut uns leid.

Dave Land
quelle
4

In Firefox drücken Sie einfach Strg-A (wählen Sie alles auf dem Bildschirm aus) und klicken Sie dann mit der rechten Maustaste auf "Auswahlquelle anzeigen". Dadurch werden alle Änderungen erfasst, die JavaScript am DOM vorgenommen hat.

Mike_K
quelle
Funktioniert nicht, wenn die Seite mit der rechten Maustaste gehakt hat.
Kevin Whitefoot
4

alert (document.documentElement.outerHTML);

JohnnyFaldo
quelle
3

Warum nicht die URL-Leiste eingeben?

javascript:alert(document.body.innerHTML)
Mike
quelle
1
+1: Hat in der Adressleiste in IE 10 nicht funktioniert, aber in der Konsole der IE-Entwicklungstools hat es wunderbar funktioniert.
SausageFingers
3

Klicken Sie auf der Registerkarte Elemente mit der rechten Maustaste auf den HTML-Knoten> Kopieren> Element kopieren und fügen Sie ihn in einen Editor ein.

Wie oben erwähnt, ist die ursprüngliche Quelle nach der Konvertierung der Quelle in einen DOM-Baum nicht mehr im Browser vorhanden. Alle Änderungen, die Sie vornehmen, beziehen sich auf das DOM und nicht auf die Quelle.

Sie können das geänderte DOM jedoch wieder in HTML analysieren, sodass Sie die "generierte Quelle" sehen können.

  1. Öffnen Sie in Chrome die Entwicklertools und klicken Sie auf die Registerkarte Elemente.
  2. Klicken Sie mit der rechten Maustaste auf das HTML-Element.
  3. Wählen Sie "Kopieren"> "Element kopieren".
  4. In einen Editor einfügen.

Sie können das aktuelle DOM jetzt als HTML-Seite anzeigen.

Dies ist nicht das vollständige DOM

Beachten Sie, dass das DOM nicht vollständig durch ein HTML-Dokument dargestellt werden kann. Dies liegt daran, dass das DOM viel mehr Eigenschaften hat als das HTML Attribute hat. Dies wird jedoch einen vernünftigen Job machen.

überleuchtet
quelle
2

Ich denke, IE Dev Tools (F12) hat; Ansicht> Quelle> DOM (Seite)

Sie müssten das DOM kopieren, einfügen und speichern, um es an den Validator zu senden.

Will Hancock
quelle
Vielleicht möchten Sie auch; Datei> Internet Explorer-Ansichtsquelle anpassen> Editor zum einfachen Speichern, wenn Sie die oben genannten Schritte ausführen.
Will Hancock
1

Das einzige, was ich gefunden habe, ist die BetterSource- Erweiterung für Safari. Dies zeigt Ihnen, dass die manipulierte Quelle des Dokuments nur ein Nachteil ist, der für Firefox nicht im entferntesten vergleichbar ist

Ellisgeek
quelle
1

Mit dem folgenden Javascript-Code-Snippet erhalten Sie die vollständige, von Ajax gerenderte HTML-generierte Quelle. Browserunabhängiger. Genießen :)

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one as lower versions of firefox
        //does not support element.outerHTML property
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
  }


 var outerhtml = outerHTML(document.getElementsByTagName('html')[0]);
var node = document.doctype;
var doctypestring="";
if(node)
{
     // IE8 and below does not have document.doctype and you will get null if you access it.

 doctypestring = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';
         }
         else

         {

             // for IE8 and below you can access doctype like this

         doctypestring = document.all[0].text;
         }
doctypestring +outerhtml ;
Sathish
quelle
Ich denke, dies würde spezifische Anweisungen zur Verwendung erfordern. Ich gehe davon aus, dass Sie den Code in die vorhandene Seite einfügen würden, aber wohin würde die Ausgabe gehen?
Jon Coombs
0

Ich konnte ein ähnliches Problem lösen, indem ich die Ergebnisse des Ajax-Aufrufs an der Konsole protokollierte. Dies war das zurückgegebene HTML und ich konnte leicht alle Probleme sehen, die es hatte.

In meiner .done () -Funktion meines Ajax-Aufrufs habe ich console.log (Ergebnisse) hinzugefügt, damit ich den HTML-Code in der Debugger-Konsole sehen kann.

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}

ebarke
quelle
@erbarke, könnten Sie Ihre Antwort näher erläutern (Code, detaillierter Aktionsablauf)?
Artem