de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Entwickler: Debuggen Sie DOM-Elemente auf Ihrer Seite mit einer Codezeile

Wie oft haben Sie Schwierigkeiten, ein bestimmtes Problem zu finden, das Ihr CSS-Layout durcheinander bringt? Von fehlenden schließenden Tags bis zu falsch verschachtelten Geschwistern sind CSS-Probleme ein Dutzend. Und mit diesem CSS-Layout-Debugger wurde der Prozess um einiges einfacher .

Diese eine Codezeile durchläuft das DOM und umreißt jedes Element mit einer anderen Farbe. Auf diese Weise können Sie besser visualisieren, wie Ihr CSS funktioniert (oder nicht funktioniert) und Problembereiche schnell erkennen .

Mit GitHub können Entwickler kleine Code- Teile namens Gists speichern. Diese sind alle Open-Source und kostenlos für Ihre eigenen Zwecke zu speichern . Deshalb ist dieser CSS-Debugger so nützlich. Es kombiniert das moderne Können von Chrome DevTools mit der Einfachheit von Browser-Bookmarklets .

Um diesen Code zu verwenden, sollten Sie auf der Gist-Seite zuerst die Version kopieren, die Ihnen am besten gefällt . Dann fügen Sie diesen Code in Ihr Terminalfenster ein und führen ihn aus . Sie sollten mit einem Ergebnis wie folgt enden:

Jetzt ist es möglich, diesen Code als Bookmarklet in der Symbolleiste Ihres Browsers zu speichern . Aber wenn Sie ein Chrome-Benutzer sind, können Sie diesen JS-Code als Code-Snippet speichern, das einfacher zu verwenden ist.

Dieses Code-Snippet kann auf Knopfdruck immer wieder aufgerufen werden. Sie können jede Seite mit diesen bunten CSS-Konturen für DOM-Elemente von Eltern und Kindern parsen .

Sie sollten sich jedoch nicht nur auf Chrome beschränkt fühlen. Dieser Code-Schnipsel funktioniert für alle gängigen Browser, einschließlich Firefox, Safari, Opera und Internet Explorer.

Und für alle, die neugierig sind, wie das funktioniert, können Sie die kommentierte Version mit Kommentaren für jede Codezeile lesen.

Dieser Gist ist voll von verwandten Benutzerkommentaren und Updates von anderen Entwicklern, die helfen, ihn kleiner und effizienter zu machen. Aber in seinem aktuellen Zustand ist dies eine der einfachsten Möglichkeiten, jedes DOM mit einer einzelnen Codezeile zu debuggen .

Finden Sie perfekte Font-Paarungen mit diesem Web Font Generator

Finden Sie perfekte Font-Paarungen mit diesem Web Font Generator

Text spielt eine große Rolle im Qualitätsdesign. Dies schließt definitiv das Web ein, in dem Typografie die Lesbarkeit beeinflusst. Mit dem Aufkommen von Webfonts ist es einfacher denn je, Ihren Seitentext zu variieren und sich von der Masse abzuheben.Wenn Sie die perfekten Schriftkombinationen für Ihre Kopfzeilen, den Seitentext, die Navigation und andere Bereiche finden, sind Sie in der Nähe eines großartigen Layout-Designs.Brand

(Tech- und Design-Tipps)

15 Photoshop Brush Sites, die Sie kennen sollten

15 Photoshop Brush Sites, die Sie kennen sollten

Adobe Photoshop ist wahrscheinlich das beliebteste, wenn nicht eines der beliebtesten Grafikbearbeitungsprogramme unserer Zeit. Eines der wichtigsten Elemente der Photoshop-Bearbeitung sind die Pinsel. Daher ist es wichtig, die passenden Pinsel für Ihr Design zu finden. Manchmal kann es jedoch ziemlich frustrierend werden, wenn Sie nicht die Werkzeuge finden, die Sie benötigen, um Ihre spezifischen Designanforderungen zu erfüllen. E

(Tech- und Design-Tipps)