Comment modifier N’importe quelle Page Web dans Chrome (ou N’importe quel navigateur)

• Chris Hoffman

  @chrisbhoffman

• octobre 2, 2019, 8:00AM EDT

les pages Web ne sont que des documents que votre navigateur Web affiche. Mais si vous pouviez taper directement sur n’importe quelle page web pour la modifier? Vous pouvez, et vous n’avez pas besoin d’une extension de navigateur—c’est une fonctionnalité intégrée dans chaque navigateur moderne.

Cette fonctionnalité tire parti du « document.fonctionnalité « designMode », que vous pouvez activer via la console JavaScript de votre navigateur Web., Il a récemment été mis en évidence par Tomek Sułkowski sur Twitter, mais c’est tellement cool que nous devons le partager avec nos lecteurs.

Vous pouvez utiliser cette fonctionnalité pour nettoyer une page web avant de l’imprimer, tester l’apparence des modifications apportées à une page web, ou même simplement faire des blagues. Ce sera comme éditer un document Word-pas de jouer avec le HTML requis.

Pour activer cette fonctionnalité, consultez une page web, puis ouvrez la console développeur., Pour ouvrir la console dans Google Chrome, cliquez sur menu > plus D’outils > outils de développement ou appuyez sur Ctrl+Maj+I.

bien que nous utilisions Chrome comme exemple ici, cette fonctionnalité fonctionne également dans d’autres navigateurs modernes. Voici comment ouvrir la console dans d’autres navigateurs:

• Dans Mozilla Firefox, cliquez sur menu >développeur Web> console Web ou appuyez sur Ctrl+Maj+K.,
• Dans Apple Safari, cliquez sur Safari > Préférences > avancé et activez « Afficher le menu développer dans la barre de menus. »Ensuite, cliquez sur Develop > afficher la Console JavaScript.
• Dans Microsoft Edge, cliquez sur menu >plus D’outils outils de développement ou appuyez sur F12, puis cliquez sur L’onglet « Console ».

Cliquez sur L’onglet « Console” en haut du panneau Outils de développement., Tapez ce qui suit dans la console et appuyez sur Entrée:

document.designMode = 'on'

Vous pouvez maintenant fermer la console, si vous le souhaitez, et modifier la page Web actuelle comme s’il s’agissait d’un document modifiable. Cliquez quelque part pour insérer votre curseur et tapez du texte. Utilisez les touches Retour arrière ou supprimer pour supprimer du texte, des images et d’autres éléments.

cela change simplement la façon dont la page Web apparaît dans votre navigateur. Dès que vous actualisez la page, vous verrez à nouveau l’original., Si vous accédez à une autre page web ou à un autre onglet, il ne sera pas en mode conception tant que vous n’aurez pas ouvert la console et tapé à nouveau cette ligne.

Vous pouvez même retourner dans la console et exécuter la commande suivante pour désactiver le mode de conception:

document.designMode = 'off'

la page web ne sera plus modifiable, mais vos modifications seront conservées jusqu’à ce que vous actualisiez la page.