Pixel Ruler

Bruk Pixel Ruler til å måle piksler på en hvilken som helst nettside: en linjal på skjermen for størrelser og avstander.

Pixel Ruler legger en linjal rett på skjermen og lar deg måle hva som helst i nettleseren. Klikk på ikonet i verktøylinjen, dra musa over layouten og les av nøyaktig avstand i CSS-piksler. Hold pekeren over et element, så får du bredde, høyde, padding og avstanden til blokkene rundt. Tallene stemmer med DevTools, fordi utvidelsen leser de samme CSS-pikslene som nettleseren bruker til å tegne siden. Ingen panel å åpne, ingen skjermdump å eksportere, ingen hoderegning. Bare en skjermlinjal oppå nettstedet du allerede ser på. Ett overlegg, ingenting å bytte mellom: 📏 Hold inne og dra for å måle avstanden mellom to vilkårlige punkter på siden. 📏 Pek på et element og se størrelsen, paddingen og avstandene til naboene. 📏 Slipp ned loddrette og vannrette hjelpelinjer og still blokkene etter dem. Du har alltid en linjal på skjermen å måle mot, og én tast kopierer resultatet til utklippstavlen sammen med CSS-selektoren til elementet under pekeren. Slik kommer du i gang, i tre trinn: 1. Installer utvidelsen og fest den til verktøylinjen. 2. Åpne siden du jobber med, og klikk på ikonet. 3. Dra, pek, mål — trykk Esc to ganger når du er ferdig. Frontend-utviklere bruker den til å holde layouten opp mot designet. Designere bruker den som sidelinjal når overleveringsfilen allerede har gått ut på dato. QA-folk melder en feil med et faktisk tall i stedet for "knappen ser litt lav ut". Alle som trenger et raskt pikselmål på et nettsted i drift, får det på to klikk. Dette gir denne nettlinjalen deg: - avstanden mellom to vilkårlige punkter, i piksler - bredde og høyde på ethvert element på siden - padding, marger og mellomrommene mellom naboer - avstanden fra et element til blokkene rundt det - målestokker langs øvre og venstre kant av vinduet - taggen, klassene og CSS-selektoren til elementet du målte - hjelpelinjer du kan gjenbruke når du sjekker innretting Tastaturstyring holder pekeren i ro: → Shift låser målingen til vannrett eller loddrett akse → Piltastene flytter gjeldende punkt nøyaktig 1 px → Esc nullstiller målingen, et nytt Esc gir deg siden tilbake → Én hurtigtast kopierer resultatet til utklippstavlen Installer én gang, og du har den samme piksellinjalen som brukere på Windows, Linux og ChromeOS, og den samme piksellinjalen som Mac-brukere har, fordi verktøyet bor i nettleseren og ikke i operativsystemet. Det finnes ingen piksellinjal å laste ned og lete etter, ingen installasjonsfil og ingen administratorrettigheter: utvidelsen kommer fra Chrome Web Store med ett klikk. Ved lansering er den en gratis piksellinjal, med alle funksjoner åpne for alle. En skjermlinjal som åpnes i et eget vindu, måler feil ting i det siden ruller. Denne piksellinjalen tegnes inne i fanen og ruller sammen med innholdet. Dette er en piksellinjal på nett: den virker på den levende siden, på en testserver, på et kundenettsted, bak innlogging. En piksellinjal på skrivebordet, som måler et stillbilde av et vindu, klarer ikke det. Skal du sjekke en illustrasjon eller en logo? Bruk den som piksellinjal for bilder — pek på bildet og les av den gjengitte størrelsen, som ofte ikke er størrelsen i kildefilen. Spørsmål og svar Sp: Hvordan måler jeg piksler på skjermen uten å åpne DevTools? Sv: Klikk på ikonet og dra. Overlegget ligger over siden, så du måler det du faktisk ser, også hover-tilstander som forsvinner når et panel stjeler fokus. Sp: Skjermlinjal, linjal på skjerm, pikselmåler, screen ruler, px ruler, pixelruler — hvilken av dem er dette? Sv: Alle sammen. Verktøyet er det samme, det er bare søkeordet som skifter. Sp: Kan den måle i centimeter eller tommer? Sv: Nei. Dette er en piksellinjal, og den oppgir kun CSS-piksler, den enheten du skriver i stilarket. Sp: Virker den overalt? Sv: På vanlige nettsteder, ja. Systemsider i Chrome, den innebygde PDF-leseren og innsiden av cross-origin iframe er stengt for alle utvidelser, denne inkludert. Sp: Hvilke data samler den inn? Sv: Ingen. Null nettverkskall, ingen konto, ingen registrering. Den ber ikke om skumle tillatelser ved installasjon og rører en side først når du har klikket på ikonet. Gamle vaner er tregere og mindre presise: å holde en plastlinjal mot glasset på dataskjermen, eller telle piksler i en skjermdump. En linjal for arbeid på dataskjerm må bo inne i nettleseren, tegnes på nytt når layouten flyter om, og snakke samme enheter som koden. Det er nettopp det dette linjaloverlegget gjør, og derfor slår en piksellinjal for nettsider en linjal lagt over et skjermbilde i et bilderedigeringsprogram. Oppføringen finnes på 52 språk, så en piksellinjal for nett er ett søk unna på ditt også. Installer den, mål piksler på den neste siden du åpner, og ha skjermlinjalen ett klikk unna resten av dagen.