Pendule - Ryddig Chrome Plugin For En Webutvikler

Jeg gjør ganske mye webutvikling, og Google Chrome er min nettleser i disse dager. Chrome er ganske utviklervennlig som det er, og du kan også sette opp Firebug på Chrome. Slik installerer du Firebug på IE, Safari, Chrome og Opera. Slik installerer du Firebug på IE, Safari, Chrome og Opera Les mer. Men i dag ønsket jeg å vise deg en annen Chrome-utvidelse kalt Pendule. Pendule supplerer Chromes innebygde Inspect Element-funksjon med noen interessante tillegg.

Pendulemenyen

Pendulas verktøylinjeknapp popper ut en glatt utseende meny, delt inn i seks hovedområder. Først oppe, Stilark seksjon. De Se CSS alternativet kan virke overflødig - Chrome lar oss allerede vise CSS ... eller gjør det?

Mange nettsteder bruker komprimert CSS, med noen komprimerer det til ulykkespoenget. Hvis du er den eneste webutvikleren på nettstedet ditt, kan du selv bestemme hvor mye du vil komprimere CSS. For meg er det ikke noe slikt flaks. En av nettstedene jeg jobber for, komprimerer CSS ved hjelp av et PHP-verktøy kalt Minify, slik at inspeksjon av CSS med Chrome's innebygde verktøy viser noe slikt:

Ikke akkurat det mest lesbare formatet er tenkelig. Med Pendule kan jeg lett forskjøre CSS på min side. Jeg klikker bare på Pendule-knappen og klikker Se CSS. Jeg får så noe slikt:

Fortsatt ikke veldig lesbar. Men klikk på Beautify CSS knappen og se det magiske skje:

Nå snakker vi! Mens du ikke kan endre noe i CSS-visningen, er dette en stor forbedring når det gjelder komprimert CSS.

Håndtering av bilder

Pendule tilbyr også noen interessante bilderelaterte verktøy:

“Se bilderinformasjon” tar deg til en helt ny nettside som inneholder alle bilder fra den nåværende siden, hver med en rekke relaterte opplysninger:

Dette er nyttig fordi det lar deg bla gjennom alle bildene en etter en og revidere dem individuelt. For eksempel tjener enkelte nettsteder innhold fra en server og relaterte bilder fra en annen server (for å gjøre ting raskere). Med denne visningen kan du se nøyaktig hvor hvert bilde kommer fra og enkelt spore de som ikke vises fra den riktige kilden.

Du kan også lese Alt-teksten for hvert bilde, som kan være nøkkelen for SEO-tilbud. Men hvis du bare er interessert i Alt-teksten, lar Pendule deg enkelt å revidere den på siden, ved hjelp av “Vis alt tekst” alternativ. Når dette er aktivert, ser bilder på siden din slik ut:

Dette skjer for å være fra et nydelig innlegg som er berettiget. 3 Tegn Apple er fortapt Microsoft for å bli det onde imperiet, men poenget her er den lille “alt =” kutt over bildet. Det ser ut som et verktøytips, men du trenger ikke å sveve musen over den for å få den til å vises. Med “Vis alt tekst”, Du kan bare bla gjennom websiden din og se nøyaktig hvilke bilder som mangler eller feil Alts.

Diverse Verktøy

Pendule's Diverse Utilities-menyen pakker noen interessante godbiter. De Se JavaScript produkter en enkelt nettside delt inn i seksjoner, en seksjon for hvert skript den nåværende siden inneholder. Mye som “Se CSS” alternativet vi startet med, Se JavaScript lar deg forskjøre koden for å gjøre den lesbar. JavaScript er nesten alltid komprimert (enda mer enn CSS), så dette er et veldig praktisk alternativ hvis du liker å lese kode for å finne ut hvordan ting fungerer.

De “Vis linjal” alternativet reduserer siden og overlegger den med en resizable, dragerbar ramme med en liten etikett som viser dimensjonene til enhver tid. Dette er veldig nyttig for å sjekke om elementene er riktig justert, for eksempel.

Utforsk mer om: Google Chrome, Webdesign, Webutvikling, Verktøy for nettredaktører.