Meilleur moyen de visualiser la source générée de la page Web?
Je recherche un outil qui me fournisse la source générée appropriée, y compris les modifications du DOM effectuées par les demandes de AJAX afin d'être entrées dans le validateur de W3. J'ai essayé les méthodes suivantes:
- Web Developer Toolbar - 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.
- Firebug - Corrige les failles potentielles de la source (par exemple, les balises non fermées). Il perd également la partie doctype des balises et injecte la console, qui est elle-même un code HTML non valide.
- Barre d'outils pour développeur IE - Génère une source non valide en fonction du type de document (par exemple, elle place toutes les balises en majuscules par rapport aux spécifications XHTML).
- Highlight + View Selection Source - Il est souvent difficile d’obtenir la page entière, exclut également le type de document.
Existe-t-il un programme ou une extension qui me donne la version exacte actuelle du code source, sans le corriger ni le modifier d’une manière ou d’une autre? Jusqu'à présent, Firebug semble le meilleur, mais je crains que cela ne 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 le code source à l'intérieur de la console de Firebug, même s'il contient des erreurs causées par Firebug. Je souhaite également remercier Forgotten Semicolon 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 qu’une fois qu'une page est modifiée par des requêtes ajax, le code HTML actuel n’existe que dans le DOM du navigateur. Il n’ya plus de code source HTML indépendant que vous pouvez valider, à part ce que vous pouvez extraire du DOM.
Comme vous l'avez observé, le DOM d'Internet Explorer stocke les balises en majuscule, corrige les balises non fermées et apporte de nombreuses autres modifications au code HTML qu'il a obtenu à l'origine. En effet, les navigateurs sont généralement très doués pour traiter le HTML avec des problèmes (balises non fermées, par exemple) et pour les résoudre afin d’afficher un élément utile à l’utilisateur. Une fois que le code HTML a été canonisé par IE, le code source HTML d'origine est essentiellement perdu du point de vue du DOM, à ma connaissance.
Firefox a tendance à faire moins de ces changements, donc Firebug est probablement votre meilleur pari.
Une option finale (et plus laborieuse) peut fonctionner pour les pages comportant de simples modifications ajax, par exemple. récupérer du code HTML sur le 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 code HTML d'origine avec le code HTML Ajax. C’est probablement plus de problèmes que cela ne vaut la peine, et il est sujet à des 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 extraire le code HTML exact reçu par un navigateur. Il affiche le nombre exact d'octets sur le réseau ainsi que le contenu décodé/décompressé/etc. que vous pouvez alimenter dans n'importe quel outil d'analyse HTML. Il affiche également les en-têtes, les horaires, l’état HTTP et de nombreux autres éléments intéressants.
Vous pouvez également utiliser fiddler pour copier et reconstruire des requêtes si vous souhaitez tester la réponse d'un serveur à des en-têtes légèrement différents.
Fiddler fonctionne comme un serveur proxy, entre votre navigateur et le site Web, et enregistre le trafic dans les deux sens.
Justin est mort. Le point clé ici est que HTML est juste un langage pour décrire un document. Une fois que le navigateur l'a lu, c'est parti . Les balises ouvertes, les balises de fermeture et le formatage sont tous pris en charge par l'analyseur puis disparaissent . Tout outil qui affiche votre code HTML est le génère basé sur le contenu du document, de sorte qu'il sera toujours valide.
J'ai dû expliquer cela à un autre développeur Web une fois, et cela lui a pris un peu de temps pour l'accepter.
Vous pouvez l'essayer 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 majuscules ont disparu, car ce code HTML a été analysé et supprimé après la deuxième ligne.
La bonne façon de modifier le document à partir de JavaScript est d'utiliser les méthodes document (createElement, appendChild, setAttribute, etc.) et vous remarquerez qu'il n'y a pas de référence aux balises ou à la syntaxe HTML dans ces fonctions. Si vous utilisez document.write, innerHTML ou d'autres appels parlant HTML pour modifier vos pages, le seul moyen de le valider consiste à intercepter ce que vous y mettez et à valider ce code HTML séparément.
Cela dit, le moyen le plus simple d’obtenir la représentation HTML du document est le suivant:
document.documentElement.innerHTML
Je sais que ceci est un ancien post, mais je viens de trouver ce morceau d’or . Ceci est ancien (2006), mais fonctionne toujours avec IE9. J'ai personnellement ajouté un marque-page avec ceci.
Copiez-le simplement dans la barre d’adresse de votre navigateur:
javascript:void(window.open("javascript:document.open(\"text/plain\");document.write(opener.document.body.parentNode.outerHTML)"))
Pour ce qui est de Firefox, la barre d’outils du développeur Web fait le travail. J'utilise habituellement cela, mais parfois, certains contrôles asp.net tiers malpropres génèrent des balises différentes en fonction de l'agent utilisateur ...
MODIFIER
Comme Bryan l'a souligné dans le commentaire, un navigateur supprime la partie javascript: lors du copier/coller dans la barre d'adresse. Je viens de tester et c'est le cas avec IE10.
Si vous chargez le document dans Chrome, la vue Developer|Elements vous montrera le code HTML modifié par votre code JS. Ce n'est pas directement du texte HTML et vous devez ouvrir (déplier) tous les éléments qui vous intéressent, mais vous devez effectivement inspecter le code HTML généré.
Avez-vous essayé les options Tools -> Validate HTML ou Tools -> Validate Local HTML dans la barre d’outils Web Developer?
L'option Validate HTML envoie l'URL au validateur, qui fonctionne bien avec les sites publics. L'option Validate Local HTML envoie le code HTML de la page actuelle au validateur, qui fonctionne bien avec les pages situées derrière un identifiant ou celles qui ne sont pas accessibles au public.
Vous voudrez peut-être aussi essayer Afficher le graphique source (également en tant que Module complémentaire FireFox ). Une note intéressante ici:
Q. Pourquoi View Source Chart modifie-t-il mes balises XHTML en balises HTML?
R. Ce n'est pas le cas. Le navigateur effectue ces modifications, VSC affiche simplement ce qu'il a fait avec votre code. Les plus courantes: les étiquettes à fermeture automatique perdent leur barre oblique de fermeture (/). Voir cet article sur Rendered Source pour plus d'informations(archive.org) .
Ceci est une vieille question, et voici une vieille réponse qui a une fois travaillé parfaitement pour moi pendant de nombreuses années, mais n'en a plus, du moins pas à partir de janvier 2016:
Le bookmarklet "Source générée" de SquareFree fait exactement ce que vous voulez - et, contrairement au "vieil or" par ailleurs très fin de @ Johnny5, s'affiche sous forme de code source (plutôt que d'être restitué 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 ne s'affiche plus en tant que code source. Pardon.
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 à partir d'ici:
http://simile.mit.edu/wiki/Crowbar (maintenant (2015-12) 404s)
lien de la machine wayback:
http://web.archive.org/web/20140421160451/http://simile.mit.edu/wiki/Crowbar
Il m'a donné le HTML défectueux et invalide.
Utilisation de la barre d'outils Firefox Web Developer ( https://addons.mozilla.org/en-US/firefox/addon/60 )
Il suffit d'aller à Afficher la source -> Afficher la source générée
Je l'utilise tout le temps pour exactement la même chose.
alerte (document.documentElement.outerHTML);
Dans Firefox, ctrl-a (tout sélectionner à l’écran), puis cliquez 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.
Pourquoi ne pas taper c'est urlbar?
javascript:alert(document.body.innerHTML)
Dans l'onglet des éléments, cliquez avec le bouton droit sur le nœud html> copier> copier l'élément - puis collez-le dans un éditeur.
Comme mentionné ci-dessus, une fois la source convertie en une arborescence DOM, la source d'origine n'existe plus dans le navigateur. Toutes les modifications que vous apporterez seront dans le DOM, pas dans la source.
Cependant, vous pouvez ré-analyser le DOM modifié en HTML, ce qui vous permet de voir le "source généré".
- Dans Chrome, ouvrez les outils de développement et cliquez sur l'onglet Éléments.
- Cliquez avec le bouton droit sur l'élément HTML.
- Choisissez Copier> Copier l'élément.
- 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. En effet, 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 IE outils de développement (F12) a; Affichage> Source> DOM (Page)
Vous devez copier et coller le DOM et le sauvegarder pour l'envoyer au validateur.
L'extrait de code javascript ci-dessous vous fournira la source générée générée au format ajax HTML. Navigateur indépendant. 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 ;
La seule chose que j'ai trouvée est l'extension BetterSource pour Safari, elle vous montrera que la source manipulée du document ne présente que l'inconvénient de ne rien ressembler de loin à Firefox
J'ai pu résoudre un problème similaire en enregistrant les résultats de l'appel ajax sur la console. C'était le HTML retourné et je pouvais facilement voir tous les problèmes qu'il avait.
dans ma fonction .done () de mon appel ajax, j'ai ajouté console.log (résultats) afin de pouvoir voir le code 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");
});
}