Pendule - Nette Chrome-plug-in voor een webontwikkelaar

Ik doe nogal wat webontwikkeling en Google Chrome is tegenwoordig mijn belangrijkste browser. Chrome is behoorlijk ontwikkelaarsvriendelijk zoals het is en je kunt Firebug ook instellen op Chrome. Firebug installeren op IE, Safari, Chrome en Opera. How to Install Firebug op IE, Safari, Chrome & Opera Read More. Maar vandaag wilde ik je een andere Chrome-extensie laten zien, genaamd Pendule. Pendule is een aanvulling op de ingebouwde Inspect Element-functie van Chrome met enkele interessante extra's.

Het Pendule-menu

De werkbalkknop van Pendule laat een knap uitziend menu zien, verdeeld in zes hoofdgebieden. Ten eerste, de Style Sheets sectie. De CSS bekijken optie lijkt overbodig - Chrome laat ons al CSS zien ... of doet het?

Veel websites gebruiken gecomprimeerde CSS, met enkele die het comprimeren tot op het punt van onleesbaarheid. Als u de enige webontwikkelaar op uw site bent, kunt u wellicht zelf bepalen hoeveel u de CSS wilt comprimeren. Voor mij is er geen geluk. Een van de websites waar ik voor werk, comprimeert de CSS met behulp van een PHP-tool genaamd Minify, dus het inspecteren van de CSS met de ingebouwde tools van Chrome toont zoiets als dit:

Niet precies de meest leesbare indeling die je je maar kunt bedenken. Met Pendule kan ik eenvoudig de CSS aan mijn kant verfraaien. Ik klik gewoon op de Pendule-knop en klik CSS bekijken. Ik krijg dan zoiets als dit:

Nog steeds niet erg leesbaar. Maar klik op de Verfraai CSS knop en bekijk de magie gebeuren:

Nu zijn we aan het praten! Hoewel u niets in de CSS-weergave kunt wijzigen, is dit een grote verbetering als het gaat om gecomprimeerde CSS.

Afbeeldingen verwerken

Pendule biedt ook een aantal interessante beeldgerelateerde hulpprogramma's:

“Bekijk afbeeldingen informatie” brengt u naar een geheel nieuwe webpagina met alle afbeeldingen van de huidige pagina, elk met een groot aantal gerelateerde informatie:

Dit is handig, omdat u hiermee één voor één door alle afbeeldingen kunt bladeren en ze afzonderlijk kunt controleren. Sommige websites bieden bijvoorbeeld inhoud van één server en gerelateerde afbeeldingen van een andere server (om dingen sneller te maken). Met deze weergave kunt u precies zien waar elke afbeelding vandaan komt en kunt u eenvoudig de afbeeldingen opzoeken die niet via de juiste bron worden weergegeven.

U kunt ook de Alt-tekst voor elke afbeelding lezen, wat van belang kan zijn voor SEO-aanbiedingen. Als u echter alleen geïnteresseerd bent in de Alt-tekst, kunt u met Pendule eenvoudig die on-page controleren, met behulp van de “Toon alt-tekst” keuze. Indien ingeschakeld, zien afbeeldingen op uw pagina er als volgt uit:

Deze is toevallig afkomstig uit een mooie post getiteld 3 Signs Apple verplaatst Microsoft naar The Evil Empire, maar het punt hier is het kleine “alt =” snippet boven de afbeelding. Het ziet eruit als een tooltip, maar u hoeft er niet met uw muis overheen te zwaaien om het te laten zien. Met “Toon alt-tekst”, u kunt gewoon door uw webpagina bladeren en precies zien welke afbeeldingen ontbrekende of onjuiste Alts hebben.

Diverse hulpprogramma's

Het Miscellaneous Utilities-menu van Pendule bevat een paar interessante goodies. De JavaScript bekijken producten één enkele webpagina onderverdeeld in secties, één sectie voor elk script dat de huidige pagina bevat. Net als de “CSS bekijken” optie waarmee we zijn begonnen, JavaScript bekijken laat je de code verfraaien om het leesbaar te maken. JavaScript is bijna altijd gecomprimeerd (zelfs meer dan CSS), dus dit is een erg handige optie als je graag code leest om erachter te komen hoe dingen werken.

De “Display liniaal” optie dimt de pagina en overlapt deze met een aanpasbaar, dragbaar frame met een klein label dat de afmetingen op een bepaald moment laat zien. Dit is erg handig om bijvoorbeeld te controleren of elementen correct zijn uitgelijnd.

Ontdek meer over: Google Chrome, Webontwerp, Webontwikkeling, Webmasterhulpprogramma's.