Voir les modifications dynamiques dans une page

Publié le par

La possibilité de modifier le DOM d’une page HTML offre une foule de possibilités. Il y a toutefois un inconvenient à cela dans le fait que les modifications ne sont pas visibles dans l’affichage standard du code source. Voici donc quelques astuces pour afficher les modifications.

1) Solution technique dans Chrome et Firefox

– Dans Chrome, effectuez un click-droit sur un élement et sélectionnez « Inspecter l’élémént » en bas du menu contextuel.
РDans Firefox, ajoutez le plugin Firebug. Ensuite cliquez dans le coin inf̩rieur droit pour activer ce plugin.

Ces deux solutions affichent un frame avec diverses options en bas de ces navigateurs respectifs.

2) Solution système « D »

– Dans Firefox effectuez un glisser-lacher pour sélectionner quelques éléments dans le page. Ensuite, faites un clique-droit et choissisez l’option « Code source de la sélection ».

3) Solution « Geek inside »

РCopiez-coller ce morceau de javascript dans votre barre de navigation*. Une fois activ̩ avec un return ce code devrait afficher une nouvelle page avec le code source modifi̩.

javascript:var%20o=document.documentElement,p,w=window.open('','_blank'),d=w.document;d.write('<pre>');z(''+o.innerHTML+'');d.write('</pre>');d.close();function%20z(s){d.write(s.replace(/&amp;/g,'&amp;').replace(/&lt;/g,&#039;/g,'&gt;').replace(/"/g,'&quot;'));}

*Merci à Willy Duitt pour avoir posté cette astuce.

– James Poulson