La meilleure façon d'afficher la source générée de la page Web?

Je recherche un outil qui me donnera la bonne source générée, y compris les modifications DOM apportées par les demandes AJAX pour l'entrée dans le validateur de W3. J'ai essayé les méthodes suivantes:

1. Barre d'outils du développeur Web - Génère une source non valide en fonction du type de document (par exemple, elle supprime la partie à fermeture automatique des balises). Perd la partie doctype de la page.
2. Firebug - Corrige les failles potentielles dans la source (par exemple les balises non fermées). Perd également la partie doctype des balises et injecte la console qui elle-même est du HTML invalide.
3. IE Developer Toolbar - Génère une source invalide en fonction du type de document (par exemple, il rend toutes les balises en majuscules, par rapport aux spécifications XHTML).
4. Mettre en évidence + Afficher la source de sélection - Souvent difficile d'obtenir la page entière, exclut également le type de document.

Existe-t-il un programme ou un module complémentaire qui me donnera la version actuelle exacte de la source, sans la corriger ou la modifier d'une manière ou d'une autre? Jusqu'à présent, Firebug semble le meilleur, mais je crains qu'il corrige certaines de mes erreurs.

Solution

Il s'avère qu'il n'y a pas de solution exacte à ce que je voulais comme Justin l'a expliqué. La meilleure solution semble être de valider la source à l'intérieur de la console de Firebug, même si elle contiendra des erreurs causées par Firebug. Je voudrais également remercier le point-virgule oublié pour avoir expliqué pourquoi «Afficher la source générée» ne correspond pas à la source réelle. Si je pouvais marquer 2 meilleures réponses, je le ferais.

[mise à jour en réponse à plus de détails dans la question modifiée]

Le problème que vous rencontrez est que, une fois qu'une page est modifiée par des requêtes ajax, le HTML actuel n'existe que dans le DOM du navigateur - il n'y a plus de code HTML source indépendant que vous pouvez valider autre que ce que vous pouvez extraire du DOM.

Comme vous l'avez observé, le DOM d'IE stocke les balises en majuscules, corrige les balises non fermées et apporte de nombreuses autres modifications au code HTML qu'il avait à l'origine. C'est parce que les navigateurs sont généralement très bons pour prendre du HTML avec des problèmes (par exemple des balises non fermées) et résoudre ces problèmes pour afficher quelque chose d'utile pour l'utilisateur. Une fois que le HTML a été canonisé par IE, le HTML source d'origine est essentiellement perdu du point de vue du DOM, pour autant que je sache.

Firefox fait très probablement moins de ces changements, donc Firebug est probablement votre meilleur pari.

Une option finale (et plus laborieuse) peut fonctionner pour les pages avec de simples modifications ajax, par exemple récupérer du HTML du serveur et l'importer dans la page à l'intérieur d'un élément particulier. Dans ce cas, vous pouvez utiliser Fiddler ou un outil similaire pour assembler manuellement le HTML d'origine avec le HTML Ajax. C'est probablement plus de problèmes que cela ne vaut la peine et est sujet aux erreurs, mais c'est une possibilité de plus.

[Réponse originale ici à la question initiale]

