Conseils utiles

15 conseils et astuces à connaître pour les outils de développement Chrome

Pin
Send
Share
Send
Send


Il existe de nombreux articles en ligne sur les fonctionnalités secrètes de l'outil de développement Chrome pour les développeurs. Récemment, j'ai trouvé une note de sujet relative à la conception. Son avantage est qu'il décrit des actions très simples: changer la couleur, les classes, le texte de la page, etc. Il me semble que ce sont des informations plus pratiques et utiles à la fois pour les débutants en mise en page et pour ceux qui travaillent régulièrement avec elle. Personnellement, j'utilise activement 90% de ces exemples, mais les «secrets» ne le sont pas vraiment. Dans la publication d'aujourd'hui, je partagerai certaines de mes meilleures pratiques et d'autres fonctionnalités utiles.

Avant de pouvoir utiliser Chrome Devtools, vous devez l'exécuter. Contrairement à de nombreuses autres extensions Chrome pour le développement, cet outil est directement intégré au navigateur. Il y a plusieurs façons de l'ouvrir:

1. Dans le menu principal, sélectionnez "Autres outils", puis dans la liste déroulante "Outils de développement".

2. Appelez le menu contextuel à la place de la page Web qui vous intéresse (texte / image, menu, etc.), puis cliquez sur le lien "Inspecter l'élément".

3. Il y a des raccourcis clavier:

  • Pour Windows, cette combinaison: "Ctrl + Maj + I" ou la touche "F12".
  • Pour Mac - "Cmd + Opt + I"

Comment éditer le code HTML / CSS

En principe, la principale fonction pour laquelle j'utilise Google Chrome Devtools est de modifier le code à la volée et de vérifier les paramètres de style. Parmi toutes les options d’inclusion, je sélectionne l’élément de menu contextuel «Inspecter l’élément», car immédiatement avant d'ouvrir les éléments correspondant à l'objet souhaité.

Vous voyez HTML à gauche et CSS à droite. Ici, vous pouvez changer et insérer de nouveaux tags, éditer du texte, ajouter / modifier des styles, etc. Et vous voyez tous les changements immédiatement sur le site dans la fenêtre supérieure. D'utile, d'ailleurs, CSS affiche également les fichiers dans lesquels certaines règles sont définies - il vous sera plus facile de trouver le code dont vous avez besoin.

1. Changement rapide de fichier

Si vous avez utilisé Sublime Text, vous ne pourrez probablement pas vivre sans “Go to what” (Note du traducteur: pour les utilisateurs d’Idea, cette fonction s’appelle «Rechercher partout» et est appelée en appuyant deux fois sur la touche Maj.). Vous serez heureux d'apprendre qu'une fonction similaire se trouve dans les outils de développement. Appuyez sur Ctrl + P (Cmd + P pour les utilisateurs Mac) lorsque le panneau de développement est ouvert pour rechercher et ouvrir rapidement n’importe quel fichier de votre projet.

2. Rechercher dans le code source

Mais que faire si vous voulez chercher dans le code source? Pour rechercher dans tous les fichiers téléchargés sur la page, appuyez sur Ctrl + Maj + F (Cmd + Opt + F). Cette méthode de recherche prend également en charge les recherches d’expression régulière.

3. Aller à la ligne

Une fois que vous avez ouvert le fichier dans l’onglet Sources, les outils de développement vous permettent d’accéder à n’importe quelle ligne de ce fichier. Pour ce faire, appuyez sur Ctrl + G pour Windows et Linux (ou Cmd + L pour Mac), puis entrez le numéro de ligne.

Une autre méthode consiste à appuyer sur Ctrl + O, mais au lieu du texte à rechercher, entrez ":" et le numéro de ligne (Note du traducteur: mais vous pouvez aller encore plus loin et entrer le nom du fichier et le numéro de ligne en utilisant ":" comme séparateur, tandis que la saisie du nom du fichier est totalement facultative, il s'agit d'une recherche).

4. Récupération des éléments DOM à l'aide de la console

La console de l'outil de développement prend en charge plusieurs fonctions et variables «magiques» utiles pour l'extraction DOM:

  • $ () - équivalent à document.querySelector (). Renvoie le premier élément correspondant au sélecteur CSS. Par exemple, $ ('DIV') renverra le premier élément div de la page.
  • $$ () - équivalent à document.querySelectorAll (). Retourne une liste d'éléments (Note du traducteur: nommément NodeList) qui correspond au sélecteur CSS donné.
  • $ 0 - $ 4 représente l'historique des cinq derniers éléments DOM sélectionnés dans l'onglet Eléments, où $ 0 sera le dernier.

