Les pages web, ces documents que votre navigateur affiche, peuvent sembler immuables. Imaginez pourtant avoir la possibilité de modifier directement le contenu de n’importe quelle page web, comme dans un traitement de texte. C’est une réalité accessible, et cela sans recourir à des extensions. Cette fonctionnalité est intégrée nativement dans tous les navigateurs modernes.
Cette astuce repose sur la propriété « document.designMode », activable via la console JavaScript de votre navigateur. Récemment mise en lumière par Tomek Sułkowski sur Twitter, elle mérite d’être partagée avec le plus grand nombre.
Ce sentiment quand tu découvres `document.designMode` pic.twitter.com/bxA1otzCjN
– Tomek Sułkowski (@sulco) 27 septembre 2019
Cette fonction s’avère pratique pour diverses raisons : nettoyer une page avant impression, tester l’impact de modifications visuelles ou encore, simplement, faire une blague à un ami. L’expérience est similaire à celle d’un éditeur de texte, sans la complexité du code HTML.
Pour activer cette fonction, rendez-vous sur une page web, puis ouvrez la console développeur. Sur Google Chrome, vous pouvez y accéder via le menu (trois points verticaux) > Plus d’outils > Outils de développement, ou en utilisant le raccourci clavier Ctrl + Maj + i.
Bien que cet exemple se concentre sur Chrome, la fonctionnalité est disponible sur les navigateurs modernes. Voici comment l’ouvrir dans d’autres navigateurs :
- Sur Mozilla Firefox : Menu (trois traits horizontaux) > Développement Web > Console Web, ou Ctrl + Maj + K.
- Sur Apple Safari : Safari > Préférences > Avancé, cocher « Afficher le menu Développement dans la barre des menus », puis Développement > Afficher la console JavaScript.
- Sur Microsoft Edge : Menu (trois points horizontaux) > Plus d’outils > Outils de développement, ou F12, puis cliquer sur l’onglet « Console ».
Une fois dans le panneau des Outils de développement, cliquez sur l’onglet « Console ». Entrez la ligne de code suivante et validez avec la touche Entrée :
document.designMode="on"
Vous pouvez maintenant fermer la console (si vous le souhaitez) et manipuler le contenu de la page web. Placez votre curseur et commencez à écrire. Utilisez les touches Retour Arrière ou Supprimer pour enlever des éléments, qu’il s’agisse de texte, d’images ou d’autres composants.
Notez que ces modifications ne sont que locales à votre navigateur. Dès que vous rafraîchissez la page, vous retrouvez l’affichage initial. Si vous naviguez vers une autre page ou un autre onglet, la fonction est désactivée ; il faudra réactiver la console et réintroduire la commande.
Pour désactiver le mode édition, vous pouvez retourner à la console et exécuter cette commande :
document.designMode="off"
La page redevient non-modifiable, mais les changements effectués sont conservés jusqu’au prochain rafraîchissement.
