html - pagina - ¿La mejor forma de ver el origen generado de la página web?

generador de tags

Question

Estoy buscando una herramienta que me proporcione la fuente generada adecuada, incluidos los cambios DOM realizados por las solicitudes AJAX para la entrada en el validador de W3. Probé los siguientes métodos:

1. Barra de herramientas del desarrollador web : genera un origen no válido de acuerdo con el tipo de documento (por ejemplo, elimina la porción de cierre automático de las etiquetas). Pierde la porción de tipo de documento de la página.
2. Firebug - Soluciona posibles defectos en la fuente (p. Ej., Etiquetas no cerradas). También pierde la parte de tipo de documento de las etiquetas e inyecta la consola, que a su vez es HTML no válido.
3. Barra de herramientas del desarrollador de IE: genera una fuente no válida de acuerdo con el tipo de documento (por ejemplo, hace que todas las etiquetas sean mayúsculas, en contra de las especificaciones de XHTML).
4. Resaltar + Ver origen de selección - Frecuentemente difícil de obtener toda la página, también excluye el tipo de documento.

¿Existe algún programa o complemento que me brinde la versión actual exacta de la fuente, sin corregirla o cambiarla de alguna manera? Hasta ahora, Firebug parece ser el mejor, pero me preocupa que pueda solucionar algunos de mis errores.

Solución

Resulta que no hay una solución exacta a lo que quería, como explicó Justin. La mejor solución parece ser validar la fuente dentro de la consola de Firebug, a pesar de que contendrá algunos errores causados ​​por Firebug. También me gustaría agradecer a Forgotten Semicolon por explicar por qué "View Generated Source" no coincide con la fuente real. Si pudiera marcar 2 mejores respuestas, lo haría.

Answer 1

En la pestaña de elementos, haga clic con el botón derecho en el elemento html> copiar> copiar elemento y luego pegarlo en un editor.

Como se mencionó anteriormente, una vez que la fuente se ha convertido en un árbol DOM, la fuente original ya no existe en el navegador. Cualquier cambio que realice será en el DOM, no en la fuente.

Sin embargo, puede analizar el DOM modificado de nuevo en HTML, lo que le permite ver la "fuente generada".

1. En Chrome, abra las herramientas de desarrollador y haga clic en la pestaña de elementos.
2. Haga clic derecho en el elemento HTML.
3. Elija copiar> copiar elemento.
4. Pegar en un editor.

Ahora puede ver el DOM actual como una página HTML.

Este no es el DOM completo

Tenga en cuenta que DOM no puede representarse completamente con un documento HTML. Esto se debe a que el DOM tiene muchas más propiedades que el HTML tiene atributos. Sin embargo, esto hará un trabajo razonable.

Answer 2

¿Por qué no escribir esto es la barra de url?

javascript:alert(document.body.innerHTML)

Answer 3

Creo que las herramientas de desarrollo IE (F12) tienen; Ver> Fuente> DOM (Página)

Debería copiar y pegar el DOM y guardarlo para enviarlo al validador.

Answer 4

El siguiente fragmento de código de javascript le proporcionará la fuente generada en formato HTML ajax completa. Navegador independiente. Disfruta :)

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 ;

Answer 5

En Firefox, simplemente ctrl-a (selecciona todo en la pantalla) y luego haz clic derecho en "Ver fuente de selección". Esto captura cualquier cambio realizado por JavaScript en el DOM.

Answer 6

En la Barra de herramientas del desarrollador web, ¿ha probado las Tools -> Validate HTML o Tools -> Validate Local HTML opciones de Tools -> Validate Local HTML ?

La opción Validate HTML envía la URL al validador, que funciona bien con sitios que se enfrentan públicamente. La opción Validate Local HTML envía el Validate Local HTML la página actual al validador, que funciona bien con páginas detrás de un inicio de sesión, o aquellas que no son de acceso público.

También es posible que desee probar View Source Chart (también como complemento de FireFox ). Una nota interesante allí:

P. ¿Por qué View View Chart cambia mis etiquetas XHTML a etiquetas HTML?

A. No. El navegador está haciendo estos cambios, VSC simplemente muestra lo que el navegador ha hecho con su código. Más común: las etiquetas de cierre automático pierden su barra de cierre (/). Consulte este artículo sobre Fuente procesada para obtener más información (archive.org) .

Answer 7

Esta es una vieja pregunta, y aquí hay una vieja respuesta que una vez funcionó perfectamente para mí durante muchos años , pero ya no existe, al menos no a partir de enero de 2016:

El bookmarklet "Fuente generada" de SquareFree hace exactamente lo que usted desea y, a diferencia del "oro viejo" de @ Johnny5, se muestra como código fuente (en lugar de ser traducido normalmente por el navegador, al menos en el caso de Google Chrome en Mac):

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