Découvrez plus de fonctions de la console ici.

5. Utilisation de plusieurs chariots et sélections

Lorsque vous modifiez un fichier, vous pouvez installer plusieurs chariots en maintenant la touche Ctrl (Cmd pour Mac) enfoncée et en cliquant à l'endroit voulu pour pouvoir installer les chariots à plusieurs endroits simultanément.

6. Conserver le journal

Lorsque vous activez l'option Conserver le journal sous l'onglet Console, les résultats sont enregistrés et non effacés chaque fois que la page est chargée. Cela est pratique si vous souhaitez afficher l'historique des erreurs qui apparaissent avant de quitter la page.

(Note du traducteur: Une propriété similaire se trouve sur l'onglet Réseau. Lorsqu'il est activé, l'historique des requêtes cesse d'être effacé lors de la navigation entre les pages. Cependant, si la page était configurée pour rediriger à l'aide de JavaScript et que toute autre requête était exécutée, il est presque toujours impossible d'afficher le résultat de cette requête. N'oubliez pas de désactiver ces propriétés lors d'un débogage long! Les outils de développement consomment presque toujours plus de ressources système que la page elle-même!)

7. Confection de sources minimisées

Les outils de développement Chrome ont un «prétendant» intégré de codes source minimisés pour un aspect lisible. Le bouton est situé dans le coin inférieur gauche du fichier actuellement ouvert dans l'onglet Sources.

(Note du traducteur: parfois, il est impossible d’activer cette propriété automatiquement, comme par exemple dans FireFox)

8. Mode appareil

Les outils de développement incluent un mode puissant pour développer des pages optimisées pour les appareils mobiles. Cette vidéo de Google présente la plupart de ses fonctionnalités avancées, telles que la modification de la résolution de l'écran, l'émulation tactile sur l'écran tactile et l'émulation d'une connexion réseau de qualité médiocre.

9. Emulation des capteurs de l'appareil

Une autre fonctionnalité intéressante du mode appareil est la possibilité de simuler les capteurs des appareils mobiles, tels que les écrans tactiles et les accéléromètres. Vous pouvez même indiquer vos coordonnées géographiques. L'objet est situé au bas de l'onglet Eléments dans Emulation -> Capteurs.

10. Sélection de la couleur

Lorsque vous choisissez une couleur dans l'éditeur de style, vous pouvez cliquer sur l'échantillon de couleur pour afficher une fenêtre de sélection de couleur. Lorsque cette fenêtre est ouverte, le curseur de votre souris se transforme en une loupe grossissante pour sélectionner la couleur de la page, avec une précision au pixel près.

12. Afficher le DOM de l'ombre

Des éléments tels que les champs de saisie et les boutons, les navigateurs, créent à partir d'autres éléments de base généralement masqués. Cependant, vous pouvez accéder à Paramètres -> Général et activer le Afficher le DOM fantôme de l'agent utilisateur pour afficher ces éléments de base dans l'onglet Éléments. Cela vous donnera la possibilité de les organiser individuellement.

14. Changer le format de couleur

