Remplacer les ressources de page web avec des copies locales (onglet Remplacements)

  • Article

Parfois, vous devez essayer certains correctifs possibles pour une page web, mais vous n’avez pas accès aux fichiers sources, ou la modification de la page nécessite un processus de génération lent et complexe. Vous pouvez déboguer et résoudre tous types de problèmes dans DevTools. Mais les modifications ne sont pas persistantes ; une fois que vous avez actualisé le fichier local, tout votre travail a disparu. La fonctionnalité Remplacements de l’outil Sources vous permet de résoudre ce problème.

Vous pouvez maintenant prendre une ressource de la page web actuelle et la stocker localement. Lorsque vous actualisez la page web, le navigateur ne charge pas la ressource à partir du serveur ; au lieu de cela, le navigateur remplace la ressource serveur par votre copie locale de la ressource.

Configuration de votre dossier local pour stocker les remplacements

  1. Cliquez avec le bouton droit sur une page web, par https://microsoftedge.github.io/Demos/demo-to-do/exemple , puis sélectionnez Inspecter. DevTools s’ouvre.

  2. Sélectionnez l’outil Sources (icône Sources).

  3. Dans le volet Navigateur (à gauche), cliquez sur l’onglet Remplacements (regroupé avec l’onglet Page ) ; si nécessaire, cliquez sur le bouton Plus d’onglets (v) :

    Outil Sources avec un espace insuffisant pour afficher l’option overrides

  4. Sélectionnez l’onglet Remplacements , puis cliquez à nouveau sur le bouton Plus d’onglets pour réduire les onglets :

    Sélection de l’onglet Remplacements

  5. Cliquez sur + Sélectionner un dossier pour les remplacements :

    Sélection d’un dossier à utiliser pour les remplacements

  6. Dans la boîte de dialogue de navigation des fichiers, sélectionnez un dossier sur votre ordinateur local pour stocker les fichiers de ressources que vous souhaitez remplacer, par C:\Users\myusername\overridesexemple , puis cliquez sur le bouton Sélectionner un dossier .

    DevTools vous avertit que vous devez disposer d’un accès complet au dossier et que vous ne devez pas révéler d’informations sensibles :

    Octroi à DevTools de l’accès à un dossier

  7. Cliquez sur le bouton Autoriser .

    Sous l’onglet Remplacements , une case à cocher s’affiche en regard de Activer les remplacements locaux. À droite de l’option Activer les remplacements locaux se trouve une icône Effacer la configuration qui vous permet de supprimer vos paramètres de remplacements locaux. Vous avez maintenant terminé la configuration de votre dossier et vous êtes prêt à remplacer les ressources actives par des ressources locales :

    Installation réussie d’un dossier overrides

Ajout de fichiers à votre dossier Overrides

Ensuite, ajoutez des fichiers à votre dossier Overrides, comme suit. Cet exemple ajoute un fichier CSS.

  1. Sélectionnez l’outil Éléments , puis sous l’onglet Styles , cliquez sur le nom d’un fichier CSS, par to-do-styles.cssexemple :

    Sélection d’un fichier dans l’inspecteur de styles

    L’outil Sources s’ouvre, avec le fichier sélectionné ouvert dans un onglet dans le volet de l’éditeur.

  2. Dans le volet de l’éditeur, cliquez avec le bouton droit sur l’onglet du fichier, par exemple to-do-styles.css, puis sélectionnez Remplacer le contenu :

    Cliquez avec le bouton droit sur un nom de fichier, puis sélectionnez « Enregistrer pour les remplacements »

    Dans l’onglet du fichier, une icône de page avec un point violet est ajoutée, et dans l’onglet Remplacements , le fichier est ajouté :

    Dans l’éditeur Sources, ajout du nom du fichier à la liste des remplacements

    Dans cet exemple, le fichier est répertorié comme suit : microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

    Le fichier est stocké dans un nouveau répertoire qui se trouve dans votre dossier overrides (par exemple, dans C:\Users\myusername\overrides).

  3. Dans Explorateur de fichiers ou finder, vérifiez que DevTools a créé un sous-dossier nommé à l’aide de l’URL du fichier (par exemple, microsoftedge.github.io) et qu’il contient la structure de répertoires correcte, telle que C:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\styles. Le fichier de substitution est stocké dans ce répertoire.

    Dans le volet de l’éditeur de l’outil Sources , une icône de page avec un point violet est ajoutée à l’onglet du fichier. Le point violet indique que le fichier est un fichier local qui remplace le fichier retourné par le serveur web :

    Le stockage du fichier dans votre dossier overrides ajoute un point violet à l’icône de page

