Vérificateur de variables non définies CSS dans Chrome avec OffiDocs

DESCRIPTION

Écrivez-vous CSS en utilisant des propriétés/variables personnalisées ? Vous est-il déjà arrivé d'en avoir mal orthographié un, et de n'avoir remarqué que plus tard qu'une couleur n'apparaissait pas correctement ? Avez-vous déjà rêvé d'un outil qui vous aiderait à traquer ces utilisations de variables CSS qui ne sont pas définies ? Alors vous avez de la chance, car c'est un tel outil ! Cette extension ajoute un onglet aux outils de développement Chrome qui peut vérifier la page actuelle pour toutes les variables CSS non définies utilisées dans les expressions "var()".

Non seulement les feuilles de style, mais également les attributs de style en ligne sont analysés, et les résultats sont affichés dans un tableau convivial avec des liens vers l'élément incriminé dans l'onglet Éléments des outils de développement.

Pour utiliser cette extension, une fois installée, ouvrez un site Web de votre choix dans Google Chrome, puis ouvrez les outils de développement.

Vous verrez un nouvel onglet en haut des outils de développement intitulé "CSS Undefined Variable Checker".

Cet onglet vous amènera à l'interface utilisateur de cette extension.

Au départ, vous ne verrez qu'un bouton intitulé "Vérifier les variables non définies" et un tableau vide.

Cliquer sur le bouton lancera l'analyse sur la page à laquelle les outils de développement sont connectés et rapportera tous les résultats dans le tableau.

S'il n'y a pas de variables CSS indéfinies trouvées, le tableau sera à la place rempli d'un message l'indiquant.

Les résultats du tableau comportent trois colonnes.

La première colonne indique le nom de la variable indéfinie.

La colonne suivante indique la feuille de style dans laquelle elle a été trouvée, et la troisième colonne indique sur quel élément de la page la variable indéfinie a été trouvée.

Cette troisième colonne référence l'élément par un sélecteur CSS.

Si la variable indéfinie a été trouvée dans une feuille de style, la colonne Sélecteur est remplie avec le sélecteur de la déclaration de style CSS où la variable a été trouvée.

D'autre part, si la variable indéfinie se trouve dans un style en ligne, un sélecteur est généré en fonction des classes, de l'identifiant et du nom de balise de l'élément en question et de tous ses ancêtres.

Notez que ce sélecteur généré n'est pas garanti pour identifier de manière unique l'élément en question.

Chaque cellule de la colonne Sélecteur du tableau des résultats est un lien hypertexte.

Cliquer sur chaque lien ouvrira l'onglet Éléments de devtools et mettra en surbrillance l'élément problématique qu'il contient, vous aidant à retrouver la variable indéfinie.

Remarque : Cette extension s'appuie sur des API pour accéder aux informations de la feuille de style qui sont limitées par le partage des ressources entre origines.

Toutes les feuilles de style qui sont chargées dans la page mais qui sont sur une origine différente de la page elle-même, et qui n'ont pas été servies avec un en-tête Access-Control-Allow-Origin qui permettrait l'accès depuis cette page, ne seront pas analysées par cette extension et le fera afficher des erreurs.

Ces erreurs n'empêchent pas l'extension d'analyser d'autres styles accessibles par l'API.

La logique d'analyse derrière cette extension est également disponible sous forme de package npm sous le nom @sonatype/undefined-css-variable-checker.

Voir https://www.

npmjs.

com/package/@sonatype/undefined-css-variable-checker .

Informations supplémentaires:

- Offert par community-group-chrome-store
- Note moyenne : 3 étoiles (c'était correct)
- Développeur cette adresse e-mail qui est protégée du spam. Vous devez activer JavaScript pour la voir.

Vérificateur de variables non définies CSS Web extension intégré avec les OffiDocs Chromium en ligne