Pro-Tipp: CSS Befehle mit den Chrome Dev Tools suchen

Pro-Tipp: CSS Befehle mit den Chrome Dev Tools suchen

Alexander Wolf 01. September 2015 2

Ihr seid schlau und guckt euch den Code mit "Element untersuchen" bzw. mit den Chrome Dev Tools an.

Das ist auf jeden Fall schon der erste richtige Schritt in einfache Theme Entwicklung.

Jetzt habt ihr ein Element gefunden und wollt es anpassen.

In den Chrome Developer Tools habt ihr es schnell gefunden.

Chrome Dev Tools Elemente

Rechts an der Seite steht auch der dazugehörige CSS Code.

Super einfach.

Chrome Dev Tools

Leider müsst ihr teilweise echt viel scrollen, weil einfach sehr viel CSS genutzt wurde.

Dafür gibt es heute den Pro-Tipp!

Auch wenn es für viele offensichtlich ist:

Es gibt eine Suche!

Einfach mit Cmd + F die Suche aktivieren und Code eingeben: z.B. text-decoration

Chrome Dev Tools CSS Suche

Jetzt wird das gesuchte markiert und alles andere ausgeblendet.

So findet ihr schnell die gesuchten CSS Befehle und alle sind glücklich.

Heute wirklich nur ein kurzer Pro-Tipp. Beim nächsten Mal dann wieder mehr.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

2 Kommentare

  • Hallo,

    weißt du warum bei den Chrome Dev Tools jedesmal der webcache pfad angezeigt wird, sobald man ne änderung vornimmt?

    Habe die CSS Source Map aktiv im backend, aber wenn ich z.B. etwas inspiziere und dann sagen wir nen border im Dev-Tool ausblende wird mir der Pfad zum webcache angezeigt, statt der richtig. Also statt "header.less" dann "../web/cache/ganzVieleZahlen.css". Bei Firefox developer edition funktioniert es.

    Hoffe du weißt was ich meine und kannst mir helfen :)

    MfG

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Wie du jedes Icon in Shopware 5 anpassen kannst
Plugin Theme anpassen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware Logo aus dem Footer entfernen
Social Media Icon mit Link im Footer
© 2017 by 8mylez. Powered by Goltfisch GmbH.