it-swarm.com.de

Bester Weg, um die generierte Quelle einer Webseite anzuzeigen?

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

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

Gibt es ein Programm oder ein Add-On, das mir die genaue aktuelle Version der Quelle gibt, ohne sie zu reparieren oder in irgendeiner Weise zu ändern? Bisher scheint Firebug der beste zu sein, aber ich mache mir Sorgen, dass es einige meiner Fehler korrigiert.

Lösung

Es stellt sich heraus, dass es keine exakte Lösung für das gibt, was ich wollte, wie Justin erklärte. Die beste Lösung scheint die Überprüfung der Quelle in der Firebug-Konsole zu sein, auch wenn sie einige durch Firebug verursachte Fehler enthält. Ich danke auch Forgotten Semicolon für die Erklärung, warum "View Generated Source" nicht mit der tatsächlichen Quelle übereinstimmt. Wenn ich 2 beste Antworten geben könnte, würde ich das tun.

80
Jeremy Kauffman

[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 modifiziert wurde, der aktuelle HTML-Code nur im DOM des Browsers vorhanden ist. Es gibt keinen unabhängigen Quell-HTML-Code mehr, den Sie validieren können, als das, was Sie aus dem DOM.

Wie Sie beobachtet haben, speichert das DOM des IE 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 HTML-Probleme mit sich bringen (z. B. nicht geschlossene Tags) und diese Probleme beheben, um dem Benutzer etwas Nützliches anzuzeigen. Sobald der HTML-Code durch den IE kanonisiert wurde, ist der ursprüngliche Quell-HTML-Code aus der Sicht des DOMs meines Wissens nach weitgehend verloren.

Meistens nimmt Firefox weniger Änderungen vor, daher ist Firebug wahrscheinlich die bessere Wahl. 

Eine letzte (und arbeitsintensivere) Option kann für Seiten mit einfachen Ajax-Änderungen funktionieren, z. Holen Sie sich etwas HTML vom Server und importieren Sie es in die Seite innerhalb eines bestimmten Elements. In diesem Fall können Sie mit dem Fiddler oder einem ähnlichen Werkzeug den ursprünglichen HTML-Code manuell mit dem Ajax-HTML-Code zusammenfügen. Dies ist wahrscheinlich mehr Ärger als es wert ist und ist 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 genau den HTML-Code eines Browsers abzurufen. Es zeigt Ihnen genaue Bytes auf dem Draht sowie dekodierte/entpackte/etc-Inhalte, die Sie in jedes HTML-Analysewerkzeug einspeisen können. Es zeigt auch Header, Timings, HTTP-Status und viele andere gute Dinge. 

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

Fiddler arbeitet als Proxy-Server, der sich zwischen Ihrem Browser und der Website befindet, und protokolliert den Datenverkehr in beide Richtungen.

32
Justin Grant

Justin ist tot am Der Schlüsselpunkt dabei ist, dass HTML nur eine Sprache zum Beschreiben eines Dokuments ist. Sobald der Browser es gelesen hat, ist gegangen. Open-Tags, Close-Tags und Formatierungen werden vom Parser übernommen und gehen dann weg. Jedes Tool, das HTML anzeigt, generiert generiert es basierend auf dem Inhalt des Dokuments.

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 die Namen der Großbuchstaben sind nicht mehr vorhanden, da dieser HTML-Code nach der zweiten Zeile analysiert und verworfen wurde.

Der richtige Weg, um das Dokument von JavaScript aus zu ändern, ist mit document-Methoden (createElement, appendChild, setAttribute usw.), und Sie werden feststellen, dass in keiner dieser Funktionen ein Hinweis auf Tags oder HTML-Syntax vorhanden ist. Wenn Sie document.write, innerHTML oder andere HTML-sprechende Aufrufe zum Ändern Ihrer Seiten verwenden, besteht die einzige Möglichkeit zur Validierung darin, den Inhalt der Seiten zu erfassen und diesen HTML-Code separat zu überprüfen.

Der einfachste Weg, um zur HTML-Darstellung des Dokuments zu gelangen, lautet folgendermaßen:

document.documentElement.innerHTML
34
s4y

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 dies einfach in die Adressleiste Ihres Browsers:

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

Was Firefox betrifft, so funktioniert die Webentwickler-Symbolleiste. Normalerweise verwende ich dies, aber manchmal erzeugen einige schmutzige Drittanbieter-asp.net-Steuerelemente unterschiedliche Markierungen basierend auf dem Benutzeragenten.

EDIT

Wie Bryan im Kommentar verwies, 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.

21
Johnny5

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

12
Carl Smotricz

Haben Sie in der Web Developer Toolbar die Optionen Tools -> Validate HTML oder Tools -> Validate Local HTML ausprobiert? 

Die Validate HTML-Option sendet die URL an den Prüfer, der sich gut für öffentlich zugängliche Websites eignet. Die Option Validate Local HTML sendet den HTML-Code der aktuellen Seite an den Prüfer. Dies funktioniert gut mit Seiten, die sich hinter einem Login befinden oder denen nicht öffentlich zugänglich ist.

Möglicherweise möchten Sie auch versuchen, Quelldiagramm anzeigen (auch als FireFox-Zusatz ). Eine interessante Anmerkung dort: 

Q. Warum ändert sich das View Source Chart in meine XHTML-Tags in HTML-Tags?

A. Das ist nicht der Fall. 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 (/). In diesem Artikel zu Rendered Source finden Sie weitere Informationen(archive.org) .

11

Dies ist eine alte Frage und hier ist eine alte Antwort darauf hat arbeitete einmal einwandfrei für mich für viele Jahre, aber nicht mehr, zumindest nicht ab Januar 2016:

Das Bookmarklet "Generated Source" von SquareFree macht genau das, was Sie wollen - und wird, anders als das ansonsten feine "alte Gold" von @ Johnny5, als Quellcode angezeigt (anstatt vom Browser normal dargestellt zu werden, zumindest bei Google) Chrome unter Mac):

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

