lundi 9 Fév 2009

Modifier les pages web dans son navigateur

HTMLIl est possible de se servir de n'importe quel navigateur comme d'un éditeur HTML. :-o

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.

modifier-web

~

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...). ;-)

modifier-web-yahoo

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


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

9 réponses à “Modifier les pages web dans son navigateur”

  1. 1
    Walid a dit:

    Salut,
    Sache 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.

  2. 2
    David (azur-dev.kizone.net) a dit:

    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.

  3. 3
    pingouin info (lepingouin.info) a dit:

    Excellent !!
    De bonne blagues en perspective... ;)
    Je découvre ton blog et j'y reviendrait souvent je pense ! :)

  4. 4
    Jessica (azur-dev.kizone.net) a dit:

    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.

  5. 5
    smorge (smorge.libr.es) a dit:

    Salut, 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);
    a coller sur un site proposant des miniatures d'images !

  6. 6
    David (azur-dev.kizone.net) a dit:

    Smorge > Oh bravo, j'avais pas vu ton commentaire. C'est inutile mais c'est joli. :D

  7. 7
    zouglou (hammerfest.fr) a dit:

    est ce que on peut enregistrer les page web et que tout le monde les voit?

  8. 8
    David (azur-dev.kizone.net) a dit:

    Ce n'est pas un moyen de piratage en 2 clics! :D

    Tout ça bien sûr juste pour voir, puisqu'il est impossible ensuite de récupérer le code HTML modifié.

  9. 9
    MARC (marckoussa.new.fr) a dit:

    pas 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

Laisser un commentaire

Azur Dev