Pendule - Snygg Chrome-plugin för en webbutvecklare

Jag gör en hel del webbutveckling, och Google Chrome är idag min huvudwebbläsare. Chrome är ganska utvecklingsvänligt som det är, och du kan också konfigurera Firebug på Chrome. Så här installerar du Firebug på IE, Safari, Chrome och Opera. Så här installerar du Firebug på IE, Safari, Chrome och Opera. Läs mer. Men idag ville jag visa dig en annan Chrome-tillägg kallad Pendule. Pendule kompletterar Chromes inbyggda inspektionselement med några intressanta extrafunktioner.

Pendulmenyn

Pendules verktygsfältsknapp pekar ut en smidig meny, uppdelad i sex huvudområden. Först upp, Stilark sektion. De Visa CSS alternativet kan tyckas överflödigt - Chrome låter oss redan se CSS ... eller gör det?

Många webbplatser använder komprimerad CSS, med vissa komprimerar den till obehörighetens punkt. Om du är den enda webbutvecklaren på din webbplats kan du själv bestämma hur mycket du vill komprimera CSS. För mig finns det ingen sådan tur. En av de webbplatser jag jobbar för komprimerar CSS med ett PHP-verktyg som kallas Minify, så att inspektera CSS med Chromes inbyggda verktyg visar något så här:

Inte precis det mest läsbara formatet är tänkbart. Med Pendule kan jag enkelt försköna CSS på min sida. Jag klickar bara på Pendule-knappen och klickar på Visa CSS. Jag får då något sådant:

Fortfarande inte mycket läsbar. Men klicka på Försköna CSS knappen och kolla på magiken hända:

Nu snackar vi! Medan du inte kan ändra något i CSS-vyn, är det en stor förbättring när det gäller komprimerad CSS.

Hantera bilder

Pendule erbjuder också några intressanta bildrelaterade verktyg:

“Visa bildinformation” tar dig till en helt ny webbsida som innehåller alla bilder från den aktuella sidan, alla med en mängd relaterad information:

Det här är praktiskt eftersom det låter dig bläddra igenom alla bilder en efter en och granska dem individuellt. Till exempel, vissa webbplatser serverar innehåll från en server och relaterade bilder från en annan server (för att göra saker snabbare). Med den här vyn kan du se exakt varifrån varje bild kommer från och enkelt spåra dem som inte visas från rätt källkod.

Du kan också läsa Alt-texten för varje bild, vilket kan vara nyckel för SEO-erbjudanden. Om du bara är intresserad av Alt-texten kan Pendule dig enkelt granska den på sidan med hjälp av “Visa alt text” alternativ. När det är aktiverat ser bilderna på din sida ut så här:

Det här råkar vara från en härlig post som är berättigad 3 Tecken Apple förskjuter Microsoft för att bli det onda riket, men poängen här är den lilla “alt =” snippet ovanför bilden. Det ser ut som ett verktygstips, men du behöver inte sväva musen över den för att få den att visas. Med “Visa alt text”, du kan bara bläddra igenom din webbsida och se exakt vilka bilder som saknas eller felaktiga Alts.

Diverse verktyg

Pendule's Miscellaneous Utilities-meny packar några intressanta godsaker. De Visa JavaScript produkter en enda webbsida uppdelad i sektioner, en sektion för varje skript den aktuella sidan innehåller. Mycket som “Visa CSS” alternativ vi började med, Visa JavaScript låter dig försköna koden för att göra den läsbar. JavaScript komprimeras nästan alltid (ännu mer än CSS), så det här är ett mycket användbart alternativ om du gillar att läsa kod för att se hur sakerna fungerar.

De “Visa linjal” alternativet dämpar sidan och överlägger den med en resizable, draggbar ram med en liten etikett som visar dess dimensioner vid vilken tidpunkt som helst. Det här är väldigt användbart för att kontrollera om elementen är rätt inriktade, till exempel.

Utforska mer om: Google Chrome, webbdesign, webbutveckling, verktyg för webbansvariga.