Le panneau Sources Chrome DevTools

Il est facile de visualiser et de modifier toute page du navigateur avec Chrome DevTools. Le panneau Sources est un composant puissant de DevTools. Voyons comment il peut nous aider à améliorer notre développement.

Chrome DevTools est un ensemble d’outils de développement Web directement intégrés à Google Chrome . . DevTools aide les développeurs à modifier des pages à tout moment et à identifier rapidement les problèmes, ce qui permet au développeur de créer plus rapidement de meilleurs sites Web.

Grâce à DevTools, il est facile de visualiser et de modifier n’importe quelle page du navigateur en inspectant simplement ses éléments. changer les valeurs HTML et CSS. Dans cet article, nous discuterons du panneau DevTools Sources et de tous ses composants. Pour commencer, commençons par montrer comment ouvrir DevTools sur votre navigateur. Voici quelques manières de le faire, comme nous le verrons plus loin:

Ouvrez DevTools

Pour ouvrir Chrome DevTools, suivez l'une des étapes suivantes:

1. Utilisez les raccourcis clavier en exécutant les commandes suivantes:
       
   • Command + Control + C sur macOs
             
   • Ctrl + Maj + C sous Windows et Linux
             
2. Inspectez la page en cliquant avec le bouton droit n'importe où dans le navigateur, puis en cliquant sur Inspecter
3. Utiliser le menu principal de Chrome:
       
   1. Cliquez sur le bouton de menu Chrome
   2. Sélectionnez Autres outils
   3. Sélectionnez Outils de développement

Le panneau Sources

Par défaut, Chrome DevTools est ouvert aux éléments. comme on peut le voir sur l'image ci-dessus. Cependant, dans ce billet, nous nous intéressons au panneau Sources . Passons maintenant à la discussion, car nous en discuterons les composants dans ce message:

Sous le panneau Sources nous avons quatre composants distincts:

• Pages
      
• Système de fichiers
      
• Dérogations
      
• Extraits
      

Comme indiqué précédemment, nous examinerons ces composants en détail afin de mieux comprendre leurs caractéristiques et leurs cas d'utilisation, mais examinons tout d'abord les types d'actions que nous pouvons effectuer avec eux dans les Sources . panneau. Le panneau Sources nous permet d'effectuer de nombreuses opérations sur le navigateur, parmi lesquelles:

Limitations

Comme indiqué précédemment, les Sources Le panneau a ses limites. Ils comprennent:

• Vous ne pouvez pas enregistrer les modifications apportées à l'arbre DOM DOM du panneau Elements . Par conséquent, vous devrez modifier le code HTML dans le panneau Sources .
      
• Si vous modifiez le code CSS dans le volet Styles et que la source de ce fichier CSS est un fichier HTML, DevTools n'enregistrera pas les modifications. Par conséquent, vous devrez également modifier le fichier HTML dans le panneau Sources .
      

Passons maintenant à ces opérations en détail sous leurs composants respectifs pour vous aider à mieux comprendre. Commençons par les remplacements.

Remplacements

Les remplacements locaux 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.

Fonctionnement:

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

Modifications de configuration:

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

Système de fichiers

Le système de fichiers peut être désigné comme étant les méthodes et les structures de données utilisées par DevTools pour garder une trace de la façon dont les fichiers sont organisés sur un disque. Ce disque est également appelé disque utilisé pour stocker les fichiers ou le type du système de fichiers . Le système de fichiers vous permet d'ajouter un dossier local à votre espace de travail et de le modifier dans le navigateur.

Le système de fichiers permet à Chrome de servir en tant qu'EDE pour les développeurs, car cela nous donne la possibilité d’apporter des modifications aux fichiers locaux.

Fonctionnement:

Pour mieux comprendre comment cela fonctionne, ouvrons un dossier de projet dans Filesystem et apportons les modifications nécessaires. fichiers de projet qui s'y trouvent.

