Reklame
Jeg laver en hel del webudvikling, og Google Chrome er min hovedbrowser i disse dage. Chrome er ret udviklervenlig som den er, og du kan også konfigurere Firebug på Chrome Sådan installeres Firebug på IE, Safari, Chrome & Opera Læs mere . Men i dag ville jeg vise dig en anden Chrome-udvidelse kaldet Pendule. Pendule supplerer Chrome's indbyggede Inspect Element-funktion med nogle interessante ekstramateriale.
Pendule-menuen
Pendules værktøjslinjeknap springer ud af en smuk menu, der er opdelt i seks hovedområder. Først op, the Stilark afsnit. Det Se CSS indstilling kan virke overflødig - når alt kommer til alt, Chrome giver os allerede mulighed for at se CSS... eller gør det det?
Mange websteder bruger komprimeret CSS, mens nogle komprimerer det til det sted, hvor det er ulæseligt. Hvis du er den eneste webudvikler på dit websted, kan du muligvis selv bestemme, hvor meget du vil komprimere CSS. For mig er der ikke sådan held. Et af de websteder, jeg arbejder for, komprimerer CSS ved hjælp af et PHP-værktøj kaldet
Minify, så inspektion af CSS med Chromes indbyggede værktøjer viser sådan noget:
Ikke nøjagtigt det mest læsbare format, man kan forestille sig. Med Pendule kan jeg let forskønne CSS på min side. Jeg skal bare klikke på knappen Pendule og klikke på Se CSS. Så får jeg noget lignende:
Stadig ikke særlig læsbar. Men klik på Forskøn CSS knappen og se magien ske:
Nu taler vi! Selvom du ikke kan ændre noget i CSS-visningen, er dette en stor forbedring, når det kommer til komprimeret CSS.
Håndtering af billeder
Pendule tilbyder også nogle interessante billedrelaterede værktøjer:
“Se oplysninger om billeder”Fører dig til en helt ny webside med alle billeder fra den aktuelle side, hver med en række relaterede oplysninger:
Dette er praktisk, fordi det giver dig mulighed for at rulle gennem alle billeder en efter en og gennemgå dem individuelt. For eksempel tjener nogle websteder indhold fra en server og relaterede billeder fra en anden server (for at gøre tingene hurtigere). Med denne visning kan du se nøjagtigt, hvor hvert billede kommer fra, og nemt spore dem, der ikke serveres fra den rigtige kilde.
Du kan også læse Alt-teksten for hvert billede, som kan være nøglen til SEO-tilbud. Hvis du bare er interesseret i Alt-teksten, giver Pendule dig imidlertid let mulighed for at revidere den on-side ved hjælp af "Vis alt-teksten" mulighed. Når det er aktiveret, ser billeder på din side sådan ud:
Denne skyldes tilfældigvis fra et dejligt indlæg med titlen 3 tegn Apple fortrænger Microsoft for at blive det onde imperium, men pointen her er det lille “alt =” uddrag over billedet. Det ligner en værktøjstip, men du behøver ikke at holde musen hen over den for at få den til at vises. Med "Vis alt-teksten”, Kan du bare rulle gennem din webside og se nøjagtigt, hvilke billeder der mangler eller forkerte alts.
Diverse hjælpeprogrammer
Pendules menu for Diverse Utilities pakker et par interessante godbidder. Det Se JavaScript producerer en enkelt webside inddelt i sektioner, et afsnit for hvert script, som den aktuelle side indeholder. Meget som "Se CSS”Vi startede med, Se JavaScript lader dig forskønne koden for at gøre den læsbar. JavaScript er næsten altid komprimeret (endnu mere end CSS), så dette er en meget praktisk mulighed, hvis du kan lide at læse kode for at finde ud af, hvordan tingene fungerer.
Det "Vis lineal”-Indstillingen dæmper siden og overlejrer den med en størrelse, der kan ændres, kan trækkes, med en lille etiket, der viser dens dimensioner til enhver tid. Dette er meget praktisk til at kontrollere, om elementer f.eks. Er korrekt justeret.
