Snippet Javascript pour editer une page

Dans un projet à plusieurs intervenants, il est parfois plus simple de se faire comprendre avec une capture d’écran qu’un long paragraphe.

C’est souvent le cas lors de la demande de modification textuelle d’une page web.

Il est possible de faire des modifications avec les navigateurs via la fonction Inspecter / Examiner l’élément et en allant changer directement le code.
Toutefois, tout le monde ne connait pas le HTML et cette manipulation peut parfois être chronophage.

Une solution plus simple est d’utiliser un raccourci javascript qui va vous permettre d’activer une fonction « modifier la page » sans connaitre le code.
Vous garderez ainsi le style et la charte graphique de vos sites.

Pour l’activer, vous pouvez cliquer sur « Favoris > Ajouter cette page au favori » et coller le code ci dessous

 javascript:if(document.x31x){document.body.contentEditable = false; document.designMode = 'off';document.x31x=false;}else{document.x31x=true;document.body.contentEditable = true;document.designMode = 'on';};void (0)

Voici une vidéo explicative :

Vous pourrez ainsi éditer (quasiment) n’importe quel site et visualiser vos changements directement.
Pour ceux qui se demandent, vous serez les seuls à voir ces modifications, vous n’allez rien casser 🙂
Attention, si vous rechargez votre page ou si vous cliquez sur un lien il faudra tout recommencer, privilégier donc les micros-changement de texte ou le copier/coller de petites images.

Pour des modifications plus conséquentes, l’idéal sera d’apprendre le HTML et le CSS !

Idéal pour :

  • Créer une preview d’un TITLE / DESC dans un résultat Google
  • Supprimer des élements d’un site pour communiquer sur des tests de landing pages Adwords
  • Modifier une box d’acquisition newsletter
  • Vérifier le comportement de vos pages lorsque le texte passe sur deux lignes / paragraphes (surtout sur mobile)