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 37

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!

37 Kommentare

  • Das sollte man auf jeden Fall beachten um seine Page clean zu halten. So entsteht kein Chaos!
    Antworten

  • Egal wie alt der Beitrag ist, hilfreich ist es jederzeit!
    Antworten

  • es ist toll das in den Kommentaren so viel diskutiert wird so kriegt man nochmal extra wissen
    Antworten

  • hab ihn heute entdeckt und er ist einfach immer noch hilfreich.
    Antworten

  • Der Betrag hat mir heute auch wieder geholfen! Oldie but Goldie :-)
    Antworten

  • genau, das habe ich auch erst jetzt entdeckt und fand das ebenfalls hilfreich!

  • Hey Andreas,

    freut uns, dass es hilfreich ist!

    Gruß
    Alexander

  • 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")."
    Antworten

  • 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.
    Antworten

  • […] 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...
    Antworten

  • 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
    Antworten

  • 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
    Antworten

  • 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 es funktioniert auch mit Firebug allerdings erst ab der 3.0 Version (Entwicklungsversion, scheint bei mir aber ohne Probleme zu laufen)
    Thomas
    Antworten

  • 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.
    Antworten

  • Hallo Sebastian,

    Für FireBug musst du dieses Addon installieren: 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

E-Mail: support@8mylez.com

Telefon: +49 (0) 5251 284 710

Shopware Dienstleistungen

Shopware Code AuditShopware PerformanceShopware Leasing

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz