70 votos

La mejor Manera de Ver código Fuente Generado de la Página web?

Estoy buscando una herramienta que me va a dar la adecuada fuente generado, incluyendo DOM cambios realizados por peticiones AJAX para la entrada en W3 del validador. He probado los siguientes métodos:

  1. Web Developer Toolbar - Genera fuente inválida de acuerdo a la doc-tipo (por ejemplo, se elimina el auto de cierre de la porción de etiquetas). Pierde el doctype parte de la página.
  2. Firebug - Corrige posibles defectos en la fuente (por ejemplo, etiquetas mal cerradas). También pierde doctype parte de las etiquetas y se inyecta la consola en sí no es válido HTML.
  3. IE Developer Toolbar - Genera fuente inválida de acuerdo a la doc-tipo (por ejemplo, que hace todas las etiquetas en mayúsculas, en contra de la especificación XHTML).
  4. Destacar + Selección de la Vista de Origen - a Menudo difíciles de obtener la totalidad de la página, también excluye doc-tipo.

¿Hay algún programa o add-on, hay que me dará la exacta de la versión actual de la fuente, sin reparar o cambiar de alguna manera? Hasta ahora, Firebug parece que es la mejor, pero me preocupa pensar que puede corregir algunos de mis errores.

Solución

Resulta que no hay ninguna solución exacta a lo que yo quería como Justin explicó. La mejor solución parece ser la de validar la fuente dentro de Firebug de la consola, a pesar de contener algunos errores causados por el Firebug. También me gustaría agradecer a Olvidar el punto y Coma para explicar por qué "Ver código Fuente Generado" no coincide con la verdadera fuente. Si pudiera marcar los 2 mejores respuestas, yo lo haría.

30voto

Justin Grant Puntos 25644

[actualización en respuesta a más detalles en la edición pregunta]

El problema está ejecutando es que, una vez que una página es modificada por peticiones ajax, HTML actual sólo existe dentro del navegador DOM-- ya no hay ninguna fuente independiente HTML que pueda validar que usted puede sacar de la DOM.

Como usted ha observado, es decir, DOM tiendas de etiquetas en mayúsculas, corrige etiquetas mal cerradas, y hace un montón de otras alteraciones en el HTML, lo recibió originalmente. Esto es debido a que los navegadores son generalmente muy bueno en tomar HTML con problemas (por ejemplo, etiquetas mal cerradas) y en la fijación de los problemas para mostrar algo útil para el usuario. Una vez que el HTML ha sido canonizadas por el IE, la fuente original de HTML es esencialmente perdido de la DOM de la perspectiva, que yo sepa.

Firefox más likley hace menos de estos cambios, por lo que Firebug es probablemente su mejor apuesta.

Un final (y más intensiva en mano de obra) opción de trabajo para las páginas con ajax simple alteraciones, por ejemplo, ir a buscar algo de HTML desde el servidor y la importación de esto en la página dentro de un elemento en particular. En ese caso, puede usar fiddler o herramienta similar manualmente unir el HTML original con el Ajax HTML. Este es probablemente más problemas de lo que vale, y es propenso a errores, pero es una posibilidad más.

[Respuesta Original aquí a la pregunta original]

El violinista (http://www.fiddlertool.com/) es un navegador gratuito independiente de la herramienta que funciona muy bien para ir a buscar el HTML exacto recibido por un navegador. Se muestra exacta de bytes en el cable, así como decodificado/descomprimido en/etc el contenido que usted puede alimentar a todo el código HTML de la herramienta de análisis. También muestra los encabezados, tiempos, estado de HTTP, y un montón de otras cosas buenas.

Usted también puede usar fiddler para copiar y reconstruir las solicitudes si quieres probar cómo un servidor responde a ligeramente diferentes cabeceras.

El violinista funciona como un servidor proxy, sentado entre su navegador y el sitio web, y los registros de tráfico que va en ambos sentidos.

28voto

Sidnicious Puntos 15187

Justin está muerto. El punto clave aquí es que HTML es simplemente un lenguaje para la descripción de un documento. Una vez que el navegador lee, se ha ido. Abierto las etiquetas, etiquetas de cierre, y el formato cuidado por el analizador y luego desaparecen. Cualquier herramienta que muestra el HTML es la generación de la misma sobre la base del contenido del documento, por lo que siempre será válido.

Tuve que explicarle esto a otra web developer una vez, y tomó un poco de tiempo para que él acepte.

Puedes probar por ti mismo en cualquier consola de JavaScript:

el = document.createElement('div');
el.innerHTML = "<p>Some text<P>More text";
el.innerHTML; // <p>Some text</p><p>More text</p>

La onu-cerrado etiquetas y nombres de etiquetas en mayúsculas se han ido, ya que el HTML se ha analizado y descartado después de que la segunda línea.

La forma correcta de modificar el documento de JavaScript con document métodos (createElement, appendChild, setAttribute, etc.) y podrás observar que no hay ninguna referencia a las etiquetas o de la sintaxis HTML en cualquiera de esas funciones. Si usted está utilizando document.write, innerHTML, o HTML habla llamadas a modificar sus páginas, la única forma de validar que es para coger lo que usted está poniendo en ellos y validar el HTML por separado.

Dicho esto, la forma más sencilla para llegar a la representación HTML de este documento es:

document.documentElement.innerHTML

12voto

Johnny5 Puntos 2321

Sé que este es un viejo post, pero acabo de encontrar esta pieza de oro. Esto es viejo (2006), pero aún funciona con IE9. Yo personalmente añadido un marcador con esto.

Sólo copiar y pegar esto en tu barra de direcciones del navegador:

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

Como para firefox, web del desarrollador de la herramienta de la barra que hace el trabajo. Yo suelo usar esto, pero a veces, alguna sucia 3ª parte asp.net controles genera diferentes marcas basados en el agente de usuario...

11voto

Carl Smotricz Puntos 36400

Si carga el documento en Chrome, el Developer|Elements de la HTML, ya que tocaba la lira por tu código JS. No es directamente el texto HTML y tienes que abrir (desplegar) los elementos de interés, pero de manera muy eficaz a inspeccionar el código HTML generado.

11voto

En la Web Developer Toolbar, ¿has probado el Tools -> Validate HTML o Tools -> Validate Local HTML opciones?

La Validate HTML opción envía la dirección url del validador, que funciona bien con públicamente frente a sitios. La Validate Local HTML opción envía la corriente de la página HTML para el validador, que funciona bien con las páginas detrás de un login, o aquellos que no son de acceso público.

Usted puede también intentar la Vista de Origen de Gráfico (también como complemento de FireFox). Una interesante nota:

P. ¿por Qué el Origen de la Vista de Gráfico cambiar mis etiquetas XHTML para las etiquetas HTML?

A. no. El navegador está haciendo estos cambios, VSC simplemente muestra lo que el navegador se ha hecho con el código. Los más comunes: auto etiquetas de cierre perder su cierre de barra diagonal (/). Ver este artículo en el Dictado de Origen para obtener más información (archive.org).

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X