¿La mejor manera de ver la fuente generada de la página web?

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

1. Barra de herramientas del desarrollador web : genera una fuente no válida según el tipo de documento (por ejemplo, elimina la parte de cierre automático de las etiquetas). Pierde la parte de tipo de documento de la página.
2. Firebug : corrige posibles fallas en la fuente (por ejemplo, etiquetas sin cerrar). También pierde la parte del tipo de documento de las etiquetas e inyecta la consola, que en sí misma es HTML no válido.
3. Barra de herramientas para desarrolladores de IE: genera una fuente no válida de acuerdo con el tipo de documento (por ejemplo, hace que todas las etiquetas estén en mayúsculas, según las especificaciones XHTML).
4. Resaltar + Ver fuente de selección: con frecuencia es difícil obtener toda la página, también excluye el tipo de documento.

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

Solución

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

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

El problema con el que se está encontrando es que, una vez que una página es modificada por solicitudes ajax, el HTML actual existe solo dentro del DOM del navegador; ya no hay ningún código fuente HTML independiente que pueda validar más que lo que puede extraer DOM.

Como ha observado, el DOM de IE almacena las etiquetas en mayúsculas, corrige las etiquetas no cerradas y hace muchas otras alteraciones en el HTML que obtuvo originalmente. Esto se debe a que los navegadores son generalmente muy buenos para tomar HTML con problemas (por ejemplo, etiquetas no cerradas) y solucionar esos problemas para mostrar algo útil al usuario. Una vez que el HTML ha sido canonicalizado por IE, el HTML fuente 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 probablemente sea tu mejor opción.

Una opción final (y más laboriosa) puede funcionar para páginas con alteraciones simples de Ajax, 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 Fiddler o una herramienta similar para unir manualmente el HTML original con el HTML Ajax. Esto probablemente 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 e independiente del navegador que funciona muy bien para obtener el código HTML exacto recibido por un navegador. Le muestra los bytes exactos en el cable, así como el contenido descodificado / descomprimido / etc.que puede introducir en cualquier herramienta de análisis HTML. También muestra encabezados, tiempos, estado HTTP y muchas otras cosas buenas.

También puede usar Fiddler para copiar y reconstruir solicitudes si desea probar cómo responde un servidor a encabezados ligeramente diferentes.

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

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, desaparece . El analizador se encarga de las etiquetas abiertas, las etiquetas de cierre y el formateo y luego desaparecen . Cualquier herramienta que te muestre HTML lo está generando en base al contenido del documento, por lo que siempre será válido.

Tuve que explicarle esto a otro desarrollador web una vez, y él 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 se descartó después de la segunda línea.

La forma correcta de modificar el documento de JavaScript está con documentmétodos ( createElement, appendChild, setAttribute, etc.) y vas a observar que no hay ninguna referencia a las etiquetas HTML o de sintaxis en cualquiera de esas funciones. Si está utilizando document.write, innerHTMLu otras llamadas que hablan HTML para modificar sus páginas, la única forma de validarlo es captar 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 la siguiente:

document.documentElement.innerHTML

Sé que esta es una publicación antigua, pero acabo de encontrar esta pieza de oro . Esto es antiguo (2006), pero todavía funciona con IE9. Personalmente agregué un marcador con esto.

Simplemente copie y pegue esto en la barra de direcciones de su 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 del desarrollador web hace el trabajo. Normalmente uso esto, pero a veces, algunos controles asp.net sucios de terceros generan diferentes marcas basadas en el agente de usuario ...

EDITAR

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

Si carga el documento en Chrome, la Developer|Elementsvista le mostrará el HTML manipulado 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.

En la barra de herramientas para desarrolladores web, ¿ha probado las opciones Tools -> Validate HTMLo Tools -> Validate Local HTML?

La Validate HTMLopción envía la URL al validador, que funciona bien con sitios públicos. La Validate Local HTMLopción envía el HTML de 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 puede probar Ver gráfico fuente (también como complemento de FireFox ). Una nota interesante ahí:

P. ¿Por qué Ver gráfico fuente cambia mis etiquetas XHTML a etiquetas HTML?

R. No es así. El navegador está realizando 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 Rendered Source para obtener más información (archive.org) .

Usando la barra de herramientas para desarrolladores web de Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Simplemente vaya a Ver fuente -> Ver fuente generada

Lo uso todo el tiempo para exactamente lo mismo.

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

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

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

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

Me dio el HTML defectuoso e inválido.

Esta es una pregunta antigua, y aquí hay una respuesta antigua que una vez me ha funcionado perfectamente durante muchos años , pero que ya no funciona, al menos no en enero de 2016:

El marcador "Fuente generada" de SquareFree hace exactamente lo que usted desea y, a diferencia del "oro viejo" de @ Johnny5, que por lo demás es bueno, se muestra como código fuente (en lugar de ser procesado 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 "oro viejo" de @ Johnny5: ya no aparece como código fuente. Lo siento.

En Firefox, simplemente presione Ctrl-A (seleccione todo en la pantalla) y luego haga clic derecho en "Ver fuente de selección". Esto captura cualquier cambio realizado por JavaScript al DOM.

alerta (document.documentElement.outerHTML);

¿Por qué no escribir esta es la barra de direcciones?

javascript:alert(document.body.innerHTML)

En la pestaña de elementos, haga clic con el botón derecho en el nodo html> copiar> copiar elemento, luego pegue 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 volver a analizar el DOM modificado en HTML, lo que le permite ver la "fuente generada".

1. En Chrome, abra las herramientas para desarrolladores y haga clic en la pestaña de elementos.
2. Haz 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 el DOM no se puede representar completamente mediante un documento HTML. Esto se debe a que DOM tiene muchas más propiedades que atributos HTML. Sin embargo, esto hará un trabajo razonable.

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

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

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 se parece en nada a Firefox.

El siguiente fragmento de código javascript le proporcionará la fuente completa generada en HTML renderizado ajax. 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 ;

Echa un vistazo a la extensión de Chrome "Ver fuente renderizada":

https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/

Pude resolver un problema similar al registrar los resultados de la llamada ajax en la consola. Este fue el html devuelto y pude ver fácilmente cualquier problema que tuviera.

en mi función .done () de mi llamada ajax agregué console.log (resultados) para poder ver el html en la consola del depurador.

function GetReversals() {
    $("#getReversalsLoadingButton").removeClass("d-none");
    $("#getReversalsButton").addClass("d-none");

    $.ajax({
        url: '/Home/LookupReversals',
        data: $("#LookupReversals").serialize(),
        type: 'Post',
        cache: false
    }).done(function (result) {
        $('#reversalResults').html(result);
        console.log(result);
    }).fail(function (jqXHR, textStatus, errorThrown) {
        //alert("There was a problem getting results.  Please try again. " + jqXHR.responseText + " | " + jqXHR.statusText);
        $("#reversalResults").html("<div class='text-danger'>" + jqXHR.responseText + "</div>");
    }).always(function () {
        $("#getReversalsLoadingButton").addClass("d-none");
        $("#getReversalsButton").removeClass("d-none");
    });
}