Leider verhält es sich genauso wie das "alte Gold" von @ Johnny5: Es erscheint kein Quellcode mehr. Es tut uns leid.

5
Dave Land

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

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

Also, um Crowbar zu benutzen, das Tool von hier aus:

http://simile.mit.edu/wiki/Crowbar (jetzt (2015-12) 404s)
Rückverfolgungsmaschine link:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

Es gab mir das fehlerhafte, ungültige HTML.

5
adamvagyok

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

Gehen Sie einfach zu Quelltext anzeigen -> Generierte Quelltext anzeigen

Ich benutze es ständig für genau dasselbe.

5
lewsid

alert (document.documentElement.outerHTML);

4
JohnnyFaldo

In Firefox einfach Strg-a (alles auf dem Bildschirm auswählen) und dann mit der rechten Maustaste auf "Auswahlquelle anzeigen" klicken. Hiermit werden alle von JavaScript vorgenommenen Änderungen am DOM erfasst.

4
Mike_K

Warum nicht schreiben, das ist die URL?

javascript:alert(document.body.innerHTML)
3
Mike

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 bereits erwähnt, ist die ursprüngliche Quelle nach dem Konvertieren der Quelle in eine DOM-Struktur nicht mehr im Browser vorhanden. Alle von Ihnen vorgenommenen Änderungen betreffen das DOM und nicht die Quelle.

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

  1. Öffnen Sie in Chrome die Entwickler-Tools 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. Einfügen in einen Editor.

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-Attribut. Dies wird jedoch eine vernünftige Arbeit leisten.

3
superluminary

Ich glaube, IE dev tools (F12) hat; Ansicht> Quelle> DOM (Seite)

Sie müssen das DOM kopieren und einfügen und speichern, um es an den Prüfer zu senden.

2
Will Hancock

Mit dem folgenden JavaScript-Code-Snippet erhalten Sie den vollständigen von Ajax gerenderten HTML-Quellcode. Browserunabhängige. 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 ;
1
Sathish

Die einzige Erweiterung, die ich gefunden habe, ist die Erweiterung BetterSource für Safari. Diese zeigt Ihnen, dass die manipulierte Quelle des Dokuments nur nachteilig ist

1
ellisgeek

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

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

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

0
ebarke