Tutoriel 📑 Rendre permanentes les modifications d'Inspecter l'Élément

[Sylvain]

Introduction

La fonction "Inspecter l'Élément" de votre navigateur permet de faire des changements temporaires sur les scripts d'un site web, qui se réinitialisent à chaque rafraîchissement de la page. Pour rendre ces modifications permanentes, vous pouvez utiliser les extensions Permanent Inspect Element ou Tampermonkey.

---

Prérequis

• Navigateur Chrome ou Firefox

---

Procédure

Utiliser Permanent Inspect Element

• Rendez-vous sur le Chrome Web Store et cliquez sur Ajouter à Chrome pour installer l'extension Permanent Inspect Element à partir de cette page.

• Cliquez sur Ajouter l'extension dans la boîte de confirmation.

• Allez ensuite sur le site web où vous souhaitez modifier les éléments, puis appuyez sur Ctrl + Shift + I pour ouvrir l'outil Inspecter l'Élément.

• Apportez les modifications souhaitées dans le panneau de droite.

• Fermez l'outil, cliquez sur l'icône des Extensions dans la barre d'outils du navigateur, et sélectionnez Permanent Inspect Element.

• Cliquez sur le bouton Enregistrer la page, puis attendez quelques secondes.

• Maintenant, lorsque vous rafraîchissez la page, les changements restent visibles et ne reviennent pas à la configuration originale du site.

• Pour réinitialiser les modifications, cliquez sur le bouton Réinitialiser. L'option Réinitialiser tout supprime les personnalisations pour tous les sites.

---

Utiliser Tampermonkey

• Installez Tampermonkey en vous rendant sur le site officiel Tampermonkey, laissez-le détecter votre navigateur, puis cliquez sur le bouton Obtenir depuis le Store.

• Faites les changements sur le site web souhaité en appuyant sur Ctrl + Shift + I pour inspecter les éléments.

• Créez un nouveau script en cliquant sur l'icône des Extensions, et sélectionnez Tampermonkey.

• Cliquez maintenant sur l'extension Tampermonkey, et sélectionnez Créer un nouveau script dans le menu déroulant.

• Vous verrez le script utilisateur :

// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 2024-01-16
// @description try to take over the world!
// @author You
// @match https://tutoriaux-excalibur.com/
// @icon https://www.google.com/s2/favicons?sz=64&domain=tutoriaux-excalibur.com
// @grant none
// ==/UserScript==

• Ajoutez un nom et une description, en laissant les autres champs tels quels. Assurez-vous que le champ match liste l'URL du site web.

• Collez les modifications que vous avez faites aux éléments dans la section ci-dessous.

• Une fois terminé, cliquez sur le menu Fichier et sélectionnez Enregistrer.

• Enfin, retournez sur le site web et rafraîchissez la page. Si tout est en ordre, les modifications devraient toujours être visibles.

---

Conseil

Tampermonkey est un outil plus avancé et est mieux adapté pour les utilisateurs qui comprennent JavaScript et CSS, parmi d'autres aspects du développement web.

---

Conclusion

Avec ces extensions, vous pouvez rendre permanentes les modifications apportées via l'outil Inspecter l'Élément de votre navigateur, offrant une flexibilité accrue pour personnaliser l'expérience web à votre convenance.