6 extraits à conserver dans votre outil de développement Chrome

Cet article propose les six extraits que vous devez conserver dans votre outil de développement Chrome pour vous aider à expérimenter et à créer de meilleures applications.

D'après Kayce Basques rédacteur technique de Chrome DevTools, ce sont des extraits petits scripts que vous pouvez écrire et exécuter dans le panneau Sources de Chrome DevTools. Vous pouvez y accéder et les exécuter à partir de n’importe quelle page.

Lorsque vous exécutez un extrait de code, celui-ci s’exécute à partir du contexte de la page actuellement ouverte. La plupart du temps, nous utilisons de petits scripts utilitaires que nous utilisons sur plusieurs pages. Il est donc logique de les écrire sous forme d'extrait et de les réutiliser si nécessaire. Cela s'applique également aux scripts de débogage et, en règle générale, à toutes les fonctionnalités d'un bookmarklet habituel.

Dans cet article, nous allons examiner quelques extraits existants pour les garder à portée de main dans votre outil de développement Chrome afin de vous aider à mieux expérimenter et à construire. applications. Mais tout d’abord, commençons par vous montrer comment créer et exécuter votre propre extrait de code dans Chrome.

Créer un nouvel extrait

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

1. Ouvrez Chrome DevTools. Vous pouvez le faire en exécutant l'une des commandes suivantes:

• commande + control + c sur macOs
• control + shift + c sur Windows et Linux
• Cliquez avec le bouton droit de la souris sur le navigateur. et cliquez sur inspecter

1. Ouvrez le panneau Sources
2. Cliquez sur l'onglet Snippets
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 de code

Lorsque vous avez créé un nouvel extrait de code, entrez votre code dans l'éditeur fourni, enregistrez le code et exécutez l'extrait de code en cliquant avec le bouton droit de la souris sur l'extrait de code et en cliquant dessus, comme suit:

Nous avons maintenant compris le fonctionnement de l'onglet d'extrait de code en créant un nouvel extrait de code, en ajoutant un exemple de code et en exécutant l'extrait de code. Passons maintenant à l’activité de la journée et montrons-nous les extraits que vous, en tant que développeur, devriez conserver dans vos Outils de développement.

1. AllColors

AllColors est un bloc de code JavaScript qui affiche tous les styles calculés utilisés dans tous les éléments de la page. L'extrait utilise des appels stylés console.log pour imprimer toutes les couleurs utilisées sur la page, ce qui en facilite la visualisation et la mise en œuvre.

Il s'agit d'un extrait très utile à avoir dans vos outils de développement, car il ne vous montre pas seulement les styles CSS utilisés sur votre page Web actuelle, mais les enregistre également dans la console pour que vous puissiez les utiliser à votre guise. Vous pouvez trouver le code source allcolor.js sur ce référentiel Github .

2. DataUrl

DataUrl est un extrait de code qui vous permet de convertir toutes les images et les toiles d'une page Web en URL de données. Cela fonctionne en enregistrant toutes les URL de données converties dans la console, ce qui facilite la copie et la réutilisation, le cas échéant. Ouvrons un site Getty images et voyons-le en action:

Il convient de noter que cet extrait de code ne fonctionne que pour les images qui se trouvent sur les mêmes domaines que la page actuelle. Vous pouvez trouver le code source du fichier dataurl.js sur ce référentiel Github .

3. FormControls

FormControls est un extrait développé par Stefan Kienzle pour vous aider à tirer le meilleur parti d'un formulaire de votre page Web. Il montre tous les éléments de formulaire HTML avec leurs valeurs et types dans un joli tableau. Voyons comment cela fonctionne lorsque nous lançons l’extrait de code dans la page d’inscription Slack:

Ce n’est pas tout, l’extrait ajoute également un nouveau tableau pour chaque formulaire de la page. Par exemple, nous avons un formulaire à champs multiples pour name nom d'utilisateur email etc. Il va créer un tableau avec des valeurs et des types pour

Vous pouvez obtenir le code source du fichier formcontrols.js dans ce référentiel Github .

4. ShowHeaders

Ceci est un autre extrait intéressant que vous devriez absolument conserver dans vos outils de développement. Lorsque vous l'exécutez, tous les en-têtes HTTP de la page actuelle de la console sont imprimés. C'est également un bon moyen de tester manuellement vos en-têtes de requête et de réponse d'API en développement. Voyons comment cela fonctionne dans la même page d’inscription à l’espace de travail Slack:

L’extrait de code enregistre tous les en-têtes sur la console à l’aide de console.table . Extrayez le code source de l'extrait de showHeaders.js sur ce dépôt Github et conservez-le dans vos outils de développement pour pouvoir l'expérimenter et l'utiliser. HashLink

HashLink est un fragment de code qui trouve l'élément pouvant être lié le plus proche sur une page et le consigne dans la console. Cela fonctionne comme ceci: vous exécutez d’abord l’extrait de code, puis, sur la page, vous cliquez sur l’élément souhaité et le journal enregistre le lien le plus proche de cet élément dans la console. Voici une démonstration sur la page de documentation de Docker:

Grâce au lien que l'extrait de code a consigné dans la console, nous avons pu accéder au même élément dans un autre onglet de navigateur. Cela est pratique lorsque vous faites défiler une longue page et que vous avez besoin d’un moyen de revenir rapidement à une section particulière de la page. Vous pouvez obtenir le code source du fichier hashlink.js sur ce référentiel Github .

6. InsertCSS

Ceci est un autre extrait qui vous fera beaucoup de bien à conserver dans vos outils de développement. InsertCSS vous aide à éjecter vos propres styles CSS sur une page Web existante et à prévisualiser les effets. D'abord, vous exécutez le script, puis appelez l'extrait de code dans la console avec vos styles préférés, puis il prendra effet sur la page Web. Voyons la démonstration sur la page Google Chrome Github:

Avez-vous déjà visité un site Web et vous vous demandez ce qu’il voudrait s’il était présenté de manière différente? Et si cet élément avait une couleur différente, si le rembourrage était plus petit, etc.? Maintenant, vous pouvez changer tout cela vous-même et prévisualiser votre résultat imaginé avec cet extrait. N'hésitez pas à l'obtenir à partir de ce référentiel Github .

Conclusion

Dans cet article, nous vous présentons la fonctionnalité d'extraits de DevTools. Nous avons commencé par vous expliquer les extraits et en montrant également comment les créer et les exécuter dans Chrome. Nous vous avons également fourni une liste d’extraits déjà créés que vous pouvez conserver dans vos outils DevTools pour différents cas d’utilisation. Si vous souhaitez récupérer tous les extraits actuellement disponibles, Brian 1945 [Brian] a déjà fait un excellent travail en les compilant pour vous ici .