Dans ce tutoriel , vous apprendrez comment utiliser les outils de développement Chrome pour ajuster les styles et les scripts sans apporter de modifications au code source original. Il vous montrera comment effectuer des tests approfondis et des ajustements sur votre site Web à l'aide des Overrides et de l'espace de travail de Chrome, sans avoir à toucher le fichier serveur d'origine.
Principales conclusions
- Avec les Overrides, vous pouvez remplacer localement des fichiers pour effectuer des tests et des ajustements.
- L'espace de travail vous permet de connecter votre dossier de développement local aux outils de développement Chrome pour apporter des modifications directement.
- Ces deux fonctionnalités sont très utiles pour déboguer les problèmes en environnement de production sans influencer le code serveur original.
Guide étape par étape
Pour utiliser efficacement les outils de développement de Chrome, suivez ces étapes :
1. Utilisation des Overrides
Commencez par utiliser la fonctionnalité des Overrides de Chrome. Choisissez un fichier JavaScript, par exemple main.js, qui est chargé par le serveur.
Cliquez avec le bouton droit sur le fichier et sélectionnez "Remplacer le contenu" dans le menu contextuel.
Une boîte de dialogue s'ouvre, vous permettant de choisir l'emplacement du fichier local. Assurez-vous d'avoir déjà créé un dossier dans lequel vous souhaitez placer vos fichiers de remplacement.
Sélectionnez le dossier souhaité et cliquez sur "Sélectionner un dossier". Cela établira la connexion entre le fichier d'origine et votre fichier local.
Vous devrez maintenant autoriser le navigateur à accéder à ce répertoire. Cliquez à nouveau sur le menu Overrides et assurez-vous que l'autorisation d'accéder au répertoire souhaité est activée.
2. Création d'un fichier local
Vous pouvez maintenant créer un nouveau fichier dans le dossier de remplacement. Ouvrez le fichier et ajoutez par exemple un simple script alert ().
Vous pouvez ajuster le contenu comme bon vous semble. Enregistrez le fichier et actualisez la page pour voir que la fenêtre d'alerte s'affiche désormais, au lieu du fichier initialement chargé par le serveur.
3. Vérification de l'activité réseau
Pour vous assurer que le fichier n'est plus chargé par le serveur, ouvrez l'onglet Réseau dans les outils de développement. Vous devriez voir que le fichier main.js n'est plus récupéré du serveur, mais que les contenus localement remplacés le sont à la place.
Si vous souhaitez ajouter d'autres Overrides ou supprimer des existants, accédez à la section Overrides, où vous trouverez un aperçu de tous les Overrides activés.
4. Utilisation de l'espace de travail
Ensuite, configurez l'espace de travail. Vous pouvez connecter votre dossier de développement local aux outils de développeur. Accédez aux paramètres des outils de développeur et recherchez l'option "Espace de travail".
Sélectionnez le dossier dans lequel se trouvent vos projets. Chrome aura également besoin d'autorisation pour accéder à ce dossier, alors assurez-vous d'avoir accordé les autorisations nécessaires.
5. Modifications du Code
Maintenant, vous pouvez travailler directement dans l'Espace de travail. Par exemple, ouvrez votre fichier main.js, apportez des modifications et enregistrez le fichier. Le code sera automatiquement rechargé par le serveur, et vous pourrez immédiatement voir comment l'adaptation affecte votre site Web.
6. Débogage dans l'Espace de travail
Un avantage pratique de l'Espace de travail est que vous pouvez définir des points d'arrêt pour déboguer efficacement votre code. Placez des points d'arrêt dans les lignes de votre code et actualisez la page pour interrompre l'exécution et vérifier l'état actuel des variables.
7. Avantages et Inconvénients
Malgré l'utilité de l'Espace de travail, de nombreux développeurs recommandent d'apporter des modifications directement dans un éditeur de code comme Visual Studio Code et d'y enregistrer les fichiers. Cela permet de mieux voir quelle version des fichiers est utilisée. L'utilisation de l'Espace de travail peut devenir confuse, en particulier lorsque le lien avec les fichiers originaux n'est pas clair.
Cependant, si vous ne modifiez que des fichiers CSS simples ou du code non transpilé, l'Espace de travail peut être une bonne option.
Résumé
Dans ce guide, vous avez appris comment travailler avec les Substitutions et l'Espace de travail dans les outils de développement Chrome pour personnaliser les styles et les scripts sans toucher au fichier serveur d'origine. Les Substitutions vous permettent d'apporter rapidement des modifications, tandis que l'Espace de travail vous permet de travailler directement avec votre dossier de développement.
Questions Fréquemment Posées
Puis-je utiliser les Substitutions également pour les fichiers CSS?Oui, vous pouvez également utiliser les Substitutions pour les fichiers CSS. Il suffit de sélectionner le fichier CSS souhaité et d'activer la Substitution.
Comment désactiver les Substitutions?Vous pouvez désactiver les Substitutions en vous rendant dans les outils de développement, puis en les désactivant ou en les supprimant.
Y a-t-il des limitations pour l'Espace de travail?Oui, il peut parfois être problématique d'identifier le bon Espace de travail, en particulier avec du code transpilé.
Pourquoi devrais-je utiliser les Substitutions plutôt que l'Espace de travail?Les Substitutions offrent un moyen plus clair d'apporter des modifications sans se perdre avec différentes versions des fichiers. Elles sont souvent plus faciles à gérer si vous ne souhaitez pas modifier directement les fichiers originaux.
