Modifier les pages web dans son navigateur
Il est possible de se servir de n'importe quel navigateur comme d'un éditeur HTML.
La page n'est bien sûr pas réellement modifiée, il suffit d'actualiser pour la retrouver telle quelle. Mais cela permet de faire facilement quelques tests sur n'importe quel site Internet:
- Vérifier le rendu avec un titre très long, au contraire avec un article est très petit. On peut ainsi tester la "résistance" de sa présentation aux modifications de texte.
- Modifier un titre ou une colonne pour voir si c'est plus joli visuellement.
- Même déplacer ou redimensionner des images.
Tout ça bien sûr juste pour voir, puisqu'il est impossible ensuite de récupérer le code HTML modifié.
~
Pour cela, il suffit de coller ceci dans sa barre d'adresse:
javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
Pour plus de facilité, on peut créer un nouveau marque-page avec cette ligne comme adresse. En y attribuant un mot-clé (Opera, Firefox) on le retrouvera en 2 touches de clavier.
~
Ce petit bout de Javascript magique dit au navigateur que tout le contenu de la page est modifiable. Comme si c'était un champ de texte dans un formulaire. Le navigateur vous permet donc d'y taper ce que vous voulez. Et puisque c'est de l'HTML, la copie des images fonctionne.
Suivant le navigateur, on voit même apparaitre un contour avec des ancres pour redimensionner les images.

~
Les petits malins trouveront sans doute aussi des applications pour faire des blagues ou des captures d'écran bidon (modifier le 1er résultat dans un moteur sur un terme très concurrentiel, modifier son nombre de visites...).

Cependant, n'oubliez pas d'enlever le curseur de la fin de la ligne.








Salut,
Mercredi 11 février 2009 à 0:28Sache aussi qu'avec Opera, en modifiant la source de la page les modifications apparaissent sur la page en temps réel. Et pour les dev'ers il y a Opera DragonFly pour debugger n'importe quel site Web(HTML, CSS et JS) directement depuis le navigateur.
En effet, j'avais pas remarqué le bouton «Appliquer les changements».
Mais on est dans du code source, alors que là c'est du WYSIWYG, par contre le résultat n'est pas récupérable.
Ça sort un peu du sujet, mais je trouve Dragon Fly moins pratique à utiliser que l'extension Web Developper de Firefox.
Mercredi 11 février 2009 à 11:33Excellent !!
Mercredi 11 février 2009 à 23:51De bonne blagues en perspective...
Je découvre ton blog et j'y reviendrait souvent je pense !
Merci. Par manque de temps, on fait moins d'articles en ce moment.
Pour info la version anglaise de cet article a fait la une sur l'agrégateur Reddit.
+4000 visites, je pensais pas qu'il apportait autant.
Jeudi 12 février 2009 à 1:54Salut, bravo pour ton blog,c'est une astuce rigolote que j'avais publié, en voilà une autre : javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
Samedi 14 février 2009 à 10:55a coller sur un site proposant des miniatures d'images !
Smorge > Oh bravo, j'avais pas vu ton commentaire. C'est inutile mais c'est joli.
Lundi 16 mars 2009 à 10:29est ce que on peut enregistrer les page web et que tout le monde les voit?
Dimanche 28 juin 2009 à 12:53Ce n'est pas un moyen de piratage en 2 clics!
Lundi 29 juin 2009 à 20:26pas mal utile pour la creation de sites webs merci david et moi meme utilisateur de mozilla firefox et d'opera merci de m avoir fait decouvrir les differentes options de developpement
Mardi 8 septembre 2009 à 10:15