web-dev-qa-db-fra.com

comment obtenir du HTML entièrement calculé (au lieu du HTML source)?

Étant donné qu'une page Web utilise beaucoup de javascript pour générer son code HTML, comment puis-je obtenir le code HTML calculé final analysé par le navigateur au lieu du code HTML source? En d'autres termes, supposons qu'une page comporte de nombreuses balises entourant des fonctions javascript qui, lorsqu'elles sont appelées, renvoient du code HTML. Lorsque je visualise le source de la page, l'appel de la fonction de script s'affiche, pas le code HTML qu'il génère. 

Comment puis-je obtenir tout le code HTML produit par une page Web?

J'ai remarqué que Firebug semblait capable de voir le code HTML au lieu des scripts, mais il ne semble pas avoir de moyen de sauvegarder la page entière, mais seulement de petits segments.

Mettre à jour:

Merci pour toutes les réponses. Cependant, je ne reçois toujours pas le code HTML que je vois dans la console de Firebug avec aucune de ces techniques. Pour ma page d'exemple, j'utilise l'onglet "Info" de mon propre profil Facebook. Si vous affichez le source sur cette page, vous verrez beaucoup de scripts dont le titre est 'big_pipe.onPageletArrive ()'. Cependant, si vous le regardez dans Firebug, chacun de ces appels de fonction est rendu au format HTML. J'ai essayé de cliquer avec le bouton droit de la souris sur la balise dans Firebug, la vue générée dans la barre d'outils Webdev et la suggestion de Chrome, mais ils me donnent tous l'appel du script, pas le code HTML. 

D'autres idées?

Mise à jour 2:

Lorsque j'ai dit que chacune de ces fonctions rend au rendu HTML dans Firebug, je n'étais pas tout à fait correct. Ils ne s'affichent que si je les sélectionne dans la page et que vous cliquez avec le bouton droit de la souris -> Inspecter l'élément. Ensuite, il semble le rendre. Alors peut-être que ma question est devenue: comment faire en sorte que Firebug rende automatiquement tout le code HTML afin que vous puissiez le sélectionner et le sauvegarder? (Ou je suis ouvert à toute autre solution pour récupérer ce code HTML).

javascripthtmlfirebug
29
mix

Avec l'onglet HTML de Firebug, vous pouvez cliquer avec le bouton droit de la souris sur l'élément <html>, puis cliquer sur "Copier HTML".

Vous pouvez faire la même chose avec les outils de développement dans Chrome/Safari.

24
thirtydot

La barre d'outils Web Developer pour Firefox contient l'option "Afficher le source généré" qui fournit cette fonctionnalité.

14
George Cummins
with (window.open("")) {
    document.open("text/html");
    document.write("<!--\n"); //for live version delete this line
    document.write(opener.document.documentElement.outerHTML.replace(/</g,"<").replace(/>/g, ">"));
    document.write("\n//-->"); //for live version delete this line
    document.close();
    document.title = "DOM Snapshot:" + opener.document.title;
    focus();
}
  1. Ouvrir la console 
  2. copier coller le code ci-dessus et exécuter
  3. il ouvre une page vide,
  4. inspectez maintenant la page avec un clic droit ou f12,
  5. copie outerhtml du commentaire
  6. coller où vous voulez
  7. éventuellement supprimer le commentaire au début et à la fin

Si vous voulez une version live qui est cliquable, laissez simplement les balises de commentaire dans le code ci-dessus.

0
HopefullyHelpful