Pendule - Neat Chrome Plugin pour un développeur Web

Je fais pas mal de développement Web, et Google Chrome est mon navigateur principal de nos jours. Chrome est assez convivial pour les développeurs et vous pouvez également configurer Firebug sur Chrome. Comment installer Firebug sur IE, Safari, Chrome et Opera. Comment installer Firebug sur IE, Safari, Chrome et Opera. En savoir plus. Mais aujourd'hui, je voulais vous montrer une autre extension de Chrome appelée Pendule. Pendule complète la fonction intégrée Inspect Element de Chrome avec quelques extras intéressants.

Le menu Pendule

Le bouton de la barre d’outils de Pendule fait apparaître un menu élégant, divisé en six zones principales. Tout d'abord, le Feuilles de style section. le Voir CSS Cette option peut sembler redondante. Après tout, Chrome nous permet déjà de voir les CSS… ou le fait?

De nombreux sites Web utilisent des CSS compressés, certains le compressant au point d'être illisible. Si vous êtes le seul développeur Web sur votre site, vous pourrez peut-être décider vous-même de combien de fois vous souhaitez compresser le CSS. Pour moi, il n'y a pas une telle chance. L'un des sites Web pour lequel je travaille compresse le CSS à l'aide d'un outil PHP appelé Minify. L'inspection du CSS à l'aide des outils intégrés de Chrome affiche alors l'aspect suivant:

Pas exactement le format le plus lisible imaginable. Avec Pendule, je peux facilement embellir le CSS de mon côté. Je viens de cliquer sur le bouton Pendule et cliquez sur Voir CSS. J'ai alors quelque chose comme ça:

Encore pas très lisible. Mais cliquez sur le Embellir CSS bouton et regarder la magie se produire:

Nous parlons maintenant! Bien que vous ne puissiez rien changer dans la vue CSS, il s'agit d'une grande amélioration par rapport au CSS compressé..

Traitement des images

Pendule propose également des utilitaires intéressants liés aux images:

“Afficher les informations sur les images” vous amène à une toute nouvelle page Web contenant toutes les images de la page actuelle, chacune contenant une foule d’informations connexes:

Ceci est pratique car il vous permet de faire défiler toutes les images une par une et de les auditer individuellement. Par exemple, certains sites Web servent le contenu d'un serveur et les images associées d'un autre serveur (pour rendre les choses plus rapides). Avec cette vue, vous pouvez voir exactement d'où provient chaque image et localiser facilement celles qui ne sont pas servies par la bonne source..

Vous pouvez également lire le texte Alt pour chaque image, ce qui peut être essentiel pour les offres de référencement. Cependant, si vous êtes simplement intéressé par le texte Alt, Pendule vous permet d’auditer facilement cette page, à l’aide de la touche “Afficher le texte alt” option. Lorsqu'elle est activée, les images de votre page ressemblent à ceci:

Celui-ci provient d'un charmant post intitulé 3 Signes Apple est déplacé de Microsoft pour devenir l'empire du mal, mais le point ici est le petit “alt =” extrait au-dessus de l'image. Cela ressemble à une info-bulle, mais vous n'avez pas à passer votre souris dessus pour la faire apparaître. Avec “Afficher le texte alt”, vous pouvez simplement faire défiler votre page Web et voir exactement quelles images ont Alts manquant ou incorrect.

Utilitaires divers

Le menu Divers Utilitaires de Pendule contient quelques objets intéressants. le Voir JavaScript produit une seule page Web divisée en sections, une section pour chaque script contenu dans la page actuelle. Un peu comme le “Voir CSS” option nous avons commencé avec, Voir JavaScript vous permet d’embellir le code pour le rendre lisible. JavaScript est presque toujours compressé (encore plus que CSS), donc c'est une option très pratique si vous aimez lire du code pour comprendre comment les choses fonctionnent..

le “Règle d'affichage” Cette option assombrit la page et la recouvre d’un cadre redimensionnable et déplaçable, avec une petite étiquette indiquant ses dimensions à tout moment. C'est très pratique pour vérifier si les éléments sont correctement alignés, par exemple.

En savoir plus sur: Google Chrome, Web Design, Développement Web, Outils pour les webmasters.