Annons
Jag gör en hel del webbutveckling, och Google Chrome är min huvudsakliga webbläsare i dag. Chrome är ganska utvecklarvänligt som det är, och du kan också konfigurera Firebug på Chrome Hur man installerar Firebug på IE, Safari, Chrome & Opera Läs mer . Men idag ville jag visa dig en annan Chrome-förlängning som heter Pendule. Pendule kompletterar Chrome: s inbyggda inspektionsfunktion med några intressanta extrafunktioner.
Pendule-menyn
Pendules verktygsfältknapp dyker upp en snygg meny, uppdelad i sex huvudområden. Först upp, Stilark sektion. De Visa CSS alternativet kan verka överflödigt - trots allt kan Chrome redan visa oss CSS... eller gör det det?
Många webbplatser använder komprimerad CSS, medan vissa komprimerar den till olaglighet. Om du är den enda webbutvecklaren på din webbplats kan du kanske själv bestämma hur mycket du vill komprimera CSS. För mig finns det ingen sådan tur. En av webbplatserna jag arbetar för komprimerar CSS med ett PHP-verktyg som heter minify, så att inspektion av CSS med Chrome: s inbyggda verktyg visar något liknande:
Inte exakt det mest läsbara formatet som kan tänkas. Med Pendule kan jag enkelt försköna CSS på min sida. Jag klickar bara på Pendule-knappen och klickar Visa CSS. Jag får då något liknande:
Fortfarande inte särskilt läsbar. Men klicka på Försköna CSS knappen och se magin hända:
Nu snackar vi! Du kan inte ändra någonting i CSS-vyn, men det är en stor förbättring när det gäller komprimerad CSS.
Hantera bilder
Pendule erbjuder också några intressanta bildrelaterade verktyg:
“Visa bilderinformation”Tar dig till en helt ny webbsida som innehåller alla bilder från den aktuella sidan, var och en med en mängd relaterad information:
Detta är praktiskt eftersom det låter dig bläddra igenom alla bilder en och en och granska dem individuellt. Till exempel har vissa webbplatser 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 var varje bild kommer från och enkelt spåra upp de som inte visas från rätt källa.
Du kan också läsa Alt-texten för varje bild, vilket kan vara nyckeln för SEO-erbjudanden. Men om du bara är intresserad av Alt-texten låter Pendule dig enkelt granska den på sidan med "Visa alt-text”Alternativ. När det är aktiverat ser bilder på din sida så här:
Den här kommer från ett vackert inlägg med titeln 3 tecken Apple förskjuter Microsoft för att bli det onda riket, men poängen här är det lilla "alt =" utdraget ovanför bilden. Det ser ut som ett verktygstips, men du behöver inte sväva musen över den för att den ska visas. Med "Visa alt-text”, Kan du bara bläddra igenom webbsidan och se exakt vilka bilder som saknas eller felaktiga Alts.
Diverse verktyg
Pendules meny Diverse Utilities innehåller några intressanta godsaker. De Visa JavaScript producerar en enda webbsida uppdelad i avsnitt, ett avsnitt för varje skript som 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 är nästan alltid komprimerat (ännu mer än CSS), så detta är ett mycket praktiskt alternativ om du gillar att läsa kod för att ta reda på hur saker fungerar.
"Visa linjal”-Alternativet dimmar sidan och läggs över det med en storlek som kan ändras och dra med en liten etikett som visar dess dimensioner vid en viss tidpunkt. Detta är mycket praktiskt för att kontrollera om till exempel element är korrekt anpassade.