Fiddler ( http://www.fiddlertool.com/ ) est un outil gratuit et indépendant du navigateur qui fonctionne très bien pour récupérer le code HTML exact reçu par un navigateur. Il vous montre les octets exacts sur le fil ainsi que le contenu décodé / décompressé / etc que vous pouvez insérer dans n'importe quel outil d'analyse HTML. Il affiche également les en-têtes, les horaires, l'état HTTP et beaucoup d'autres bonnes choses.

Vous pouvez également utiliser Fiddler pour copier et reconstruire des requêtes si vous souhaitez tester la façon dont un serveur répond à des en-têtes légèrement différents.

Fiddler fonctionne comme un serveur proxy, assis entre votre navigateur et le site Web, et enregistre le trafic dans les deux sens.

Justin est mort. Le point clé ici est que le HTML n'est qu'un langage pour décrire un document. Une fois que le navigateur l'a lu, il est parti . Les balises ouvertes, les balises fermées et la mise en forme sont toutes prises en charge par l'analyseur , puis disparaissent . Tout outil qui affiche du code HTML le génère en fonction du contenu du document, il sera donc toujours valide.

J'ai dû l'expliquer une fois à un autre développeur Web, et il lui a fallu un peu de temps pour l'accepter.

Vous pouvez l'essayer par vous-même dans n'importe quelle console JavaScript:

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

Les balises non fermées et les noms de balises en majuscules ont disparu, car ce HTML a été analysé et ignoré après la deuxième ligne.

La bonne façon de modifier le document à partir de JavaScript est avec les documentméthodes ( createElement, appendChild, setAttribute, etc.) et vous observerez qu'il n'y a aucune référence à des balises HTML ou la syntaxe dans l' une de ces fonctions. Si vous utilisez document.write, innerHTMLou d'autres appels en langage HTML pour modifier vos pages, le seul moyen de les valider est de saisir ce que vous y mettez et de valider ce HTML séparément.

Cela dit, le moyen le plus simple d'accéder à la représentation HTML du document est le suivant:

document.documentElement.innerHTML

Je sais que c'est un vieux post, mais je viens de trouver cette pièce d'or . C'est vieux (2006), mais fonctionne toujours avec IE9. J'ai personnellement ajouté un signet avec ça.

Copiez-collez ceci dans la barre d'adresse de votre navigateur:

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

Quant à Firefox, la barre d'outils du développeur Web fait le travail. J'utilise généralement ceci, mais parfois, certains contrôles asp.net tiers sales génèrent différents marquages ​​basés sur l'agent utilisateur ...

ÉDITER

Comme Bryan l'a souligné dans le commentaire, certains navigateurs suppriment la javascript:partie lors du copier / coller dans la barre d'URL. Je viens de tester et c'est le cas avec IE10.

Si vous chargez le document dans Chrome, la Developer|Elementsvue vous montrera le HTML tel que manipulé par votre code JS. Ce n'est pas directement du texte HTML et vous devez ouvrir (déplier) tous les éléments d'intérêt, mais vous pouvez effectivement inspecter le HTML généré.

Dans la barre d'outils des développeurs Web, avez-vous essayé les options Tools -> Validate HTMLou Tools -> Validate Local HTML?

L' Validate HTMLoption envoie l'URL au validateur, ce qui fonctionne bien avec les sites publics. L' Validate Local HTMLoption envoie le code HTML de la page actuelle au validateur, ce qui fonctionne bien avec les pages derrière une connexion ou celles qui ne sont pas accessibles au public.

Vous pouvez également essayer Afficher le graphique source (également en tant que module complémentaire FireFox ). Une note intéressante ici:

Q. Pourquoi View Source Chart change-t-il mes balises XHTML en balises HTML?

R. Non. Le navigateur effectue ces modifications, VSC affiche simplement ce que le navigateur a fait avec votre code. Le plus courant: les balises à fermeture automatique perdent leur barre oblique de fermeture (/). Voir cet article sur Rendered Source pour plus d'informations (archive.org) .

Utilisation de la barre d'outils Firefox Web Developer ( https://addons.mozilla.org/en-US/firefox/addon/60 )

Allez simplement dans Afficher la source -> Afficher la source générée

Je l'utilise tout le temps pour exactement la même chose.

J'ai eu le même problème, et j'ai trouvé ici une solution:

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

Donc, pour utiliser Crowbar, l'outil d'ici:

http://simile.mit.edu/wiki/Crowbar (maintenant (2015-12) 404s)
lien de la machine de retour:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/ wiki / Crowbar

Cela m'a donné le HTML défectueux et invalide.

C'est une vieille question, et voici une vieille réponse qui a fonctionné parfaitement pour moi pendant de nombreuses années , mais qui ne l'est plus, du moins pas en janvier 2016:

Le bookmarklet "Generated Source" de SquareFree fait exactement ce que vous voulez - et, contrairement au "vieil or" de @ Johnny5, s'affiche comme code source (plutôt que d'être rendu normalement par le navigateur, du moins dans le cas de Google Chrome sur Mac):

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

Malheureusement, il se comporte exactement comme le "vieil or" de @ Johnny5: il n'apparaît plus comme code source. Pardon.

Dans Firefox, il suffit de ctrl-a (tout sélectionner à l'écran) puis de cliquer avec le bouton droit de la souris sur "Afficher la source de sélection". Cela capture toutes les modifications apportées par JavaScript au DOM.

alert (document.documentElement.outerHTML);

Pourquoi ne pas taper ceci est l'urlbar?

javascript:alert(document.body.innerHTML)

Dans l'onglet éléments, cliquez avec le bouton droit sur le nœud html> copier> copier l'élément - puis collez-le dans un éditeur.

Comme cela a été mentionné ci-dessus, une fois que la source a été convertie en une arborescence DOM, la source d'origine n'existe plus dans le navigateur. Toutes les modifications que vous apportez seront au DOM, pas à la source.

Cependant, vous pouvez analyser le DOM modifié en HTML, vous permettant de voir la "source générée".

1. Dans Chrome, ouvrez les outils de développement et cliquez sur l'onglet éléments.
2. Cliquez avec le bouton droit sur l'élément HTML.
3. Choisissez copie> élément de copie.
4. Coller dans un éditeur.

Vous pouvez maintenant voir le DOM actuel sous forme de page HTML.

Ce n'est pas le DOM complet

Notez que le DOM ne peut pas être entièrement représenté par un document HTML. C'est parce que le DOM a beaucoup plus de propriétés que le HTML n'a d'attributs. Cependant, cela fera un travail raisonnable.

Je pense que les outils de développement IE (F12) ont; Affichage> Source> DOM (Page)

Vous devrez copier et coller le DOM et l'enregistrer pour l'envoyer au validateur.

La seule chose que j'ai trouvée, c'est l' extension BetterSource pour Safari, cela vous montrera que la source manipulée du document, seul inconvénient, n'a rien de comparable à distance pour Firefox

L'extrait de code javascript ci-dessous vous donnera la source complète générée par le HTML rendu en ajax. Indépendant du navigateur. Prendre plaisir :)

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 ;

Découvrez l'extension Chrome "Afficher la source du rendu":

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

J'ai pu résoudre un problème similaire en enregistrant les résultats de l'appel ajax sur la console. C'était le code HTML retourné et je pouvais facilement voir les problèmes qu'il avait.

dans ma fonction .done () de mon appel ajax, j'ai ajouté console.log (résultats) pour que je puisse voir le html dans la console du débogueur.

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