Il modo migliore per visualizzare l'origine generata della pagina Web?

Sto cercando uno strumento che mi fornisca la sorgente generata corretta, comprese le modifiche DOM apportate dalle richieste AJAX per l'input nel validatore di W3. Ho provato i seguenti metodi:

1. Web Developer Toolbar - Genera sorgenti non valide in base al tipo di documento (es. Rimuove la porzione di tag a chiusura automatica). Perde la parte doctype della pagina.
2. Firebug - Corregge potenziali difetti nella sorgente (ad esempio tag non chiusi). Inoltre perde la parte doctype dei tag e inietta la console che a sua volta non è HTML.
3. Barra degli strumenti per sviluppatori IE - Genera sorgenti non valide in base al tipo di documento (ad esempio, rende tutti i tag maiuscoli, rispetto alle specifiche XHTML).
4. Evidenzia + Visualizza sorgente di selezione: spesso è difficile ottenere l'intera pagina, esclude anche il tipo di documento.

C'è qualche programma o componente aggiuntivo là fuori che mi darà la versione corrente esatta del sorgente, senza aggiustarlo o modificarlo in qualche modo? Finora, Firebug sembra il migliore, ma temo che possa correggere alcuni dei miei errori.

Soluzione

Si scopre che non esiste una soluzione esatta a ciò che volevo, come ha spiegato Justin. La soluzione migliore sembra essere quella di convalidare il sorgente all'interno della console di Firebug, anche se conterrà alcuni errori causati da Firebug. Vorrei anche ringraziare il punto e virgola dimenticato per aver spiegato perché "Visualizza sorgente generata" non corrisponde alla sorgente effettiva. Se potessi contrassegnare 2 risposte migliori, lo farei.

[aggiornamento in risposta a maggiori dettagli nella domanda modificata]

Il problema che stai riscontrando è che, una volta che una pagina viene modificata da richieste ajax, l'HTML corrente esiste solo all'interno del DOM del browser: non c'è più alcun HTML sorgente indipendente che puoi convalidare oltre a quello che puoi estrarre dal DOM.

Come hai osservato, il DOM di IE memorizza i tag in lettere maiuscole, corregge i tag non chiusi e apporta molte altre modifiche all'HTML che ha ottenuto in origine. Questo perché i browser sono generalmente molto bravi a prendere l'HTML con problemi (ad esempio tag non chiusi) e a risolverli per mostrare qualcosa di utile all'utente. Una volta che l'HTML è stato canonizzato da IE, l'HTML sorgente originale è essenzialmente perso dalla prospettiva del DOM, per quanto ne so.

È molto probabile che Firefox apporti meno di queste modifiche, quindi Firebug è probabilmente la soluzione migliore.

Un'opzione finale (e più laboriosa) può funzionare per le pagine con semplici alterazioni ajax, ad esempio prelevando un po 'di HTML dal server e importandolo nella pagina all'interno di un particolare elemento. In tal caso, puoi utilizzare Fiddler o uno strumento simile per unire manualmente l'HTML originale con l'HTML Ajax. Questo è probabilmente più un problema di quanto valga la pena ed è soggetto a errori, ma è un'altra possibilità.

[Risposta originale qui alla domanda originale]

