Debuggen Sie CSS in Chrome mit OffiDocs

BESCHREIBUNG

# Debuggen von CSS Eine leichtgewichtige Erweiterung für Google Chrome, um den Überblick über alle Elemente zu zeigen, die auf der Seite vorhanden sind.

Bei der Arbeit an der Entwicklung von Webseiten besteht der schwierige Teil darin, das Element wie erforderlich zu positionieren und zu prüfen, welches Element das andere beeinflusst.

Diese Chrome-Erweiterung ermöglicht es dem Benutzer, den Umriss auf jedem Element der Seite zu sehen.

Halten Sie die Strg-Taste auf der Tastatur gedrückt und bewegen Sie das Element, um die Elementdetails zusammen mit dem Wert anzuzeigen.

---------- # Verwendung Klicken Sie nach der Installation einfach auf das Erweiterungssymbol, um es ein- oder auszuschalten.

Wenn Sie ein Liebhaber von Tastaturkürzeln wie ich sind, drücken Sie einfach die Taste „Alt+Umschalt+C“, um die Erweiterung umzuschalten.

---------- # Wie es funktioniert? Diese Erweiterung funktioniert mit dem CSS-Outline-Attribut: Fügen Sie das folgende Code-Snippet in einem beliebigen CSS einer Webseite hinzu ` * { outline: 1px solid red; }` Die Erweiterung macht dasselbe, nur ist; Es gibt verschiedenen Elementen unterschiedliche Farben, während das Code-Snippet jedem Element eine rote Umrandung hinzufügt.

---------- # Andere Arbeit und Repository [Ein leichtes anpassbares Plugin für jQuery, um die horizontale Länge in Form eines vertikalen Fortschrittsbalkens anzuzeigen.

](https://github.

com/pranayjoshicse/VerLim.

js) [gelistet auf jqueryscript.

Netz] (https://www.

jqueryscript.

net/other/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js.

html) [Demo](https://www.

jqueryscript.

net/demo/Simple-Custom-Reading-Indicator-with-jQuery-VerLim-js/) ---------- # Mehr über mich [twitter.

](https://twitter.

com/pranayjoshicse) [über mich.

](https://über.

ich/pranayjoshi)

Zusätzliche Information:

- Angeboten von Pranay Joshi
- Durchschnittliche Bewertung: 4.73 Sterne (liebte es)
- Entwickler Diese E-Mail-Adresse ist gegen Spambots geschützt. Sie müssen JavaScript aktivieren, damit Sie sie sehen können.

CSS-Web debuggen extension integriert mit den OffiDocs Chromium Online