Pendule - plugin chrome pour un pur développeur web

Je fais un peu de développement Web, et Google Chrome est mon navigateur principal ces jours-ci. Chrome est assez facile à développeur car il est, et vous pouvez également configurer Firebug sur Chrome. Mais aujourd`hui, je voulais vous montrer une extension de Chrome différent appelé Pendule. suppléments intégré Pendule Chrome Inspect fonction Element avec quelques extras intéressants.

Comment faire pour installer Firebug sur IE, Safari, Chrome & OpéraComment faire pour installer Firebug sur IE, Safari, Chrome & OpéraLire la suite

Le menu Pendule

chrome plug-ins de développement web

bouton de la barre d`outils apparaît un Pendule menu à la recherche lisse, divisé en six domaines principaux. Tout d`abord en place, la Les feuilles de style section. le Voir CSS option peut sembler redondant - après tout, Chrome nous permet déjà vue CSS ... ou le fait?

De nombreux sites Web utilisent CSS compressé, avec une certaine compression au point de illisibilité. Si vous êtes le seul développeur Web sur votre site, vous pouvez être en mesure de décider pour vous-même combien vous voulez compresser le CSS. Pour moi, il n`y a pas de chance. L`un des sites web que je travaille pour le CSS en utilisant compresse un outil PHP appelé rapetisser, afin d`inspecter la CSS avec les outils intégrés de Chrome montre quelque chose comme ceci:

outils de développement web chrome

Pas exactement le format le plus lisible qu`on puisse imaginer. Avec Pendule, je peux facilement embellir le CSS de mon côté. Je viens de cliquer sur le bouton et cliquez sur Pendule Voir CSS. Je puis obtenir quelque chose comme ceci:

outils de développement web chrome

Pas encore très lisible. Mais cliquez sur le Embellissez CSS bouton et regarder la magie:

outils de développement web chrome

Nous parlons maintenant! Alors que vous ne pouvez pas changer quoi que ce soit dans la vue CSS, c`est une grande amélioration en matière de CSS comprimé.

manipulation des images

Offre également quelques Pendule utilitaires d`images intéressantes:

développement web chrome

«Voir les informations images» Vous amène à une page Web complètement nouveau contenant toutes les images de la page en cours, chacun avec une foule d`informations connexes:

développement web chrome

Ceci est pratique car il vous permet de faire défiler toutes les images une par une et les auditer individuellement. Par exemple, certains sites Web servent le contenu d`un serveur et les images associées à un autre serveur (pour rendre les choses plus rapidement). Avec ce point de vue, vous pouvez voir exactement où chaque image vient et facilement retrouver ceux qui ne sont pas desservis de la bonne source.

Vous pouvez également lire le texte Alt pour chaque image, qui peut être la clé pour les offres de référencement. Cependant, si vous êtes simplement intéressé par le texte Alt, vous permet d`auditer Pendule facilement que sur la page, en utilisant le «Afficher le texte altoption ». Lorsqu`elle est activée, les images sur votre page ressemblent à ceci:

développement web chrome

Celui-ci se trouve être d`une belle après le droit 3 signes Apple est Microsoft pour devenir DEPLACER DES The Evil Empire, mais le point est ici le petit extrait « alt = » au-dessus de l`image. Il ressemble à une info-bulle, mais vous ne devez 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 ce que les images ont disparu ou Alts incorrect.

Utilitaires Divers

image

Menu Divers utilitaires de quelques packs de Pendule goodies intéressants. le Voir le javascript produits une seule page web divisée en sections, une section pour chaque script contient la page en cours. Tout comme le «Voir CSSOption » nous avons commencé avec, Voir le javascript vous permet d`embellir le code pour le rendre lisible. javascript est presque toujours compressé (même plus que CSS), c`est donc une option très pratique si vous aimez la lecture du code pour comprendre comment les choses fonctionnent.

Le "affichage règleOption » obscurcit la page et il se superpose avec un cadre redimensionnable, draggable avec une petite étiquette qui montre ses dimensions à un moment donné. Ceci est très pratique pour vérifier si les éléments sont correctement alignés, par exemple.

chrome plug-ins de développement web

Dernières pensées

Si vous êtes un développeur Web en utilisant Chrome, la première chose que vous devez faire est d`obtenir absolument confortable, avec des outils de développement intégrés de Chrome. Cependant, une fois que vous avez fait cela, vous serez probablement en mesure de trouver au moins un ou deux outils qui complètent dans bien Pendule votre flux de travail.

Articles connexes