Pixel Ruler

Gamitin ang Pixel Ruler para sukatin ang pixel sa kahit anong web page: ruler sa screen para sa laki at espasyo.

Naglalagay ang Pixel Ruler ng ruler sa screen at pinapasukat sa iyo ang kahit ano sa loob ng browser. I-click ang icon sa toolbar, i-drag ang mouse sa layout, at basahin ang eksaktong distansya sa CSS pixels. Ituro ang cursor sa isang elemento at makikita mo ang lapad, taas, padding nito at ang mga puwang papunta sa mga bloke sa paligid. Tugma ang mga numero sa DevTools, dahil binabasa ng extension ang mismong CSS pixels na ginagamit ng browser para iguhit ang page. Walang panel na bubuksan, walang screenshot na ie-export, walang kukuwentahin. Isang ruler ng pixel lang sa ibabaw ng site na tinitingnan mo na. Isang overlay, walang pagpapalit-palit: 📏 Pindutin at i-drag para sukatin ang distansya sa pagitan ng kahit anong dalawang punto sa page. 📏 Ituro ang isang elemento at makita ang sukat, padding at mga distansya nito papunta sa mga katabi. 📏 Maglagay ng vertical at horizontal na guide at doon i-align ang mga bloke. Lagi kang may ruler sa screen bilang sanggunian, at isang pindot lang ang kailangan para makopya ang resulta sa clipboard kasama ang CSS selector ng elementong nasa ilalim ng pointer. Paano magsimula, sa tatlong hakbang: 1. I-install ang extension at i-pin ito sa toolbar. 2. Buksan ang page na ginagawa mo at i-click ang icon. 3. I-drag, ituro, sukatin — pindutin nang dalawang beses ang Esc kapag tapos ka na. Ginagamit ito ng mga front-end developer para itapat ang layout sa mockup. Ginagamit ito ng mga designer bilang ruler ng page kapag luma na ang handoff file. Nagsusumite ang mga QA engineer ng bug na may totoong numero sa halip na "mukhang medyo mababa ang button". Sinumang nangangailangan ng mabilisang sukat sa pixel sa isang live na site ay makukuha ito sa dalawang click. Ano ang ibinibigay ng web ruler na ito: - ang distansya sa pagitan ng kahit anong dalawang punto, sa pixel - ang lapad at taas ng kahit anong elemento sa page - padding, margin at ang mga puwang sa pagitan ng magkakatabing elemento - ang distansya ng isang elemento papunta sa mga bloke sa paligid nito - mga sukatan sa itaas at kaliwang gilid ng window - ang tag, mga class at CSS selector ng elementong sinukat mo - mga guide na puwedeng gamitin ulit para tingnan ang alignment Pinapatatag ng keyboard ang pointer: → Ini-lock ng Shift ang sukat sa horizontal o vertical na axis → Inuusog ng arrow keys ang kasalukuyang punto nang eksaktong 1 px → Binubura ng Esc ang kasalukuyang sukat, ibinabalik ng pangalawang Esc ang page → May isang shortcut na kumokopya ng resulta sa clipboard I-install nang isang beses at pareho na ang ruler ng pixel mo sa pinapatakbo ng mga gumagamit ng Windows, Linux at ChromeOS, at pareho rin sa pinapatakbo ng mga gumagamit ng Mac, dahil nasa loob ng browser ang tool at hindi sa operating system. Walang download na hahanapin, walang installer at walang admin rights: isang click lang at dumarating ang extension mula sa Chrome Web Store. Libreng ruler ng pixel ito sa paglabas pa lang, at bukas sa lahat ang bawat feature. Ang screen ruler app na bumubukas sa hiwalay na window ay agad maling bagay ang sinusukat kapag na-scroll na ang page. Ang ruler ng pixel na ito ay iginuguhit sa loob mismo ng tab at kasabay ng nilalaman kung mag-scroll. Ito ay ruler ng pixel online: gumagana ito sa live na page, sa staging server, sa site ng kliyente, sa likod ng login. Hindi kayang gawin iyon ng desktop na ruler na isang static na larawan lang ng window ang sinusukat. Kailangang tingnan ang isang ilustrasyon o logo? Gamitin ito bilang panukat ng larawan — ituro ang cursor sa larawan at basahin ang na-render na sukat nito, na madalas hindi ang sukat sa source file. Mga tanong at sagot T: Paano sumukat ng pixel sa screen nang hindi binubuksan ang DevTools? S: I-click ang icon at i-drag. Nasa ibabaw ng page ang overlay, kaya ang mismong nakikita mo ang nasusukat, pati na ang mga hover state na nawawala kapag inaagaw ng isang panel ang focus. T: Screen ruler, panukat ng pixel, px ruler, screen pixel ruler, pixelruler — alin dito ang tool na ito? S: Lahat ng iyan. Iisa lang ang tool, ang search phrase lang ang nagbabago. T: Puwede ba itong sumukat sa sentimetro o pulgada? S: Hindi. Isa itong ruler ng pixel at CSS pixels lang ang iniuulat nito, ang mismong yunit na isinusulat mo sa stylesheet. T: Gumagana ba ito kahit saan? S: Sa mga karaniwang website, oo. Sarado sa lahat ng extension, pati dito, ang mga system page ng Chrome, ang built-in na PDF viewer at ang loob ng cross-origin na iframe. T: Anong data ang kinokolekta nito? S: Wala. Zero network request, walang account, walang sign-up. Walang nakakatakot na permission na hinihingi sa pag-install at hinahawakan lang nito ang page pagkatapos mong i-click ang icon. Mas mabagal at mas hindi eksakto ang lumang paraan: idiin ang plastik na ruler sa salamin ng screen ng computer, o bilangin ang pixel sa isang screenshot. Ang ruler para sa screen ng computer ay dapat nasa loob mismo ng browser, muling iginuguhit kapag nagbago ang layout at may parehong yunit ng sukat gaya ng nasa code. Iyan ang ginagawa ng overlay na ito, at iyan ang dahilan kung bakit mas mahusay ang ruler ng pixel para sa website kaysa sa panukat sa larawang idinikit sa isang graphics editor. Available ang listing na ito sa 52 wika, kaya isang search na lang ang layo ng web ruler ng pixel sa sarili mong wika. I-install ito, sumukat ng pixel sa susunod na page na bubuksan mo, at panatilihing isang click lang ang layo ng ruler sa screen sa buong maghapon.