Avec Maj + Clic sur la nuance de couleur dans le panneau d’édition CSS, le format de couleur sera changé en RGBA, HSL hexadécimal (Note du traducteur: en même temps qu'une forme abrégée hexadécimale et la forme complète, et même dans le registre de la capitale. Si cela ne vous convient pas, le navigateur essaiera de trouver la couleur donnée dans la liste des constantes de couleur standard. Le seul inconvénient de cette fonctionnalité est que, pour sélectionner le format souhaité, vous devez souvent “craquer” toutes les autres options possibles).

15. Modification de fichiers locaux dans l'espace de travail

Les espaces de travail constituent une barre d’outils puissante pour un panneau de développement qui transforme les outils de développement en un environnement de développement intégré. L'espace de travail contient la structure de fichier dans l'onglet Sources en fonction de la structure de votre projet local. Vous pouvez donc maintenant modifier et enregistrer directement, sans avoir à copier et coller les modifications dans un éditeur de texte externe.

Pour configurer des espaces de travail, accédez à l’onglet Sources (Note du traducteur: Pour ce faire, activez la barre de navigation si elle est masquée. Pour ce faire, cliquez sur le bouton Afficher le navigateur dans le coin supérieur gauche de l'onglet) et cliquez avec le bouton droit n'importe où dans le panneau du navigateur ou faites simplement glisser l'ensemble de l'onglet du projet dans le panneau du développeur. Maintenant, le dossier sélectionné, ses sous-répertoires et tous les fichiers qu'il contient seront modifiables quelle que soit la page sur laquelle vous vous trouvez. Pour encore plus de commodité, vous pouvez utiliser les fichiers utilisés sur cette page, ce qui vous permettra de les éditer et de les sauvegarder.

UPD. Note du traducteur:

Le dossier ajouté sera accessible à partir de tous les onglets. Par conséquent, si votre projet contient plusieurs fichiers HTML, il vous suffira de l'ouvrir dans un onglet de navigateur voisin.

Vous pouvez en apprendre plus sur les espaces de travail ici.

Emulation de tailles d'écran, de périphériques

Dans l'article sur l'affichage du site à différentes résolutions d'écran, j'ai mentionné plusieurs services sur le sujet, bien que la tâche soit résolue encore plus facilement - à l'aide de l'outil de développement Google Chrome Devtools.

Dans le coin inférieur gauche, un bouton permet de passer de l’écran à la version mobile / flexible, où vous pouvez définir la taille de la fenêtre du navigateur. Pour plus de commodité, les paramètres des smartphones (Pixel, iPhone) et des tablettes (iPad) y sont automatiquement répertoriés. Vous pouvez toutefois définir des valeurs de largeur / hauteur. Avec cette chose, je cherche généralement des erreurs dans la conception réactive pendant le développement.

Modification du contenu à la volée (designMode)

Le contenu des modèles modernes est généralement dynamique, leur conception doit donc s'adapter correctement aux différentes situations et à la longueur des textes. Parfois, la saisie d'une ligne suffisamment grande peut perturber l'apparence de la page.

Pour vérifier si tout va bien, vous pouvez modifier le contenu / les en-têtes directement dans le navigateur - pour cela, allez dans l'onglet “Console”, où vous écrivez la directive document.designMode = “on”, puis appuyez sur Entrée.

Vous pourrez ensuite éditer la page de contenu dans la fenêtre supérieure. En fait, j’ai utilisé une astuce similaire, mais j’ai tout fait dans l’onglet HTML, mais de toute façon, bien sûr, c’est plus visuel et efficace.

Cacher des objets

Cette méthode est utile pour changer rapidement l’aspect de la mise en page lorsque vous souhaitez voir son apparence sans objet. La deuxième raison pour laquelle je supprime l'une ou l'autre partie du modèle est la nécessité de prendre une capture d'écran sans celle-ci. Auparavant, je supprimais simplement l'objet de HTML, mais il s'avère qu'il existe une meilleure méthode: sélectionnez l'élément et cliquez sur le bouton "h". En fait, cette action active la propriété CSS de visibilité.

Commutation de classe rapide

Si vous avez besoin de comparer plusieurs options de conception, vous pouvez très clairement l'implémenter via Google Chrome Devtools. Pour ce faire, vous devez d'abord avoir les styles appropriés prescrits. Ensuite, modifiez directement le code HTML ou utilisez une solution plus esthétique:

Vous pouvez le tester dans cet exemple avec Codepen. Dans la fenêtre de droite, activez l'option ".cls", puis dans la ligne, écrivez le nom de la classe souhaitée et appuyez sur Entrée. Il sera ajouté à la liste des commutateurs. Ensuite, décochez / cochez les cases appropriées.

Éditeur visuel CSS

Pour certaines propriétés des styles CSS, Chrome Developer Tool dispose de boîtes de dialogue spéciales avec des paramètres qui simplifieront considérablement la vie des utilisateurs novices. Si vous déplacez le curseur de la souris vers le coin inférieur droit, une icône avec trois points apparaîtra à cet endroit et, lorsque vous la survolerez, un menu supplémentaire de fonctions.

Ils vous permettent de gérer des options telles que:

  • text-shadow - l'ombre du texte,
  • box-shadow - l'ombre du bloc,
  • couleur - couleur du contenu
  • background-color - couleur de fond.

Voici à quoi ressemblent ces outils d'aide:

Ils sont appelés non seulement pour créer des propriétés, mais également lors de leur modification. Toutes les valeurs sont immédiatement visibles sur la page, ce qui vous permet de tester différentes options de conception en temps réel. Les webmasters / designers débutants sont pratiques.

Enfin, une vidéo utile sur le sujet:

Total Cette extension pour Chrome contient beaucoup plus de fonctions utiles. À l'avenir, je pense donc à compléter l'article avec quelques modifications supplémentaires. Je conseille également de lire la documentation officielle où il y a une explication de toutes les options et des manuels de formation.

Utilisez-vous les outils de développement Google Chrome dans votre travail? Peut-être connaissez-vous d'autres façons intéressantes de l'utiliser?

Pin
Send
Share
Send
Send