Libérer la puissance des extraits de Chrome DevTools

Le panneau Snippets de Chrome DevTools est un outil puissant qui est souvent négligé. Les extraits de code permettent à un développeur d'écrire, d'enregistrer et d'exécuter du code JavaScript personnalisé directement dans le navigateur. Cette fonctionnalité peut être utile pour expérimenter, déboguer et faire une démonstration de JavaScript sans avoir besoin de créer une nouvelle instance locale/dev/staging.

Dans cet article, je souhaite mettre en évidence les capacités du panneau Snippets tout en donnant quelques utilisations pratiques pour votre travail de développement quotidien.

Qu'est-ce que le panneau d'extraits de code ?

Le panneau Snippets de Chrome DevTools est essentiellement un mini-éditeur de code dans lequel vous pouvez écrire et enregistrer du code JavaScript réutilisable. Contrairement à la saisie de commandes dans la console, les Snippets vous permettent de :

• Enregistrez votre code pour le réutiliser.
• Exécutez des scripts en un seul clic.
• Partagez le code entre les sessions du navigateur.
• Déboguer les scripts à l'aide de points d'arrêt et d'expressions de surveillance.

Comment accéder

Vous pouvez accéder aux extraits de code en ouvrant DevTools (clic droit > Inspecter > Sources > Extraits).

Mais pourquoi ?

Dans mon article précédent, j'ai abordé différentes manières d'utiliser la console pour vous aider au débogage de votre site Web. Les extraits de code vont un peu plus loin. L'ajout de JavaScript directement à la console fonctionne, mais s'avère un peu fastidieux pour les tâches répétées. C'est là que les Snippets entrent en jeu. Cela permet de répéter et de développer des scripts.

Snippets se situe à mi-chemin entre la console et la création de votre propre instance locale.

Utilisations pratiques

Démos

À un moment donné de votre carrière, vous devrez probablement interagir directement avec un client ou faire une démonstration pour une équipe interne. Les extraits de code vous permettent d'afficher sur un site en direct où vous n'avez pas accès au code pour afficher les mises à jour potentielles. J'ai utilisé des extraits pour montrer aux clients le potentiel de certains changements, notamment les mises à jour CSS en masse, la réorganisation des sections et la manipulation d'un site en direct. La manipulation du CSS via la console ou la console Elements fonctionne bien pour une seule instance, mais les extraits brillent pour les mises à jour groupées.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

Sites de grattage

En fonction de votre agence, vous pourriez être dans la position où vous devrez convertir un client d'intégration vers les modèles propriétaires de votre propre entreprise. En fonction de la configuration du client, vous ne pourrez peut-être pas utiliser un grattoir prédéfini en optant pour votre propre grattoir personnalisé. J'ai utilisé des extraits pour tester les sites de scraping afin de garantir que nous extrayons uniquement les données des éléments appropriés. Ceci est utile lorsque vous travaillez sur des sites difficiles à scraper où les données nécessaires se trouvent sur la page et ne sont pas disponibles dans un backend.

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

Tâches répétitives

Si vous testez manuellement un site et que vous êtes nouveau, répétez une tâche encore et encore. Vous devrez peut-être répéter un événement de clic pour voir ce que vit un utilisateur. L'écriture d'un extrait est très utile pour l'exécuter à plusieurs reprises. Associez l'extrait de code à des points d'arrêt dans le script pour faciliter les flux de travail plus longs.

const h1 = document.querySelector('h1').innerText;
console.log(h1);

Conclusion

Le panneau Snippets est un outil polyvalent qui peut améliorer votre flux de travail de développement. En automatisant les tâches, en déboguant efficacement et en analysant le contenu, vous économiserez du temps et des efforts dans votre travail quotidien.

Vous avez un cas d'utilisation différent pour les extraits de code ? Partagez-le dans les commentaires ci-dessous !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!