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 .

10 unglaubliche tragbare Gadgets, die Sie kaufen können

10 unglaubliche tragbare Gadgets, die Sie kaufen können

Seien wir ehrlich, wir alle lieben unsere Gadgets . Wir lieben, wie sie uns die Dinge erleichtern und wie wir sie für unsere täglichen Aktivitäten nutzen. Es ist wahrscheinlich sogar fraglich, dass wir ohne Gadgets nicht leben können, da wir uns entweder auf die Arbeit oder auf Hausarbeiten verlassen. Wä

(Tech- und Design-Tipps)

Android-Nutzer können jetzt Netflix-Filme auf SD-Karte herunterladen

Android-Nutzer können jetzt Netflix-Filme auf SD-Karte herunterladen

Die Entscheidung von Netflix, einen Offline-Anzeigemodus zu implementieren, war ein großer Segen für viele, die Shows herunterladen möchten, um sie später anzusehen. Unglücklicherweise hat dies dazu geführt, dass der bereits begrenzte Speicherplatz des Geräts schnell erschöpft ist, wenn Netflix auf seinen mobilen Geräten verwendet wird.Bei dem

(Tech- und Design-Tipps)