Seitenlineal fügt Photoshop-ähnliche Lineale und verschiebbare Führungslinien zu jeder Webseite hinzu. Pixelgenaue Lineale verlaufen entlang der oberen und linken Kanten des Viewports, und Sie können Führungslinien auf die Seite ziehen, um Abstände zu messen, Ausrichtungen zu überprüfen und Abstände zu verifizieren — alles direkt auf der Live-Seite.
Designer, die in Figma oder Photoshop arbeiten, verlassen sich auf Lineale und Führungslinien, um Abstände und Ausrichtungen zu überprüfen. Aber wenn diese Designs in HTML/CSS implementiert werden, bedeutet die Überprüfung der Pixelgenauigkeit normalerweise das Öffnen von DevTools, das Hovern über Elemente einzeln und das Vergleichen berechneter Werte mit dem Mockup. Seitenlineal bringt den vertrauten Lineal-und-Führungs-Workflow direkt in den Browser. Ein horizontales Lineal mit Strichmarken überspannt den oberen Rand des Viewports und ein vertikales Lineal den linken Rand — beide zeigen Pixelpositionen. Klicken und ziehen Sie von einem der Lineale, um eine Führungslinie auf die Seite zu ziehen. Führungslinien sind farbkodiert (blau für horizontal, rot für vertikal) und zeigen ihre Pixelposition. Der Abstand zwischen zwei parallelen Führungslinien wird automatisch berechnet und angezeigt. Führungslinien ziehen zum Neupositionieren oder Doppelklicken zum Entfernen. Die gesamte Überlagerung ist nicht aufdringlich — sie liegt über der Seite ohne Layout oder Interaktionen zu beeinflussen.
Präzise Lineale mit Strichmarken alle 50 Pixel verlaufen entlang der oberen und linken Kanten des Viewports. Die Lineale scrollen mit der Seite und zeigen genaue Pixelpositionen relativ zum Seitenursprung (0,0). Strichmarken in 10px-Intervallen mit Beschriftungen alle 50px.
Klicken und ziehen Sie vom horizontalen Lineal, um eine horizontale Führungslinie zu erstellen, oder vom vertikalen Lineal für eine vertikale Führungslinie. Führungslinien rasten an der Cursorposition ein und zeigen ihre genaue Pixelkoordinate (z.B. y: 200px). Ziehen zum Neupositionieren, Doppelklicken zum Entfernen.
Wenn zwei parallele Führungslinien platziert werden, wird der Pixelabstand zwischen ihnen automatisch berechnet und mit einem Verbindungsklammer und Beschriftung angezeigt. Platzieren Sie zwei horizontale Führungslinien 120px auseinander und sehen Sie 120px dazwischen beschriftet.
Horizontale Führungslinien sind blau, vertikale Führungslinien sind rot — so sind sie auf einen Blick leicht zu unterscheiden, wenn mehrere Führungslinien platziert sind. Jede Führungslinie zeigt ihre Position in einem kleinen Beschriftungsabzeichen.
Lineale und Führungslinien werden als transparente Überlagerung gerendert, die das DOM, Layout oder JavaScript der Seite nicht beeinflusst. Sie können immer noch durch Klicken mit Seitenelementen interagieren. Die Überlagerung erfasst nur Klicks auf die Lineale und Führungsliniengriffe.
Platzieren Sie so viele Führungslinien wie nötig — es gibt keine Begrenzung. Erstellen Sie ein vollständiges Messraster mit horizontalen und vertikalen Führungslinien, die jeden wichtigen Ausrichtungspunkt auf der Seite markieren.
Das Mockup sagt, der Header ist 80px hoch und der Inhalt beginnt 120px vom oberen Rand. Platzieren Sie horizontale Führungslinien an diesen Positionen und überprüfen Sie sofort, ob die implementierte Seite den Designspezifikationen entspricht.
Platzieren Sie Führungslinien oben und unten an wiederholten Elementen (Karten, Listenelemente, Abschnitte), um zu überprüfen, ob sie alle identische Abstände haben. Inkonsistente Lücken zwischen Elementen werden sofort offensichtlich.
Platzieren Sie eine vertikale Führungslinie an der linken Kante einer Überschrift und prüfen Sie dann, ob der Absatztext, die Buttons und Bilder darunter auf derselben Linie ausgerichtet sind. Fehlausrichtungen von nur wenigen Pixeln sind gegen die Führungslinie sichtbar.
Platzieren Sie zwei vertikale Führungslinien an den linken und rechten Kanten eines Elements, um seine Breite zu messen. Platzieren Sie zwei horizontale Führungslinien für die Höhe. Der automatisch berechnete Abstand gibt Ihnen die genauen Pixelabmessungen.
Platzieren Sie eine vertikale Führungslinie bei üblichen Breakpoint-Breiten (768px, 1024px, 1280px) und ändern Sie die Browsergröße, um zu überprüfen, ob Elemente bei jedem Breakpoint korrekt umfließen. Die Führungslinien bleiben als visuelle Referenzpunkte fest.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Seitenlineals. Pixelgenaue Lineale erscheinen entlang der oberen und linken Kanten des Viewports.
Klicken und ziehen Sie vom oberen Lineal, um eine horizontale Führungslinie zu platzieren, oder vom linken Lineal für eine vertikale Führungslinie. Die Führungslinie folgt Ihrem Cursor und rastet an der Pixelposition ein, an der Sie loslassen.
Jede Führungslinie zeigt ihre Pixelposition (z.B. y: 200px). Wenn zwei parallele Führungslinien platziert sind, wird der Abstand zwischen ihnen automatisch mit einer beschrifteten Klammer angezeigt.
Ziehen Sie eine Führungslinie, um sie an eine neue Position zu verschieben — die Abstandsbeschriftungen aktualisieren sich in Echtzeit. Doppelklicken Sie auf eine Führungslinie, um sie von der Seite zu entfernen.
Klicken Sie erneut auf das Symbol des Seitenlineals, um alle Lineale und Führungslinien auszublenden. Ihre Führungslinien-Positionen werden beibehalten, wenn Sie während derselben Sitzung erneut aktivieren.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