• Ouvrez le navigateur Google Chrome et ouvrez votre DevTools chrome. (Vous pouvez utiliser le raccourci Commande + Options + J sur Mac ou Ctrl + Maj + J sur Windows pour ouvrir la console.

Configurer le système de fichiers

Pour commencer, ouvrez l'outil DevTools et passez à l'onglet Sources :

Comme le suggère l'instruction à l'écran, nous pouvons faire glisser notre dossier de projet dans le visible. fenêtre d'espace de travail. Une fois que vous avez fait glisser le dossier dans l'espace de travail, vous obtenez une invite:

Cliquez sur Autoriser. Le dossier de votre projet sera correctement configuré dans l'onglet Système de fichiers situé sous votre navigateur. Maintenant, lorsque vous cliquez sur l'onglet Système de fichiers vous devriez pouvoir voir les fichiers de votre projet:

Maintenant que notre projet est correctement configuré sur Chrome, nous pouvons aller de l'avant et faire en sorte modifications apportées à nos fichiers de projet directement à partir de Chrome. Tout d’abord, pour simplifier les choses, jouons avec les noms des membres de notre équipe.

Ainsi, nous avons pu mettre à jour nos fichiers de projet locaux directement sur Chrome. Toutefois, nous ne pouvons le faire que dans les versions récentes de Chrome, car cela est autorisé par défaut lorsque vous cliquez sur le bouton d'autorisation qui vous a été demandé lorsque vous avez fait glisser le dossier de votre projet dans l'espace de travail de Chrome.

Extraits

scripts que vous pouvez exécuter, créer et exécuter dans le panneau Sources de Chrome DevTools. Lorsqu'un extrait est exécuté, il est exécuté à partir du contexte de la page actuelle.

Fonctionnement

Pour créer un extrait, procédez comme suit:

1. Ouvrez Chrome DevTools. Vous pouvez le faire en lançant l’une des commandes suivantes:
       
   • Command + Control + C sur macOs
             
   • Ctrl + Maj + C sous Windows et Linux
             
   •         Faites un clic droit n'importe où sur le navigateur et cliquez sur Inspecter
             
2. Une fois, vous êtes dans l’environnement DevTools:
       
   1. Ouvrez le panneau Sources
   2. Cliquez sur l'onglet Extraits
   3. Cliquez avec le bouton droit de la souris dans le navigateur
   4. Sélectionnez Nouveau pour créer et nommer un nouvel extrait

Exécuter l'extrait

lorsque vous avez créé un extrait. Nouvel extrait, entrez votre code dans l'éditeur fourni, sauvegardez le code et exécutez l'extrait en cliquant avec le bouton droit de la souris sur l'extrait et en cliquant sur exécuter comme suit:

Page

L'onglet Page permet d'afficher toutes les ressources disponibles sur la page en cours. Cela est surtout utile aux développeurs pour répliquer localement une structure de page car tous les niveaux de fichier / dossier sont explicitement exposés dans l'onglet de la page.

Structure de la page

Lorsque vous ouvrez une nouvelle page dans le navigateur , l’onglet Page du panneau Sources organisera toutes les ressources de cette page en fonction du contenu de la barre latérale:

• top page, il contient tous les autres dossiers de ressources.
      
• Le deuxième niveau, tel que www.google.com représente la page d'origine .
      
• Les troisième et quatrième niveaux représentent des répertoires et des ressources chargés à partir de cette origine.
      

Comment ça marche

Les dossiers de projet contiennent les fichiers de projet respectifs contenant toutes les ressources constituant la page en cours.

Lorsque vous ouvrez un dossier de projet et cliquez sur un fichier, il s'ouvre. dans le volet de l'éditeur, placez le fichier dans lequel vous pouvez consulter le contenu du fichier ou des images d'aperçu.

Conclusion

Dans ce billet, nous avons expliqué individuellement tous les composants du panneau Sources et examiné leurs caractéristiques et leurs cas d'utilisation éventuels. Il existe encore de nombreuses informations sur Chrome DevTools que nous n'avons pas couvertes et qui promettent d'améliorer votre expérience de développement et de conception. Vous feriez donc bien de consulter la documentation officielle de DevTool pour eux.

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.