Fiddler ( http://www.fiddlertool.com/ ) è uno strumento gratuito e indipendente dal browser che funziona molto bene per recuperare l'esatto HTML ricevuto da un browser. Ti mostra i byte esatti sul cavo così come il contenuto decodificato / decompresso / ecc che puoi inserire in qualsiasi strumento di analisi HTML. Mostra anche intestazioni, tempi, stato HTTP e molte altre cose buone.

È inoltre possibile utilizzare Fiddler per copiare e ricostruire le richieste se si desidera testare come un server risponde a intestazioni leggermente diverse.

Fiddler funziona come un server proxy, posizionato tra il browser e il sito Web e registra il traffico in entrambe le direzioni.

Justin è morto. Il punto chiave qui è che l'HTML è solo un linguaggio per descrivere un documento. Una volta che il browser lo legge, non c'è più . I tag aperti, i tag chiusi e la formattazione sono tutti gestiti dal parser e poi scompaiono . Qualsiasi strumento che ti mostri l'HTML lo sta generando in base al contenuto del documento, quindi sarà sempre valido.

Una volta ho dovuto spiegarlo a un altro sviluppatore web e gli ci è voluto un po 'per accettarlo.

Puoi provarlo tu stesso in qualsiasi console JavaScript:

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

I tag non chiusi e i nomi dei tag maiuscoli sono spariti, perché quell'HTML è stato analizzato e scartato dopo la seconda riga.

Il modo giusto per modificare il documento da JavaScript è con documenti metodi ( createElement, appendChild, setAttribute, etc.) e ti osserva che non c'è alcun riferimento a tag o HTML sintassi in una di queste funzioni. Se stai utilizzando document.write, innerHTMLo altre chiamate in lingua HTML per modificare le tue pagine, l'unico modo per convalidarlo è catturare ciò che stai inserendo in esse e convalidare tale HTML separatamente.

Detto questo, il modo più semplice per ottenere la rappresentazione HTML del documento è questo:

document.documentElement.innerHTML

So che questo è un vecchio post, ma ho appena trovato questo pezzo d'oro . Questo è vecchio (2006), ma funziona ancora con IE9. Ho aggiunto personalmente un segnalibro con questo.

Basta copiare e incollare questo nella barra degli indirizzi del browser:

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

Per quanto riguarda Firefox, la barra degli strumenti di sviluppo web fa il lavoro. Di solito lo uso, ma a volte, alcuni controlli asp.net di terze parti sporchi generano markup diversi in base all'agente utente ...

MODIFICARE

Come ha sottolineato Bryan nel commento, alcuni browser rimuovono la javascript:parte durante la copia / incolla nella barra degli indirizzi. Ho appena provato e questo è il caso di IE10.

Se carichi il documento in Chrome, la Developer|Elementsvista ti mostrerà l'HTML come manipolato dal tuo codice JS. Non è direttamente testo HTML e devi aprire (aprire) tutti gli elementi di interesse, ma puoi effettivamente ispezionare l'HTML generato.

Nella barra degli strumenti per sviluppatori Web, hai provato le opzioni Tools -> Validate HTMLo Tools -> Validate Local HTML?

L' Validate HTMLopzione invia l'URL al validatore, che funziona bene con i siti rivolti al pubblico. L' Validate Local HTMLopzione invia l'HTML della pagina corrente al validatore, che funziona bene con le pagine dietro un login o quelle che non sono accessibili pubblicamente.

Potresti anche provare Visualizza grafico sorgente (anche come componente aggiuntivo di FireFox ). Una nota interessante lì:

D. Perché View Source Chart cambia i miei tag XHTML in tag HTML?

R. Non è così. Il browser sta apportando queste modifiche, VSC mostra semplicemente ciò che il browser ha fatto con il tuo codice. Più comune: i tag a chiusura automatica perdono la barra di chiusura (/). Vedere questo articolo su Rendered Source per ulteriori informazioni (archive.org) .

Utilizzo della barra degli strumenti per sviluppatori Web di Firefox ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Basta andare su Visualizza sorgente -> Visualizza sorgente generata

Lo uso sempre per la stessa identica cosa.

Ho avuto lo stesso problema e ho trovato qui una soluzione:

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

Quindi, per usare Crowbar, lo strumento da qui:

http://simile.mit.edu/wiki/Crowbar (ora (2015-12) 404s)
collegamento alla macchina di ritorno:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ wiki / Crowbar

Mi ha fornito l'HTML difettoso e non valido.

Questa è una vecchia domanda, ed ecco una vecchia risposta che una volta ha funzionato perfettamente per me per molti anni , ma non lo è più, almeno non a partire da gennaio 2016:

Il bookmarklet "Generated Source" di SquareFree fa esattamente quello che vuoi e, a differenza del "vecchio oro" di @ Johnny5, viene visualizzato come codice sorgente (invece di essere visualizzato normalmente dal browser, almeno nel caso di Google Chrome su Mac):

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

Sfortunatamente, si comporta proprio come il "vecchio oro" di @ Johnny5: non compare più come codice sorgente. Scusate.

In Firefox, basta ctrl-a (selezionare tutto sullo schermo) quindi fare clic con il pulsante destro del mouse su "Visualizza sorgente di selezione". Questo cattura tutte le modifiche apportate da JavaScript al DOM.

alert (document.documentElement.outerHTML);

Perché non digitare questo è l'urlbar?

javascript:alert(document.body.innerHTML)

Nella scheda elementi, fai clic con il pulsante destro del mouse sul nodo html> copia> copia elemento, quindi incolla in un editor.

Come è stato accennato in precedenza, una volta che la fonte è stata convertita in un albero DOM, la fonte originale non esiste più nel browser. Qualsiasi modifica apportata riguarderà il DOM, non la fonte.

Tuttavia, puoi analizzare nuovamente il DOM modificato in HTML, permettendoti di vedere la "sorgente generata".

1. In Chrome, apri gli strumenti per sviluppatori e fai clic sulla scheda degli elementi.
2. Fare clic con il pulsante destro del mouse sull'elemento HTML.
3. Scegli copia> copia elemento.
4. Incolla in un editor.

Ora puoi vedere il DOM corrente come una pagina HTML.

Questo non è il DOM completo

Tieni presente che il DOM non può essere rappresentato completamente da un documento HTML. Questo perché il DOM ha molte più proprietà rispetto agli attributi HTML. Tuttavia questo farà un lavoro ragionevole.

Penso che IE dev tools (F12) abbia; Visualizza> Sorgente> DOM (Pagina)

Dovresti copiare e incollare il DOM e salvarlo per inviarlo al validatore.

Controlla l'estensione di Chrome "Visualizza sorgente di rendering":

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

L'unica cosa che ho trovato è l' estensione BetterSource per Safari, questo ti mostrerà la fonte manipolata del documento l'unico svantaggio non è niente di simile per Firefox

Lo snippet di codice javascript di seguito ti fornirà la sorgente HTML generata da rendering ajax completa. Browser indipendente. Godere :)

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 ;

Sono stato in grado di risolvere un problema simile registrando i risultati della chiamata ajax sulla console. Questo è stato l'html restituito e ho potuto facilmente vedere eventuali problemi che aveva.

nella mia funzione .done () della mia chiamata ajax ho aggiunto console.log (risultati) in modo da poter vedere l'html nella console del debugger.

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");
    });
}