KostenlosErweiterung für Chrome und Firefox
HTML und CSS jedes Elements kopieren
HTML/CSS Extractor fügt dem Elements-Panel der DevTools einen Bereich hinzu. Wähle ein Element aus, und du siehst sein HTML und die CSS-Regeln, die es gestalten, bereit zum Bearbeiten, Ansehen und Kopieren.
Screenshots
So funktioniert’s
Öffne die DevTools auf einer beliebigen Website: Drücke F12 oder auf dem Mac Cmd+Option+I.
Wähle im Elements-Panel (in Firefox im Inspektor) ein Element aus, oder klicke es auf der Seite mit der rechten Maustaste an und wähle „Untersuchen“.
Öffne in der Seitenleiste des Panels den Tab „HTML/CSS Extractor“, neben „Berechnet“.
Prüfe die Live-Vorschau, bearbeite den Code nach Belieben und klicke auf „Copy CSS“ oder „Copy HTML“.
Was sie kann
Die Regeln, die greifen
CSS-Regeln aus den Stylesheets der Seite, die auf das Element und alles darin zutreffen, inklusive Regeln für :hover, ::before und ::after und Media Queries in ihrer ursprünglichen Reihenfolge.
Kürzere Selektoren
Lange Selektoren werden auf die kürzeste Form gekürzt, die noch passt, mit einem Kommentar, der den ursprünglichen Selektor und seine Spezifität zeigt.
Live-Vorschau
Sieh den extrahierten Code in Mobil- (375 px), Tablet- (768 px) oder Desktop-Breite (1240 px). Links in der Vorschau führen nirgendwohin.
Bearbeiten, dann kopieren
CSS und HTML öffnen sich in getrennten Editoren mit Syntaxhervorhebung, Zeilennummern und Code-Faltung. Kopiere jedes davon mit einem Klick.
Vollständige URLs
Relative Adressen von Bildern, Schriften und Links werden zu vollständigen URLs, damit der Code auch anderswo funktioniert.
Schriften und Variablen
Auf Wunsch die @font-face-Regeln der Seite einbeziehen und CSS-Variablen markieren, die der extrahierte Code nie verwendet.
Geerbte Styles
Auf Wunsch die Textstyles hinzufügen, die das Element von seinen Eltern erbt, etwa Schrift und Farbe, auf einem Wrapper um das HTML.
Folgt deiner Auswahl
Der Bereich aktualisiert sich, sobald du ein anderes Element auswählst. Sechs Schalter steuern, was enthalten ist, und deine Auswahl wird gespeichert.
Von Grund auf privat
- Kein Konto, keine Registrierung.
- Funktioniert nur in den DevTools, mit dem Element, das du auswählst.
- Deine Einstellungen werden nur in deinem Browser gespeichert. Der extrahierte Code wird nicht gespeichert.
- Keine Analysetools, kein Tracking, keine Werbung. Nichts, was du extrahierst, wird irgendwohin gesendet.
Kostenlos, ohne Konto
Alles inklusive
- HTML und CSS jedes Elements
- Vereinfachte Selektoren
- Live-Vorschau in drei Bildschirmbreiten
- Code-Editoren mit Kopieren per Klick
- Sechs Extraktionseinstellungen, die gespeichert bleiben