Desafortunadamente, se comporta como el "viejo oro" de @ Johnny5: ya no aparece como código fuente. Lo siento.

Answer 8

Justin está muerto. El punto clave aquí es que HTML es solo un lenguaje para describir un documento. Una vez que el navegador lo lee, se va . Las etiquetas abiertas, las etiquetas de cierre y el formateo están a cargo del analizador y luego desaparecen . Cualquier herramienta que muestre que HTML la genera en función del contenido del documento, por lo que siempre será válida.

Tuve que explicar esto a otro desarrollador web una vez, y tardó un poco en aceptarlo.

Puede probarlo usted 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>

Las etiquetas no cerradas y los nombres de las etiquetas en mayúsculas desaparecieron, porque ese HTML se analizó y descartó después de la segunda línea.

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

Dicho esto, la forma más sencilla de obtener la representación HTML del documento es esta:

document.documentElement.innerHTML

Answer 9

Lo único que encontré es la extensión BetterSource para Safari. Esto le mostrará la fuente manipulada del documento. El único inconveniente es que no tiene nada que ver para Firefox.

Answer 10

Sé que esta es una publicación anterior, pero acabo de encontrar esta pieza de oro . Esto es viejo (2006), pero aún funciona con IE9. Yo personalmente agregué un marcador con esto.

Solo copia y pega esto en la barra de direcciones de tu navegador:

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

En cuanto a firefox, la barra de herramientas de desarrollador web hace el trabajo. Normalmente uso esto, pero a veces, algunos controles sucios de terceros asp.net generan diferentes marcas basadas en el agente de usuario ...

EDITAR

Como Bryan señaló en el comentario, algunos navegadores eliminan la parte javascript: al copiar / pegar en la barra de direcciones. Acabo de probar y ese es el caso con IE10.

Answer 11

Si carga el documento en Chrome, la vista de Developer|Elements le mostrará el código HTML marcado por su código JS. No es directamente texto HTML y debe abrir (desplegar) cualquier elemento de interés, pero efectivamente puede inspeccionar el HTML generado.

Answer 12

Tuve el mismo problema, y ​​encontré aquí una solución:

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

Entonces, para usar Crowbar, la herramienta desde aquí:

http://simile.mit.edu/wiki/Crowbar (ahora (2015-12) 404s)
enlace de máquina de retorno:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar

Me dio el HTML defectuoso y no válido.

Answer 13

Uso de la barra de herramientas del desarrollador web de Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Simplemente vaya a Ver código fuente -> Ver origen generado

Lo uso todo el tiempo para exactamente lo mismo.

Answer 14

alerta (document.documentElement.outerHTML);

Answer 15

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

El problema al que te estás enfrentando es que, una vez que las solicitudes ajax modifican una página, el HTML actual solo existe dentro del DOM del navegador: ya no hay ningún HTML fuente independiente que puedas validar aparte de lo que puedes sacar del DOM.

Como ha observado, el DOM de IE almacena las etiquetas en mayúsculas, corrige las etiquetas no cerradas y realiza muchas otras alteraciones en el HTML que obtuvo originalmente. Esto se debe a que los navegadores generalmente son muy buenos para tomar HTML con problemas (por ejemplo, etiquetas no cerradas) y solucionar esos problemas para mostrar algo útil para el usuario. Una vez que el HTML ha sido canonicalizado por IE, el código HTML original se pierde esencialmente desde la perspectiva del DOM, hasta donde yo sé.

Lo más probable es que Firefox haga menos de estos cambios, por lo que Firebug es probablemente la mejor opción.

Una opción final (y más intensiva en mano de obra) puede funcionar para páginas con alteraciones ajax simples, por ejemplo, obtener algo de HTML del servidor e importarlo a la página dentro de un elemento en particular. En ese caso, puede usar el violín o una herramienta similar para unir manualmente el HTML original con el HTML de Ajax. Probablemente esto sea más problemático de lo que vale, y es propenso a errores, pero es una posibilidad más.

[Respuesta original aquí a la pregunta original]

Fiddler ( http://www.fiddlertool.com/ ) es una herramienta gratuita, independiente del navegador, que funciona muy bien para obtener el HTML exacto recibido por un navegador. Le muestra los bytes exactos en el cable, así como el contenido decodificado / descomprimido / etc que puede alimentar en cualquier herramienta de análisis HTML. También muestra encabezados, tiempos, estado HTTP y muchas otras cosas buenas.

También puede usar el violín para copiar y reconstruir solicitudes si desea probar cómo un servidor responde a encabezados levemente diferentes.

Fiddler funciona como un servidor proxy, ubicado entre su navegador y el sitio web, y registra el tráfico en ambos sentidos.