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

84

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.

Jeremy Kauffman
la source
Hmmm, je pensais qu'il demandait l'inverse - le HTML exact émis par le serveur. Jeremy?
Justin Grant
peu importe, je viens de voir le nouveau commentaire. Maintenant, ce que vous essayez de faire a plus de sens - merci pour cette clarification. Je mettrai à jour ma réponse en conséquence.
Justin Grant
Il est remarquable que de nombreux téléspectateurs de cet article aient manqué le point principal, à savoir que la source statique ne peut pas être utilisée pour analyser les pages qui ont été modifiées par javascript. Firebug est idéal pour cela, mais ce serait bien s'il y avait un outil IE pour faire de même, car la compatibilité du navigateur est un gros problème avec IE.
Paul Keister
1
Firebug ne corrige aucune erreur HTML. Il restitue simplement les balises hors du DOM Firefox. Firebug 1.6 évite d'ajouter des éléments; pour toutes les versions de Firebug, vous pouvez éviter de modifier le DOM en désactivant le panneau de la console.
johnjbarton
1
Je viens d'apprendre tellement de cette question!
Sergey Orshanskiy

Réponses:

32

[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 Grant
la source
Familier avec Fiddler, ce n'est pas un moyen facile de faire ce que je veux (visualiser la source générée d'une page après qu'elle a été modifiée par l'utilisateur).
Jeremy Kauffman
1
il veut la source de la page après que javascript a modifié le dom.
Byron Whitlock
Je ne suis pas un contre-vote, mais votre réponse n'a rien à voir avec la question elle-même. La question a peut-être été modifiée depuis votre commentaire.
bradlis7
oui, je sais que maintenant ... la question initiale ne mentionnait pas ce détail important, cependant. :-) Une fois que j'ai reçu les nouvelles informations de l'OP, je viens de mettre à jour ma réponse. Mais je pense que ma réponse initiale était une réponse raisonnable à la question initiale. Même si ce n'est pas la meilleure réponse (j'aime bien mieux le point-virgule oublié!), Je me demande ce qui a rendu ma réponse digne d'un vote défavorable. Ce n'est pas grave, je me demande juste.
Justin Grant
Merci pour cette explication concernant le HTML actuel existant uniquement à l'intérieur du DOM du navigateur. C'est le nœud de mon problème et je ne l'ai pas compris quand j'ai demandé. Cela me fait croire que ce que je demande est essentiellement impossible.
Jeremy Kauffman
34

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
s4y
la source
1
Donc, pour reformuler cette réponse, c'est comme compiler un programme, optimiser ou autrement modifier le code avec un outil ou même infecter le programme avec un virus, puis demander le code source du résultat. La transformation HTML-> DOM est une fonction à sens unique.
Sergey Orshanskiy
+1, saint enfer, qui fonctionne pour voir le code avant et après chaque modification. pensée très intelligente! Merci
jimjim
Cela peut être vrai, mais ne répond pas tout à fait à la question. Il est parfaitement possible de reconvertir le DOM actuellement manipulé en HTML, vous permettant de "visualiser la source générée". Ceci est parfois très utile, par exemple si vous avez besoin de vérifier une seule pièce de JavaScript par rapport à un faisceau de test réaliste.
superluminaire
21

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.

Johnny5
la source
Wow, c'est vraiment de l'or pur! Fonctionne très bien avec un simple clic sur le signet. Du moins, c'est le cas dans Firefox tout à l'heure. Avec Chrome, le popup a été rendu - peut-être qu'il ignore le "texte / plain"?
Jon Coombs
Je copie-collez ceci dans la barre d'adresse de mon navigateur et ENTRER, rien ne se passe
eMi
1
@eMi J'ai IE10 ici, et ça ne me laisse pas coller la javascript:pièce, je dois la taper manuellement. C'est peut-être ce qui se passe. Vérifiez ce qui est collé.
Johnny5
1
Sur Google Chrome (au moins à partir de la version 44.0.2403.155) sous Mac OSX, le bookmarklet de @ Johnny5 ne produit pas une page de texte brut contenant la source de l'ouvreur, mais Chrome tente de rendre le HTML, mais sans CSS, du regard de celui-ci.
Dave Land
@ Johnny5 pourrait valoir la peine d'être mentionné comme note dans la réponse qui javascript:est coupée lors du copier / coller dans certains navigateurs. Je viens d'avoir ce problème dans Chrome.
Bryan
12

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é.

