Entonces, estoy usando el navegador Chrome/Chromium (podría usar Firefox, si es necesario).
Estoy viendo páginas web que se construyen "sobre la marcha" con (presumiblemente) AJAX (piense en cómo se desplaza hacia abajo en Facebook y las cosas siguen apareciendo y apareciendo).
Me gustaría guardar el html para dicha página después de haber cargado un montón de cosas, pero esto no aparece en el DOM de las herramientas de desarrollador de Chromium y al hacer clic derecho para Guardar solo se guarda la página original, antes de que se cargue AJAX. cosa.
¿Qué puedo hacer?
Respuesta1
Una forma de obtener el código fuente con todos los elementos cargados dinámicamente es a través de Chrome Developer Tools ( F12). Elija la <HTML>etiqueta al principio de la página y copie el elemento ( CTRL+ C). Esto también debería copiar todos los datos adjuntos, cargados dinámicamente o de otro modo en su portapapeles, y luego podrá pegarlos donde desee.
Aquí hay un gif que muestra el proceso:
El inconveniente obvio es que tendrás que descargar manualmente los archivos ( .js,, .cssimágenes) y guardarlos (consejo: usa la pestaña "fuentes" en Dev Tools) en la misma carpeta que el archivo html si quieres el archivo completo. sitio web, o alternativamente, modifique los enlaces en la fuente HTML de esta manera, si no le importa que se obtengan algunos datos de la web:
===ORIGINAL===
<img src="file.jpg">
===MODIFIED===
<img src="[url_of_website_that_you_want_to_save]/file.jpg">
Respuesta2
Marcador
Aquí tienes otro método, ¡mucho más fácil!
Guarde el siguiente código JavaScript comomarcadory haga clic en él en la página de la que desea ver la fuente generada:
javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&');s=s.replace(/>/g,'>');s=s.replace(/</g,'<');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();
¡Haga clic aquí para facilitar el proceso!|JSFiddle
GIF:
