extension ExtPose

Rasterlineal Lite

CRX id

pmkbdhlmjbnmmpeecekhplejmlmeapog-

Description from extension meta

Messen Sie pixelgenaue Abstände und Raster auf jeder Webseite.

Image from store Rasterlineal Lite
Description from store Pixelgenauigkeit ist der stille Held guten Designs. Schon eine einzige Pixelfehlausrichtung kann den Rhythmus eines Rasters stören, Text unzentriert wirken lassen oder dazu führen, dass eine ganze Komponente „fast richtig“ aussieht, aber nicht ganz. Grid Ruler Lite bietet Frontend-Entwicklern, UI/UX-Designern, QA-Testern und allen, denen visuelle Perfektion wichtig ist, ein sofort einsatzbereites Mess-Toolkit im Browser – ohne schwerfällige Designsoftware, ohne überladene DevTools-Panels und ohne in externe Apps verschobene Screenshots. Mit nur einem Klick legt die Erweiterung ein skalierbares Lineal, Rasterhilfslinien und optionale Grundlinienraster über jede Webseite. So können Sie Abstände prüfen, 8-Punkt-Raster verifizieren und Layoutfehler in Sekundenschnelle erkennen. Was zeichnet Grid Ruler Lite aus? Ein-Klick-Aktivierung, Ein-Klick-Abmeldung Klicken Sie auf das Symbol in der Symbolleiste (oder rufen Sie die Verknüpfung auf, die Sie in den Browser-Tastatureinstellungen festgelegt haben) und die Erweiterung fügt eine leichte<canvas> Overlay in seinem eigenen Shadow-DOM gekapselt. Das CSS Ihrer Seite kann nicht stören, und das Overlay verändert den getesteten DOM-Baum nicht. Klicken Sie erneut, und alle Hilfslinien, Raster und Beschriftungen verschwinden – kein Seitenneuladen, keine verbliebenen Ereignis-Listener. Warum Sie es in Ihrem Toolkit haben möchten Zeitersparnis: Das Messen von Polsterungen in DevTools erfordert das Durchsuchen verschachtelter Felder und das gedankliche Hinzufügen von Rand- und Abstandswerten. Grid Ruler Lite zeigt Abstände visuell mit einem Ziehen an. Reduzieren Sie Fehler: Erkennen Sie winzige Regressionen, bevor sie die Staging- oder, schlimmer noch, die Produktion erreichen – insbesondere bei reaktionsfähigen Haltepunkten, wo die Augen der Qualitätssicherung nicht immer landen. Verbessern Sie die Zusammenarbeit: Designer können das 8-Punkt-Raster direkt auf einen bereitgestellten Build legen und einen Screenshot freigeben, wodurch Entwickler genaues Pixel-Feedback ohne Figma-Kommentare erhalten. Konzentriert bleiben: Kein Alt-Tab-Bedienen in Photoshop oder Öffnen von Sketch-Dateien, nur um eine Schaltfläche zu messen. Alles geschieht über die Live-Seite, genau so, wie Endbenutzer es sehen. Informieren und dokumentieren: Produktmanager und technische Redakteure können das Layoutverhalten mit Lineal-Screenshots demonstrieren und so Spezifikationsdokumente für alle Beteiligten verständlicher machen. Zielbenutzergruppen Benutzergruppe Front-End-Entwickler CSS-Abstände, Flexbox-Lücken und Komponentenausrichtung über Haltepunkte hinweg müssen überprüft werden. Lineale ziehen, an Kanten ausrichten, Hilfslinien sperren, Screenshots für PR-Überprüfungen exportieren UI/UX-Designer Es muss bestätigt werden, dass die Entwickler-Builds 8-Punkt- oder 10-Punkt-Designsysteme berücksichtigen. Grundlinienraster überlagern, Polsterungen messen, kommentierte PNGs teilen. QA-Tester Melden Sie pixelgenaue Fehler mit klaren Beweisen Schnelle Messungen und Screenshot-Erfassung mit nur einer Taste werden direkt in den Bugtracker übernommen Inhaltsredakteure und PMs Überprüfen Sie den Headline-Umbruch, den Abstand der Anzeigenplätze und die Kartenlayouts auf CMS-gesteuerten Seiten. Nicht-technische Overlays vermeiden die Komplexität von DevTools. Pädagogen & Studenten Lehren Sie Designprinzipien, Rastertheorie und responsive Layouts live im Browser. Visuelle Demonstrationen in Echtzeit ohne externe Tools.

Statistics

Installs
39 history
Category
Rating
0.0 (0 votes)
Last update / version
2025-06-10 / 1.0.7
Listing languages

Links