Aktuelles HTML der mit AJAX-Anfragen erstellten Seite abrufen

Aktuelles HTML der mit AJAX-Anfragen erstellten Seite abrufen

Ich verwende also den Chrome/Chromium-Browser (könnte aber bei Bedarf Firefox verwenden).

Ich schaue mir Webseiten an, die (vermutlich) spontan mit AJAX erstellt werden (denken Sie daran, wie Sie bei Facebook nach unten scrollen und immer wieder Dinge auftauchen).

Ich möchte das HTML für eine solche Seite speichern, nachdem eine Menge Zeug geladen wurde, aber es wird nicht im DOM der Chromium Developer's Tools angezeigt und ein Rechtsklick auf „Speichern“ speichert nur die Originalseite, bevor AJAX das Zeug geladen hat.

Was kann ich machen?

Antwort1

Eine Möglichkeit, den Quellcode mit allen dynamisch geladenen Elementen zu erhalten, besteht in den Chrome Developer Tools ( F12). Wählen Sie das <HTML>Tag ganz am Anfang der Seite aus und kopieren Sie das Element ( CTRL+ C). Dadurch werden auch alle darin enthaltenen Daten (dynamisch geladen oder nicht) in Ihre Zwischenablage kopiert und Sie können sie dann an beliebiger Stelle einfügen.

Hier ist ein GIF, das den Vorgang zeigt:

Verfahren

.jsDer offensichtliche Nachteil besteht darin, dass Sie alle Dateien ( , , Bilder) manuell herunterladen und im selben Ordner wie die HTML-Datei speichern müssen .css(Tipp: Verwenden Sie die Registerkarte „Quellen“ in den Entwicklertools), wenn Sie die vollständige Website möchten. Alternativ können Sie die Links in der HTML-Quelle folgendermaßen ändern, wenn es Ihnen nichts ausmacht, dass einige Daten aus dem Internet abgerufen werden:

===ORIGINAL===

<img src="file.jpg">

===MODIFIED===

<img src="[url_of_website_that_you_want_to_save]/file.jpg">

Antwort2

Lesezeichen

Hier ist eine andere, viel einfachere Methode!

Speichern Sie den folgenden JavaScript-Code alsLesezeichen, und klicken Sie auf der Seite, deren generierte Quelle Sie anzeigen möchten, darauf:

javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&amp;');s=s.replace(/>/g,'&gt;');s=s.replace(/</g,'&lt;');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();

Klicken Sie hier, um den Vorgang zu vereinfachen!|JSFiddle

GIF: rahuldottech!

verwandte Informationen