Modification du style à l’aide du fichier de remplacement

Dans la suite de ce qui précède, vous pouvez maintenant modifier les styles de la page web à l’aide de votre fichier CSS de remplacement local (dans cet exemple, to-do-styles.css). Ajoutez une bordure rouge épaisse autour du corps de la page web rendue, comme suit :

  1. Dans DevTools, sélectionnez l’outil Éléments (icône d’outil Éléments), puis vérifiez que l’onglet Styles est sélectionné.

  2. Copiez la propriété de style CSS suivante, puis collez-la dans la règle CSS d’élément existant body qui se trouve dans votre fichier de remplacement CSS, par to-do-styles.cssexemple :

    border: 10px solid firebrick

    Modification permanente des styles de page web en modifiant un fichier dans votre dossier overrides

    Une bordure rouge épaisse (« firebrick ») est ajoutée autour du corps de la page web rendue, et le fichier CSS modifié est automatiquement enregistré sur votre ordinateur, dans votre répertoire Overrides.

  3. Actualisez la page web.

    La bordure rouge épaisse reste affichée, et aucune de vos tâches n’est perdue, comme cela aurait été le cas si le rendu du fichier CSS retourné par le serveur web au lieu d’utiliser le fichier de remplacement local.

Ajout de fichiers aux remplacements à partir d’autres onglets ou outils

  1. Continuez à partir de ci-dessus, sélectionnez l’outil Sources (icône Sources), puis sur la gauche, sélectionnez l’onglet Page (regroupé avec l’onglet Remplacements ).

  2. Dans l’arborescence des fichiers de ressources de la page, développez le dossier styles . Les fichiers qui sont déjà placés dans votre dossier overrides (à l’aide de l’onglet Remplacements ), tels que to-do-styles.css, ont un point violet sur l’icône.

  3. Cliquez avec le bouton droit sur un autre fichier, tel que (index) (qui est index.html), puis sélectionnez Remplacer le contenu :

    Sélection d’un fichier à partir de l’outil Sources pour les remplacements

    Sous les onglets Page et Remplacements de l’outil Sources , l’icône du fichier devient une icône de page avec un point violet (par exemple pour index.html), et le fichier est ajouté au répertoire Overrides de votre lecteur local.

  4. Sélectionnez l’outil Réseau (icône d’outil réseau), cliquez avec le bouton droit sur un fichier de ressources pour la page web, par exemple to-do.js, puis sélectionnez Remplacer le contenu :

    Sélection d’un fichier à partir de l’outil Réseau pour les remplacements

    Dans l’interface utilisateur DevTools, l’icône du fichier devient une icône de page avec un point violet (comme pour to-do.js), et le fichier est ajouté au répertoire Overrides de votre lecteur local.

    Lorsque les remplacements sont en vigueur, les fichiers de ressources qui se trouvent sur votre ordinateur dans votre dossier Overrides sont utilisés, plutôt que les fichiers de ressources retournés par le serveur web.

Interaction bidirectionnel des remplacements

Utilisez l’éditeur fourni avec l’outil Sources de DevTools ou tout éditeur que vous souhaitez modifier les fichiers. Les modifications sont synchronisées entre tous les produits qui accèdent aux fichiers dans le dossier overrides.