Pixel Ruler

Fes servir Pixel Ruler per mesurar píxels a qualsevol pàgina: un regle a la pantalla per a mides i espaiats.

Pixel Ruler posa un regle sobre la pantalla i et permet mesurar qualsevol cosa al navegador. Fes clic a la icona de la barra d'eines, arrossega el ratolí per la maqueta i llegeix la distància exacta en píxels CSS. Passa el punter per sobre d'un element i n'obtens l'amplada, l'alçada, el padding i les distàncies als blocs del voltant. Les xifres coincideixen amb DevTools, perquè l'extensió llegeix els mateixos píxels CSS que fa servir el navegador per dibuixar la pàgina. Cap tauler per obrir, cap captura per exportar, cap càlcul mental. Només un regle de pantalla a sobre del web que ja tens al davant. Una sola capa, res per anar canviant: 📏 Mantén premut i arrossega per mesurar la distància entre dos punts qualssevol de la pàgina. 📏 Apunta a un element i en veuràs la mida, el padding i les distàncies als veïns. 📏 Deixa anar guies verticals i horitzontals i alinea-hi els blocs. Sempre tens un regle a la pantalla com a referència, i una tecla copia el resultat al porta-retalls juntament amb el selector CSS de l'element que hi ha sota el punter. Com començar, en tres passos: 1. Instal·la l'extensió i fixa-la a la barra d'eines. 2. Obre la pàgina en què treballes i fes clic a la icona. 3. Arrossega, apunta, mesura: prem Esc dues vegades quan acabis. Els desenvolupadors front-end l'usen per contrastar una maqueta amb el mockup. Els dissenyadors el fan servir com a regle de pàgina quan el fitxer d'entrega ja ha quedat desfasat. Els enginyers de QA reporten un error amb un número real en comptes de «el botó queda una mica baix». Qui necessiti una mesura ràpida de píxels en un lloc en producció la té en dos clics. Què et dóna aquest regle web: - la distància entre dos punts qualssevol, en píxels - l'amplada i l'alçada de qualsevol element de la pàgina - padding, marges i els espais entre veïns - les distàncies d'un element als blocs del voltant - escales als marges superior i esquerre de la finestra - l'etiqueta, les classes i el selector CSS de l'element mesurat - guies reutilitzables per comprovar l'alineació El control amb el teclat manté el punter quiet: → Shift bloqueja la mesura a l'eix horitzontal o al vertical → Les fletxes desplacen el punt actual exactament 1 px → Esc esborra la mesura actual; un segon Esc et torna la pàgina → Una drecera copia el resultat al porta-retalls Instal·la'l un cop i tindràs el mateix regle de píxels que fa servir qui treballa amb Windows, Linux i ChromeOS, i el mateix que fa servir qui treballa amb Mac, perquè l'eina viu al navegador i no al sistema operatiu. No hi ha cap descàrrega de regle de píxels per buscar, ni instal·lador ni permisos d'administrador: l'extensió arriba des de la Chrome Web Store amb un clic. De sortida és un regle de píxels gratuït, amb totes les funcions obertes a tothom. Una aplicació de regle de pantalla que s'obre en una finestra a part acaba mesurant el que no toca tan bon punt la pàgina es desplaça. Aquesta app de regle de píxels es dibuixa dins de la pestanya i es mou amb el contingut. Això és un regle de píxels en línia: funciona sobre la pàgina real, en un servidor de proves, en el web d'un client, darrere d'un inici de sessió. Un regle de píxels d'escriptori que mesura una imatge estàtica d'una finestra no ho pot fer. Vols comprovar una il·lustració o un logotip? Fes-lo servir com a regle de píxels per a imatges: passa-hi el punter i llegeix-ne la mida renderitzada, que sovint no és la del fitxer original. Preguntes i respostes P: Com es mesuren píxels a la pantalla sense obrir DevTools? R: Fes clic a la icona i arrossega. La capa queda per damunt de la pàgina, així que mesures el que veus de debò, inclosos els estats hover que desapareixen quan un tauler es queda el focus. P: Regle de píxels de pantalla, regle en pantalla, px ruler, pixelruler: quin de tots és aquest? R: Tots. L'eina és la mateixa; només canvia la cerca. P: Pot mesurar en centímetres o polzades? R: No. És una eina de regle de píxels i només dóna píxels CSS, la unitat que escrius al full d'estils. P: Funciona a tot arreu? R: En webs normals, sí. Les pàgines de sistema de Chrome, el visor de PDF integrat i l'interior dels iframe d'origen creuat estan tancats a qualsevol extensió, també a aquesta. P: Quines dades recull? R: Cap. Zero peticions de xarxa, sense compte, sense registre. No demana cap permís inquietant en instal·lar-se i no toca una pàgina fins que no fas clic a la icona. Els hàbits antics són més lents i menys exactes: aguantar un regle de plàstic contra el vidre de la pantalla de l'ordinador o comptar píxels en una captura. Un regle per a la pantalla de l'ordinador ha de viure dins del navegador, redibuixar-se quan la maqueta es recompon i parlar les mateixes unitats que el codi. Això és el que fa aquesta capa de regle en pantalla, i per això un regle de píxels per a webs guanya a qualsevol regle per a imatges enganxades en un editor gràfic. La fitxa està disponible en 52 idiomes, així que un regle de píxels web és a una cerca de distància en el teu. Instal·la'l, mesura píxels a la pàgina següent que obris i deixa el regle en pantalla a un clic la resta del dia.