cómo obtener HTML completamente calculado (en lugar de HTML de origen)?

Dada una página web que usa muchos javascript para generar su HTML, ¿cómo puedo obtener el código HTML final analizado por el navegador en lugar del HTML de origen? En otras palabras, supongamos que una página tiene muchas etiquetas que rodean las funciones de JavaScript que, cuando son llamadas, devuelven algo de HTML. Cuando veo el origen de la página, veo la llamada a la función del script, no el HTML que produce.cómo obtener HTML completamente calculado (en lugar de HTML de origen)?

¿Cómo podría obtener todo el código HTML producido por una página web?

Me he dado cuenta de que Firebug parece capaz de ver el HTML en lugar de las secuencias de comandos, pero no parece tener ninguna forma de guardar toda la página, solo pequeños segmentos de la misma.

Actualización:

Gracias por todas las respuestas. Sin embargo, todavía no obtengo el HTML que veo en la consola de Firebug con ninguna de esas técnicas. Para mi página de ejemplo, estoy usando la pestaña 'Información' de mi propio perfil de Facebook. Si ve el código fuente en esa página, verá muchas secuencias de comandos con el título 'big_pipe.onPageletArrive()'. Sin embargo, si lo ves en Firebug, cada una de esas llamadas a funciones se procesa en HTML. Intenté hacer clic con el botón derecho en la etiqueta en Firebug, en Ver fuente generada en la barra de herramientas de Webdev y en la sugerencia de Chrome, pero todos me dieron la llamada del script, no el HTML.

¿Alguna otra idea?

Actualización 2:

Cuando me dijo que cada una de esas funciones renders a HTML en Firebug, que no era del todo correcto. Solo se procesan si los selecciono en la página y haz clic con el botón derecho en> Examinar elemento. Entonces parece renderizarlo. Entonces, tal vez mi pregunta se haya convertido en cómo lograr que Firebug presente automáticamente todo el HTML para que pueda seleccionarlo y guardarlo. (O estoy abierto a cualquier otra solución para agarrar este HTML).

Fuente

2011-06-15 mix

Puede simplemente hacer clic en la pestaña HTML, luego seleccionar la etiqueta en Firebug, luego hacer clic derecho y seleccionar "Copiar HTML". Tenga en cuenta que esto le dará tanto los scripts como su resultado. – squidbe

En Chrome, haga clic con el botón derecho y seleccione Inspeccionar elemento. Se te presentará una fuente HTML completa. La pestaña Red también le mostrará la fuente que regresó del servidor. – Jon

Si Ajax está instalando y actualizando contenido, no hay un HTML "final", solo una instantánea actual. – mrk

Con la pestaña HTML de Firebug, puede hacer clic con el botón derecho en el elemento <html> y hacer clic en "Copiar HTML".

Puede hacer lo mismo con las Herramientas del desarrollador en Chrome/Safari.

Fuente

2011-06-15 20:48:43 thirtydot

Extrañamente en Chrome, Safari y Firefox en Mac Veo el html generado pero cuando selecciono "copiar html" copia el html generado previamente. Espero que esto sea solo un error. –

Esto es lo que intenté al principio, pero no funciona: faltan piezas. El uso del elemento inspector muestra que "Algunos elementos estaban ocultos [botón: cargar los 161 elementos]". Al hacer clic en eso no hubo diferencia: no lo copió. Finalmente lo arregló con la respuesta que actualmente tiene -4 votos (es decir, 4 votos a favor). – Luc

En la consola de Chrome, puede usar esto: 'copy (document.querySelector ('html'). InnerHTML)'. Esto copia el HTML "calculado" al portapapeles. – thirtydot

El Web Developer Toolbar para Firefox tiene una opción "Ver origen generado" que proporciona esta funcionalidad.

Fuente

2011-06-15 20:48:07

Respuesta perfecta. Lo uso todo el tiempo. – riwalk

Dato interesante: Se puede lograr el mismo efecto o similar seleccionando todo el texto en la página con Ctrl + A y seleccionando "Ver origen de selección" en el menú contextual. De hecho, cuando haces clic en el botón "Ver fuente generada" en la barra de herramientas del desarrollador web, realmente selecciona todo el texto en la página, ¡así que es probable que sea el mismo! –

-3

Generalmente no es posible. Aquí es extracto de mi bookmarklet que se basa en no estándar outerHTML:

with (window.open("")) { 
    document.open("text/html"); 
    document.write("<PRE>"); 
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">")); 
    document.write("</PRE>"); 
    document.close(); 
    document.title = "DOM Snapshot:" + opener.document.title; 
    focus(); 
}

Nota: DTD no está y no recuperables en absoluto.

Fuente

2011-06-15 21:04:28

cómo obtener HTML completamente calculado (en lugar de HTML de origen)?

Respuesta

Cuestiones relacionadas