Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht

Pro-Tipp: Ganz einfach herausfinden in welcher LESS Datei der Code steht

Alexander Wolf 22. August 2015 26

UPDATE: Falls ihr Grunt nutzt um eure Themes zu entwicklen, braucht ihr die Einstellung nicht, da dies Grunt für euch übernimmt und die CSS Sourcemap erstellt. Wie ihr das anstellt: Shopware 5 Theme Entwicklung mit Grunt

Heute einen kurzen Beitrag und zwar einen Pro Tipp! Für die Pro's unter uns.

Problem: Wir wollen ein Theme entwickeln / anpassen. An sich kein Problem. Die Preisfrage nun: Was ist aber immer etwas nervig? Genau! Wenn wir in den Chrome Developer Tools das richtige Element gefunden haben, welches wir anpassen wollen, wissen wir nicht in welcher LESS Datei sich der Code dafür befindet.

Element untersuchen mit Chrome

Natürlich können wir mit dem Editor suchen oder durch die Klassennamen darauf schließen. Oder (da wir alle Pro's) sind lassen wir die "CSS Source Map erstellen" und können direkt sehen in welcher Datei der LESS Code zu finden ist.

Schritt für Schritt

1. Ab ins Backend mit euch. Einloggen!

2. Oben in der Navigation auf "Einstellungen" > "Theme-Manager".

3. Im Theme-Manager oben auf "Einstellungen"

4. Das Häkchen bei "CSS Source Map erstellen" setzen.

5. Cache leeren. Theme kompilieren.

6. Freuen. Fertig!

Mit diesem Pro-Tipp könnt ihr nun schneller und einfacher den geforderten LESS Code finden!

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

26 Kommentare

  • Die Beschreibung habe ich noch vergessen:

    "FireLESS allows Firebug to display the original LESS filename and line number of LESS-generated CSS styles.FireLESS, when coupled with the patched version of LESS (pull request pending), allows you to see, within the CSS sub-panel of the inspector, the LESS file and line number where a certain ruleset was defined rather than the generated CSS line and number (which is not very helpful to find again where you had that declaration).

    It currently only works if you use LESS in development mode and in browser mode (make sure less.env is set to "development")."
  • Hey Atilla,

    soweit ich es verstanden habe funktioniert die aktuelle Version von FireLess nicht richtig. Nur im Development Modus.

    Ich wuerde dir aber empfehlen Chrome zu nutzen. Zumindest zum Entwickeln. Das wird von Shopware auch so empfohlen.

    Ansonsten koenntest du probieren die less.env auf development zu setzen. Wie genau das geht, kann ich dir leider nicht sagen. So sagt es jedenfalls die Beschreibung.

    Gruß
    Alexander
  • Hallo Alexander,

    eine Frage. Ich hab mir das fireless addon mal installiert konnte aber noch keine Veränderung feststellen. Wenn man auf die Details des addons kommt eine englische Beschreibung wo ich nacht durchsteige, was ich da wo noch zusätzlich einstellen muss um die Zeile un den Dateinamen des Codes anezeigt zu bekommen. Und Danke für einen weiteren lehrreichen Artikel.
  • […] Ganz einfach herausfinden in welcher LESS Datei der … – 8mylez.comWenn wir in den Chrome Developer Tools das richtige Element gefunden haben, …. Hallo es funktioniert auch mit Firebug allerdings erst ab der 3.0 Version … […]
  • Gibt es denn mittlerweile eine Lösung? Bei mir schmiert das Backend nach wie vor ab, sobald ich das Häkchen setze. In den Entwickler Tools wird mir auch nichts angezeigt...
  • Hallo Claudio,

    welches System benutzt du zum Arbeiten? Wenn du Windows nutzt, empfehle ich dir es mit Linux oder OS X zu probieren.

    Evtl. auch auf einem linux server direkt.

    Gruß
    Alexander
  • Hi, ich bin absoluter Anfänger und steh gerade aufm Schlauch. Seitdem ich die CSS Source Mapping angeklickt habe, kompiliert auch bei mir das Theme nicht mehr. Auch wenn ich den Haken wieder raus nehme, steht lediglich "bearbeite Shop". Mein memory limit habe ich nach und nach auf 1024M erhöht, daran kann´s wohl nicht liegen. Wenn ich ins Entwicklertool gucke und auf "untersuchen" klicke, "prüfen" gibt´s nicht, wird lediglich der HTML Code angezeigt. Worauf soll ich da genau achten?
    Hat jemand einen Rat?
    Vielen Dank im Voraus
  • Hallo Claudio,

    deine Nachricht war leider im Spam, daher die lange Wartezeit.

    Kannst du in die Fehlerlogs deines Servers schauen? Möglicherweise kann dich dabei dein Provider unterstützten. Da findest du meistens detaillierte Informationen zu den Fehlern.

    Gruß
    Alexander
  • Hallo,

    interessanter Weise hängt sich bei mir die Theme-Kompilierung komplett auf, wenn ich den Haken bei "CSS Source Map erstellen" setze. Die Kompilierung bleibt direkt am Anfang beim Punkt Bearbeite Shop "XXX" ... stehen.

    Haben Sie eine Idee womit das zusammenhängen kann?

    Viele Grüße


    Markus Schwarz
  • Hallo Markus,

    bekommst du eine Fehlermeldung? Vielleicht in den Entwicklertools des Browser in die Konsole schauen.

    Wenn es nicht weiter geht, dann wird irgendwo ein Fehler sein.

    Gruß
    Alexander
  • Hallo Thomas,

    sehr gut zu wissen.

    Danke!

    Gruß
    Alexander
  • Im Chrome Developer Tool funtkioniert das, im Firebug aber nicht, oder? Vielleicht sehe ich es auch nicht.
  • Hallo Sebastian,

    Für FireBug musst du dieses Addon installieren: https://addons.mozilla.org/de/firefox/addon/fireless/

    Zeigt zwar den ganzen Pfad, anstatt nur die Datei an. Aber erfüllt auch seinen Zweck.

    Mit den Firefox Developer Tools funktioniert es auch. Falls das für dich eine Option ist.

    Viel Spaß!

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide
So optimierst Du Deinen Shopware Shop richtig!
mehr erfahren

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
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Plugin Theme anpassen
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Staging Umgebung – Was ist das und warum brauchst du eine?
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
© 2017 by 8mylez. Powered by Goltfisch GmbH.