CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Sukatin ang perpektong mga distansya at grid ng pixel sa anumang webpage.
Image from store
Description from store
Pikselitarkkuus on hyvän suunnittelun hiljainen sankari. Yhden pikselin virheellinen kohdistus voi rikkoa ruudukon rytmin, saada tekstin tuntumaan epäkeskiseltä tai saada koko komponentin näyttämään "melkein oikealta", mutta ei aivan. Grid Ruler Lite tarjoaa käyttöliittymäkehittäjille, käyttöliittymä-/käyttäjäkokemussuunnittelijoille, laadunvarmistustestaajille ja kaikille, jotka välittävät visuaalisesta viimeistelystä, välittömän, selaimessa käytettävän mittaustyökalupakin – ei raskaita suunnitteluohjelmistoja, ei sekavia DevTools-paneeleita eikä ulkoisiin sovelluksiin sekoitettuja kuvakaappauksia. Yhdellä napsautuksella laajennus lisää minkä tahansa verkkosivun päälle muunnettavan viivaimen, ruudukkoon napsautettavat apuviivat ja valinnaiset perusviivaruudukot, jotta voit tarkistaa välistyksen, varmistaa 8 pisteen ruudukot ja tallentaa todisteita asetteluvirheistä sekunneissa.
Mikä tekee Grid Ruler Litestä erottuvan joukosta?
Yhden napsautuksen aktivointi, yhden napsautuksen hylkääminen
Napsauta työkalupalkin kuvaketta (tai käytä selaimen näppäimistöasetuksissa määritettyä pikanäppäintä), niin laajennus lisää kevyen<canvas> peittokuva omaan varjo-DOM:iinsa kapseloituna. Sivusi CSS ei voi häiritä testattavaa DOM-puuta, eikä peittokuva koskaan muuta testattavaa DOM-puuta. Klikkaa uudelleen ja kaikki apuviivat, ruudukot ja otsikot katoavat – ei sivun uudelleenlatausta eikä viipyileviä tapahtumakuuntelijoita.
Miksi haluat sen työkalupakkiisi
Säästä aikaa: Täyttöjen mittaaminen DevToolsissa vaatii sisäkkäisten laatikoiden läpikäymistä ja reunojen ja marginaalien arvojen lisäämistä mielessä. Grid Ruler Lite näyttää etäisyydet visuaalisesti yhdellä vedolla.
Vähennä virheitä: Havaitse pienetkin välien aiheuttamat regressiot ennen kuin ne saavuttavat testivaiheen tai, mikä pahempaa, tuotantovaiheen – erityisesti reagoivissa katkokohdissa, joihin laadunvarmistuksen silmät eivät aina osu.
Paranna yhteistyötä: Suunnittelijat voivat lisätä 8-pisteisen ruudukon suoraan käyttöönotetun koontiversion päälle ja jakaa kuvakaappauksen, jolloin kehittäjät saavat tarkan pikselipalautteen ilman Figma-kommentteja.
Pysy keskittyneenä: Ei tarvitse painaa Alt-Tabb-näppäintä Photoshopissa tai avata Sketch-tiedostoja vain painikkeen mittaamiseksi. Kaikki tapahtuu live-sivulla juuri niin kuin loppukäyttäjät sen näkevät.
Koulutus ja dokumentointi: Tuotepäälliköt ja tekniset kirjoittajat voivat havainnollistaa asettelun toimintaa viivainnäyttökuvien avulla, mikä tekee spesifikaatioasiakirjoista selkeämpiä kaikille sidosryhmille.
Kohdekäyttäjäryhmät
Käyttäjäryhmä
Front-end-kehittäjät
CSS-välistys, flexbox-välit ja komponenttien kohdistus katkokohtien välillä on tarkistettava. Vedä viivaimet, kohdista reunoihin, lukitse apuviivat ja vie kuvakaappauksia PR-tarkastuksia varten.
Käyttöliittymä-/käyttäjäkokemussuunnittelijat
On varmistettava, että kehitysversiot noudattavat 8- tai 10-pisteisiä suunnittelujärjestelmiä. Aseta päällekkäin perusruudukot, mittaa täyttöjä ja jaa annotoituja PNG-kuvia.
Laadunvarmistustestaajat
Ilmoita pikselin tarkkuudesta ja bugeista selkeillä todisteilla
Nopeat mittaukset ja yhden näppäimen kuvakaappaukset suoraan virheenseurantaan
Sisällöntoimittajat ja projektipäälliköt
Tarkista otsikkorivitys, mainospaikkojen välistys ja korttien asettelu sisällönhallintajärjestelmän ohjaamilla sivuilla. Ei-tekninen peittokuva välttää DevToolsin monimutkaisuuden.
Opettajat ja opiskelijat
Opeta suunnitteluperiaatteita, ruudukkoteoriaa ja responsiivisia asetteluja reaaliajassa selaimessa. Visuaalisia, reaaliaikaisia demonstraatioita ilman ulkoisia työkaluja.