28

Si vous utilisez Firebug, nous pouvons cliquer sur l'onglet HTML, et cliquer pour développer chaque élément pour voir le code HTML généré. Existe-t-il un moyen de tout développer ou d'obtenir un fichier texte brut?Comment afficher "code HTML généré" dans Firefox?

J'ai juste découvert par hasard qu'il n'y avait même pas besoin de Firebug. Nous pouvons simplement appuyer sur CTRL-A (pour sélectionner tout) sur la page Web, puis faites un clic droit et choisissez "Afficher la source de sélection", puis nous obtiendrons un fichier texte du "code HTML actuel", même <div> est le panneau Firebug qui se trouve avant la balise <body> si Firebug est ouvert. Mais il semble que ce soit une façon étrange d'invoquer cela. Est-ce qu'il y a un autre moyen?

(Mise à jour:. HTML généré se réfère généralement à l'HTML après JavaScript change DOM Il est l'arbre DOM actuel au lieu du code source d'origine)

+1

+1 pour Sélectionner la zone et cliquer avec le bouton droit de la souris et choisir "Afficher la source de sélection", qui ne nécessite aucun plugin supplémentaire. – Morpork

Répondre

26

Dans l'onglet HTML de Firebug, cliquez avec le bouton droit sur le nœud racine et sélectionnez «copier HTML». Puis coller dans un éditeur de texte.

Sans Firefox Add-Ons, vous pouvez utiliser un bookmarklet comme ceci:

javascript: var win = window.open(); win.document.write('<html><head><title>Generated HTML of ' + location.href + '</title></head><pre>' + document.documentElement.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre></html>'); win.document.close(); void 0; 
+0

Excellente solution.Cela fonctionne aussi dans Chrome. – twasbrillig

+0

Erreurs de bloqueur de fenêtres publicitaires intempestives. Désactivé le bloqueur de fenêtres contextuelles, des erreurs sont toujours présentes. Peut avoir quelque chose à voir avec pdf.js. Solution de contournement: 'document.body.onclick = function() {/ * le code * /};', puis cliquez n'importe où dans le document. Là, je l'ai réparé! – Luc

+0

bon hack, mais il faut garder à l'esprit que les espaces blancs se perdent. – nerdess

18

Avec le Web Developer toolbar add-on, sélectionnez Afficher la source - Afficher la source générée. Et si vous voulez voir la source d'origine, sélectionnez Afficher la source - Afficher la source (ou appuyez simplement sur CTRL - SHIFT - U)

+0

Superbe outil. Il est si vaste par rapport à l'outil de développement FF – ThePhi

-1

Je ne sais pas si je comprends bien votre question Eh bien, mais voici quelque chose de très simple et vous n'aurez pas besoin d'un autre addon.

Chaque navigateur a une fonction native pour afficher le code source de la page actuelle, il suffit de cliquer avec le bouton droit de la souris et de rechercher quelque chose qui ressemble à "source" ou "code".

Dans Firefox par exemple c'est juste "Souce-code", dans Chrome c'est "View Page Source" et ainsi de suite. Ceci étant dit, la barre d'outils Web Developer est en effet un excellent addon, surtout si vous faites du CSS aussi.

+3

que le "code HTML généré" se réfère généralement au code HTML généré par Javascript modifiant le DOM. le HTML résultant. –

0

Si vous êtes à la recherche d'une solution programmatique, il vous suffit de nourrir le document dans un XMLSerializer.

3

Utilisation des DevTools Firefox (intégré dans FF depuis la version 35), vous pouvez visualiser le code HTML généré ouvrir l'inspecteur Web (CTRL - de changement - C) et en sélectionnant l'onglet HTML.

Vous pouvez copier le code HTML généré en faisant un clic droit sur <html> et en sélectionnant Copier le code HTML interne.

+0

Cela ne semble pas afficher la source générée (c'est-à-dire qu'elle ne reflète pas les modifications apportées par JavaScript). Peut-être changé dans Firefox 57? –