Suivi des modifications dans les sources de Chrome DevTool

Apprenez à modifier et à suivre les modifications persistantes apportées à votre code lors du débogage dans l'onglet Sources de Chrome DevTools.

Le panneau Sources de Chrome DevTools fournit de nombreuses fonctionnalités de développement et de débogage, allant de la manipulation du HTML et du CSS. contenu des pages Web à la persistance des données avec des remplacements et la création d'extraits. Dans cet article, nous allons nous intéresser davantage à la manière dont nous pouvons apporter et suivre les modifications dans le panneau Sources de DevTools.

Le panneau Sources

Avant de commencer, nous allons vous familiariser avec le panneau Sources. Parmi les fonctionnalités déjà mentionnées, le panneau Sources vous permet d'ajouter des points d'arrêt dans votre base de code pour des processus de débogage plus efficaces. Il vous permet également de configurer un espace de travail. Les espaces de travail vous permettent de sauvegarder dans votre système de fichiers les modifications apportées dans DevTools. Par conséquent, DevTools peut être utilisé comme éditeur de code .

Pour commencer à utiliser le panneau Sources, montrez comment ouvrir. dans Chrome DevTools. Vous pouvez le faire de différentes manières, mais je choisirai celle qui me convient le mieux.

Ouvrez le navigateur Google Chrome et ouvrez votre outil de développement avec le raccourci clavier:

• Commande + Options + J sur macOS ou
• Control + Shift + J sous Windows pour ouvrir la console DevTools.
  

Passez maintenant à l'onglet Sources :

Merveilleux, maintenant que Après avoir ouvert le panneau Sources, expliquons comment suivre les modifications apportées à DevTools.

Suivi des modifications dans les sources

Avant de passer au processus de suivi des modifications, démontrons tout d'abord comment changer et ensuite le suivre à des fins pratiques. Le panneau Sources contient l’onglet Remplacer qui nous permet d’apporter des modifications à DevTools et de conserver ces modifications lors du rechargement de page.

Remplacements

Les remplacements vous permettent d’apporter des modifications à DevTools et de les conserver d’un chargement de page à l’autre. Normalement, vous perdez toutes les modifications apportées à DevTools lorsque vous rechargez la page du navigateur. Toutefois, avec les remplacements, vous pouvez conserver ces modifications et les conserver tout au long du rechargement de pages. Cela fonctionne pour la plupart des types de fichiers, à quelques exceptions près.

Comment cela fonctionne:

• Vous devez d'abord spécifier un répertoire dans lequel DevTools enregistrera les modifications apportées
• . , une copie modifiée est enregistrée dans votre répertoire
• Lorsque la page est rechargée, DevTools vous donne le fichier local modifié.

Les remplacements de configuration:

• Ouvrez le panneau Sources
• . l'onglet Remplacements
• Cliquez sur Les remplacements de configuration
• Sélectionnez le répertoire dans lequel vous souhaitez enregistrer vos modifications
• En haut de la fenêtre, cliquez sur Autoriser pour donner à DevTools un accès en lecture et en écriture au répertoire
• Apportez vos modifications

Changements persistants

L'une des caractéristiques uniques des navigateurs modernes est que vous pouvez manipuler les couleurs, inspecter les éléments et enregistrer les résultats immédiatement. de vos modifications sur le navigateur. Le problème ici est que ces modifications ne persistent pas – par conséquent, si vous accédez à une autre page ou probablement même si vous rechargez la page en cours, toutes vos modifications sont perdues.

Dans la dernière mise à jour de Chrome, nous avons une nouvelle fonctionnalité. appelées «substitutions locales». Cela nous permet de rendre ces modifications persistantes localement, afin que vous ne perdiez pas vos modifications lors du rechargement de page. Voyons comment cela fonctionne à partir de notre dernière image.

Cliquez sur Sélectionnez un dossier pour les remplacements afin de sélectionner un dossier personnalisé dans lequel les modifications seront conservées.

Nous avons ajouté ici un dossier appelé Remplacements aux substitutions. languette. Notez que nous avons maintenant Activer les dérogations locales cochées. Maintenant, apportons quelques modifications à la page d'accueil google.com et maintenons-la dans notre dossier remplace le .

Vous pouvez désormais modifier le Web. page, puis rechargez la page et Chrome continuera à utiliser les modifications que vous avez apportées.

Suivi de vos modifications

Maintenant que nous avons apporté et maintenu une modification dans DevTools, voyons comment nous pouvons suivre toutes nos modifications.

Avec la dernière version de Chrome, nous pouvons utiliser une nouvelle fonctionnalité appelée l'onglet Changes pour suivre tous les changements apportés à notre page Web. Depuis que nous avons configuré la persistance avec des substitutions, apportons une modification à notre page Web personnalisée et voyons comment elle est suivie à l'aide de l'onglet Modifications .

Voici comment cela fonctionne. nous ouvrons le panneau Sources et ouvrons le fichier sur lequel nous avons l'intention d'apporter des modifications (sous l'onglet Page). Ensuite, nous faisons notre changement et économisons. Aussi nous rechargeons la page pour nous assurer que notre changement a persisté. Ensuite, nous ouvrons l'onglet Modifications en cliquant avec le bouton droit de la souris dans l'éditeur et en sélectionnant Modifications locales pour ouvrir notre onglet Modifications dans lequel nous pouvons voir les modifications apportées. C’est exactement ce que nous avons démontré dans le gif ci-dessus.

Limitations

• DevTools n’enregistre pas les modifications apportées au panneau Arborescence des éléments DOM. Par conséquent, pour conserver et suivre vos modifications, vous devrez modifier les fichiers HTML dans le panneau Sources.
• Si vous modifiez CSS dans le volet Styles et que la source de ce CSS est un fichier HTML, DevTools n'enregistre pas. le changement. Comme auparavant, pour suivre les modifications, vous devez modifier le fichier HTML dans le panneau Sources.

Conclusion

Dans cet article, nous avons examiné les fonctionnalités du panneau Sources et expliqué comment utiliser la fonctionnalité de remplacement. faire et de conserver les modifications et comment nous pouvons suivre ces modifications à l’aide de l’onglet Modifications. Nous pouvons faire beaucoup plus dans DevTools et plus particulièrement dans le panneau Sources. N'hésitez pas à consulter la documentation officielle pour plus d'informations.

Pour plus d'informations sur la création d'excellentes applications Web:

Vous voulez en savoir plus sur la création d'excellentes interfaces utilisateur? Découvrez Kendo UI – notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.