Pixel Ruler

Brug Pixel Ruler til at måle pixels på enhver webside: en lineal på skærmen til størrelser og afstande.

Pixel Ruler lægger en lineal hen over skærmen, så du kan måle hvad som helst i browseren. Klik på ikonet i værktøjslinjen, træk musen hen over layoutet, og aflæs den præcise afstand i CSS-pixels. Hold musen over et element, og du får dets bredde, højde, padding og afstandene til blokkene omkring det. Tallene passer med DevTools, fordi udvidelsen læser de samme CSS-pixels, som browseren bruger til at tegne siden. Intet panel at åbne, intet screenshot at eksportere, ingen hovedregning. Bare en skærmlineal oven på det site, du allerede sidder med. Ét overlay, ingenting at skifte mellem: 📏 Hold nede og træk for at måle afstanden mellem to vilkårlige punkter på siden. 📏 Peg på et element, og se dets størrelse, padding og afstande til naboerne. 📏 Sæt lodrette og vandrette hjælpelinjer, og ret blokkene ind efter dem. Du har altid en lineal på skærmen som reference, og én tast kopierer resultatet til udklipsholderen sammen med CSS-selektoren for elementet under markøren. Sådan kommer du i gang, i tre trin: 1. Installer udvidelsen, og fastgør den til værktøjslinjen. 2. Åbn den side, du arbejder på, og klik på ikonet. 3. Træk, peg, mål — tryk Esc to gange, når du er færdig. Frontend-udviklere bruger den til at holde et layout op mod mockuppet. Designere bruger den som sidelineal, når afleveringsfilen for længst er forældet. QA-folk melder en fejl med et rigtigt tal i stedet for »knappen sidder vist lidt for lavt«. Alle, der hurtigt skal måle pixels på et site i drift, er i mål på to klik. Hvad denne weblineal giver dig: - afstanden mellem to vilkårlige punkter, i pixels - bredde og højde på ethvert element på siden - padding, margener og mellemrummene mellem naboer - afstande fra et element til blokkene omkring det - skalaer langs vinduets øverste og venstre kant - tag, klasser og CSS-selektor for det element, du målte - genbrugelige hjælpelinjer til at tjekke justering Tastaturet holder markøren i ro: → Shift låser målingen til en vandret eller lodret akse → Piletasterne flytter det aktuelle punkt præcis 1 px → Esc rydder den aktuelle måling, et Esc mere giver dig siden tilbage → En genvej kopierer resultatet til udklipsholderen Installer den én gang, og du har den samme pixellineal, som folk på Windows, Linux og ChromeOS kører, og den samme, som folk på Mac kører, for værktøjet bor i browseren og ikke i styresystemet. Der er ingen pixellineal at gå på jagt efter og downloade, ingen installationsfil og ingen administratorrettigheder: udvidelsen kommer fra Chrome Web Store med ét klik. Fra start er det en gratis pixellineal, hvor alle funktioner er åbne for alle. En skærmlineal, der åbner i sit eget vindue, måler altid forkert, så snart siden scroller. Denne pixellineal-app tegnes inde i fanen og scroller med indholdet. Det her er en pixellineal online: den virker på den levende side, på en staging-server, på et kundesite, bag et login. En pixellineal til skrivebordet, der måler et statisk billede af et vindue, kan ikke det samme. Skal du tjekke en illustration eller et logo? Brug den som pixellineal til billeder — hold musen over billedet, og aflæs dets renderede størrelse, som ofte ikke er størrelsen i kildefilen. Spørgsmål og svar Sp: Hvordan måler man pixels på skærmen uden at åbne DevTools? Sv: Klik på ikonet, og træk. Overlayet ligger oven på siden, så du måler det, du faktisk ser — også hover-tilstande, der forsvinder, når et panel stjæler fokus. Sp: Skærmlineal til pixels, pixellineal, px ruler, pixelruler — hvad af det er det her? Sv: Det hele. Værktøjet er det samme, kun søgeordet skifter. Sp: Kan den måle i centimeter eller tommer? Sv: Nej. Det er et pixellineal-værktøj, og det rapporterer kun CSS-pixels, altså den enhed, du skriver i dit stylesheet. Sp: Virker den alle steder? Sv: På almindelige websites, ja. Chrome-systemsider, den indbyggede PDF-fremviser og indholdet i cross-origin-iframe er lukket land for alle udvidelser, også denne. Sp: Hvilke data indsamler den? Sv: Ingen. Nul netværkskald, ingen konto, ingen tilmelding. Den beder ikke om skræmmende tilladelser ved installationen og rører først en side, når du har klikket på ikonet. Gamle vaner er langsommere og mindre præcise: at holde en plastiklineal op mod skærmens glas eller at tælle pixels på et screenshot. En lineal til arbejde på en computerskærm skal bo inde i browseren, tegnes om, når layoutet flyder om, og tale samme enheder som koden. Det er præcis det, dette lineal-overlay gør, og derfor slår en pixellineal til websites enhver lineal til skærmbilleder, der er klistret ind i et grafikprogram. Beskrivelsen findes på 52 sprog, så en web-pixellineal er én søgning væk på dit. Installer den, mål pixels på den næste side, du åbner, og hold skærmlinealen ét klik væk resten af dagen.