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

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.

[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 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

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.

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.

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) .

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.

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.

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.

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.

alert (document.documentElement.outerHTML);

Warum nicht die URL-Leiste eingeben?

javascript:alert(document.body.innerHTML)

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.

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.

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

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 ;

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");
    });
}

Schauen Sie sich die Chrome-Erweiterung "View Rendered Source" an:

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/