6 Bookmarklets utiles pour stimuler le développement Web

Les signets sont des signets basés sur JavaScript qui peuvent être ajoutés à un navigateur Web. Cet article vous montrera quelques conseils de navigateur puissants pour vous aider à améliorer votre flux de travail de développement Web et comment convertir ces conseils en widgets en signet de réduction du temps.

1. Activer le mode de conception
2. Appliquer des antécédents pour tous les éléments
3. Simuler les événements
4. Définir les cookies
5. Classe de commutation
6. Sélecteur de couleurs Bookmark
7. À quels autres gadgets de signets pouvez-vous penser?

Activer le mode de conception

Le modèle de conception (style avec designmode car il s'agit d'une propriété JavaScript) convient aux personnes qui aiment expérimenter différents changements de copie sur des sites Web en temps réel. Par exemple, un rédacteur qui aime observer l'effet de la lecture du contenu dans un processus de conception de site Web, ou un concepteur qui veut s'assurer que le texte est confortable pour se tenir dans un espace spécifique à une taille de police spécifique.

JavaScript a une fonctionnalité très simple qui rend l'ensemble du document HTML modifiable. Il fonctionne exactement de la même manière que l'attribut de valeur contenuDitable = "true" de HTML (ou contenuDitable = "true" dans JavaScript), mais fonctionne dans tout le document. Si vous souhaitez comprendre comment cela fonctionne, utilisez d'abord les raccourcis clavier pertinents pour ouvrir la console du navigateur:

• Chrome: Option ⌘ J / Shift Ctrl J
• Firefox: Option ⌘ K / Shift Ctrl k
• Safari: Option ⌘ C / Shift Ctrl C

Ensuite, tapez document.designMode="on" dans la console, appuyez sur retour , puis cliquez sur n'importe quel élément de texte. Vous verrez que vous pouvez modifier ces éléments de texte (et tous les autres éléments de texte) en cliquant simplement dessus. Cette façon de modifier le texte sur un site Web en direct est beaucoup plus rapide et beaucoup moins d'effort que d'ouvrir les Devtools, de cliquer avec le bouton droit et de sélectionner l'option d'édition de texte.

Bien que je ne sache pas si le "modèle de conception" est la description la plus précise de la fonctionnalité, elle est toujours très utile et, étonnamment, elle existe depuis longtemps.

Alors, quel est le moyen plus rapide de l'activer? Bien sûr, c'est un gadget de signets! Créez un signet à l'aide de javascript: document.designMode="on";void 0;

Appliquer des antécédents pour tous les éléments

Lorsque les éléments HTML n'ont pas de fond, il est difficile de visualiser leurs limites et / ou de mesurer avec précision leur distance des autres éléments. Les développeurs peuvent avoir besoin de mieux visualiser les limites lorsqu'ils traitent des déséquilibres visuels (c'est-à-dire, même si quelque chose "semble mal" mais n'est pas réellement le cas), le pliage des marges (ignorant certaines marges), divers affichage: / float: / position: problèmes, etc.

L'application de l'arrière-plan signifie appliquer un fond translucide pour tous les éléments HTML pour mieux visualiser leurs limites et leur espacement. Beaucoup d'entre nous le font généralement en ouvrant Devtools et en tapant une instruction CSS comme selector { background: rgb(0 0 0 / 10%); } dans la boîte de style. Cependant, cela est toujours très laborieux et répétitif - nous pouvons utiliser le widget Bookmark pour le simplifier.

Encore une fois, pour créer un signet, nous créerons une URL. Voici ce que nous pouvons utiliser pour cela:

 javascript: document.QuerySelectorAll ("*"). foreach (élément => élément.style.background = "rgb (0 0 0/10%)");

Nous utilisons un arrière-plan translucide car les superpositions de transparence, ce qui garantit que chaque élément imbriqué se distingue et que la distance entre elles peut être mesurée.

Simuler les événements

Avez-vous déjà eu besoin de tester un événement Web qui nécessite d'abord une série d'interactions ou remplit certaines conditions? Tester ou déboguer ces types de fonctionnalités prend du temps. Ce widget Bookmark de simulation d'événements peut être utilisé pour déclencher immédiatement des événements spécifiques, ce qui rend les tests un jeu d'enfant.