Carl Smotricz
la source
11
Dans Google Chrome, dans Inspect Element, vous pouvez faire un clic droit sur n'importe quel élément et "Copier au format HTML"
JasonPlutext
3
@Jason Merci beaucoup pour cela. Un clic droit sur l'élément <html> et en choisissant "Copier au format HTML" m'a donné exactement ce dont j'avais besoin dans Chrome aujourd'hui.
DaveGauer
11

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) .

Point-virgule oublié
la source
Je n'ai pas fait le vote défavorable, mais "valider HTML" n'enverra pas le HTML généré, mais la source originale. (Voir la question éditée)
Pekka
J'ai juste essayé ceci, il ne semble pas soumettre la source générée (c'est-à-dire la source avec les changements DOM), mais la source qui serait vue avec l'option "afficher la source" de Firefox.
Jeremy Kauffman
Changer les poteaux de but sur moi!
Point-virgule oublié
1
Je pensais que "afficher la source générée" clarifierait cette partie de la question, mais à en juger par les 4 réponses jusqu'à présent, je me suis clairement trompé :)
Jeremy Kauffman
Le lien vers le graphique source est rompu
Casebash
6

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.

lewsid
la source
Et je vois maintenant votre modification où vous citez le problème Doctype avec la barre d'outils. C'est une critique juste et je n'ai rien d'autre à suggérer.
lewsid
3
Fonctionne très bien et est maintenant intégré à Firefox vanilla. Ctrl + A, clic droit, E. Voir également l'excellent bookmarklet trouvé par Johnny5.
Jon Coombs
Dans Firefox: faites un clic droit sur la page avec le contenu généré que vous souhaitez afficher, puis Web Developer> View Source> View Generated Source
Mark Gavagan
5

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.

adamvagyok
la source
Découvrez également les autres parties de cette série: partie 2 , partie 3 .
Jabba
pied de biche ne semble plus être là
Mousey
Pas trop convivial, mais peut toujours être téléchargé via SVN: devres.zoomquiet.io/data/20110810165553/index.html
adamvagyok
5

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.

Dave Land
la source
4

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.

Mike_K
la source
Ne fonctionne pas si la page a accroché le clic droit.
Kevin Whitefoot
4

alert (document.documentElement.outerHTML);

JohnnyFaldo
la source
3

Pourquoi ne pas taper ceci est l'urlbar?

javascript:alert(document.body.innerHTML)
Mike
la source
1
+1: Cela ne fonctionnait pas pour moi dans la barre d'adresse dans IE 10 mais cela fonctionnait à merveille dans la console des outils de développement IE.
SausageFingers
3

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.

superluminaire
la source
2

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.

Will Hancock
la source
Vous voudrez peut-être aussi; Fichier> Personnaliser la source de la vue Internet Explorers> Bloc-notes pour une sauvegarde facile lorsque vous effectuez les opérations ci-dessus.
Will Hancock
1

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

Ellisgeek
la source
1

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 ;
Sathish
la source
Je pense que cela nécessiterait des instructions spécifiques sur la façon de l'utiliser. Je suppose que vous collez le code dans la page existante, mais où irait la sortie?
Jon Coombs
0

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

Ebarke
la source
@erbarke, pourriez-vous élaborer plus sur votre réponse et expliquer plus en détail (code, déroulement détaillé des actions)?
Artem