La simulation d'événements signifie écrire un bouton "temporaire" pour déclencher des événements JavaScript, ce qui facilite le test des événements rapidement et à plusieurs reprises sans remplir de conditions d'interface utilisateur courantes, telles que la connexion requise.

En supposant que vous avez mis en place un écouteur d'événements JavaScript, créez un signet pour chaque événement que vous souhaitez déclencher / simulé et soumettre l'URL suivante:

 JavaScript: document.QuerySelector ("sélecteur"). Click ();

Remplacez "Selector" par votre seul sélecteur, remplacez "Cliquez" par "Focus" ou "Blur" (si nécessaire), ou étendez l'extrait de code pour qu'il déclenche des événements plus complexes tels que le défilement.

Définir les cookies

Un cookie est un jeton stocké sur l'ordinateur du visiteur du site Web par un visiteur du site Web. Les cookies contiennent des données qui peuvent être lues par le site Web où elles sont créées jusqu'à ce qu'elles dépassent leur date d'expiration ou ont été supprimées. L'existence d'un cookie lui-même détermine si le visiteur est connecté, tandis que les données elle-même peuvent stocker des informations utilisateur.

Un exemple de scénario où vous souhaiterez peut-être définir des cookies à l'aide du widget Bookmark est lorsque vous souhaitez forcer la connexion pendant une période de test de site Web. Les sites Web semblent généralement très différents lorsqu'ils sont connectés et non connectés, mais la connexion et la connexion peuvent finir par être très lourds, donc ce widget de signets peut gagner beaucoup de temps.

L'écriture expire = les dates pour les cookies manuellement est très gênante, mais heureusement, cela crée vos propres paramètres, l'application Widget Bookmarks Cookie peut générer des widgets de signets pour des cookies spécifiques si vous connaissez son nom exact.

Classe de commutation

Vous souhaiterez peut-être ajouter ou supprimer des classes aux éléments HTML pour déclencher un nouveau changement d'état ou d'apparence, également appelé classe bascule. Les commutateurs de classe se produisent dans les coulisses de la plupart des sites Web en direct, mais il peut également être utilisé pour sauter la satisfaction de certaines conditions d'interface utilisateur lors des tests.

Les bascules de classe peuvent être utilisés pour déclencher des changements d'apparence (tels que des thèmes ou des états alternatifs) ou même des animations, mais l'utilisation d'outils de développement peut être un peu délicat lorsqu'il est uniquement à des fins de test (c'est-à-dire que le site Web n'est pas réellement en cours d'exécution pour les utilisateurs de cette manière). Semblable aux autres widgets de signets, ce widget de signets peut rapidement changer de temps et gagner du temps.

Créez le widget de signet suivant pour localiser tous les éléments qui correspondent au sélecteur de votre choix, qui à son tour basculera «classe».

 javascript: document.QuerySelectorAll ("sélecteur"). foreach (élément => élément.classList.toggle ("class"));

Sélecteur de couleurs Bookmark

Bien qu'il ne s'agisse pas technique d'un "gadget de bibliothèque", ces données de signet URI par Scott Jehl ouvrent un nouvel onglet:

Alors, voici ma nouvelle application de sélecteur de couleurs! C'est juste une entrée de couleur HTML incluse dans l'uri de données, donc je peux le mettre en signet. (Vous pouvez l'ajouter vous-même):

data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">

Pourquoi est-ce cool? Eh bien, combien de fois avez-vous besoin d'obtenir la valeur des couleurs de la page, seulement pour vous retrouver à ouvrir Devtools, en cliquant sur un tas d'éléments et en revérifiant les propriétés CSS pour trouver cette valeur? Il est préférable d'exécuter ce gadget, de cliquer sur l'élément et d'obtenir la couleur tout de suite!

À quels autres gadgets de signets pouvez-vous penser?

Y a-t-il des workflows de développement Web trop en double qui nécessitent parfois des outils de développeur parfois encombrants que vous utilisez votre navigateur Web? Si c'est le cas, il est très facile de créer votre propre widget Bookmark qui permet d'économiser du temps. N'oubliez pas de commencer par javascript:

Si vous avez créé un widget de signets pour simplifier votre flux de travail, j'aimerais le voir! Veuillez les partager dans les commentaires et créons une belle collection.

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!