CSS Source Maps funktionieren nicht!

Hallo Leute,

das eine gelöst, da steht das nächste schon vor der Tür. 

Ich bekomme keine .less Dateien als Quellen angezeigt, wenn ich im Dev-Modus nach den css codes suche. Ich habe unter Shopware eingestellt, dass die CSS Source Maps generiert werden solle, mehrmals kompiliert und cache geleert. Dazu habe ich es unter Safari, Chrome und Firebox DEV ( Firebug, FireLESS,…) probiert.

Mache ich hier etwas falsch, übersehe ich was oder ist es ein Bug?

Hey @axisambrosia‍,

ich habe gerade mal nachgeschaut, ob es sich hier um einen Bug handelt. Habe mir die aktuelle 5.2 genommen, die Einstellung im Theme-Manager gesetzt und den kompletten Cache samt Theme-Cache geleert und den Theme-Cache neu aufgebaut:

Sehe ich kein Problem. Kannst du mir weitere Infos zur Verfügung stellen - Shopware Version, Browser, etc.?

Viele Grüße,
Stephan Pohl  Shopware

5.1.6 Chrome gehts auch -> wenn man live editiert gehts manchmal kaputt, reicht aber um schnell zu gucken, reload nicht scheuen :wink:

Hallo,

wenn man auf die Namen der less-Dateien im Screenshot klickt, dann bekommt man im Gegensatz zu CSS-Dateien nicht den Source-Code der Less-Dateien angezeigt. Das ist nicht das Prinzip einer Souorcemap. Man kann aber alle Lessdateien loak installieren und in den Developer-Tools die lokal installieren Dateien mit den angezeigten verknüpfen. Allerdings bildet dies das Shopware-Vererbungssystem nicht richtig ab. Ist also nicht so richtig nützlich.

Das “Verschwinden” der Source-Map Angaben (der Less Dateinamen) ist ein Bug in den DevTools.

 

???

Du musst doch nur wissen wo was steht und wie der Selektor aussieht.

Im eigenen Theme machst du doch nur die Änderungen, die die unerwünschten Eigenschaften der CSS-Klasse überschreiben oder erweitern.

Wozu brauchst du die ganze Datei angezeigt? Btw. ist genau dies das 'Prrinzip einer sourcemap, bei minifiied und combined sources das mapping der Inhalte auf die richtige Quelle gezeigt zu bekommen.

@steinsoftware schrieb:

???

Du musst doch nur wissen wo was steht und wie der Selektor aussieht.

Im eigenen Theme machst du doch nur die Änderungen, die die unerwünschten Eigenschaften der CSS-Klasse überschreiben oder erweitern.

Wozu brauchst du die ganze Datei angezeigt? Btw. ist genau dies das 'Prrinzip einer sourcemap, bei minifiied und combined sources das mapping der Inhalte auf die richtige Quelle gezeigt zu bekommen.

Du bekommst aber nur header.less Zeile XYZ angezeigt und kannst nicht direkt in den DevTools in das Source-File springen und Du bekommst auch nicht gesagt, welche header.less gemeint ist. Bindet man alle Less-Dateien von Shopware als Workspace ein, um Änderungen direkt in den DEV-Tools vorzunehmen, funktioniert das zumindest bei mir nie richtig mit den abgeleiteten Templates. Das alles funktioniert allerdings, wenn man CSS-Dateien nimmt, die nicht „combined“ sind und ist für viele einfach der gewohnte Umgang. Wenn die dann auf die Less-Sourcemap Angaben treffen, ist das irritierend.  

 

Also bei mir funktioniert es einfach nicht, es werden einfach keine .less Sourcen angezeigt. Was Template bearbeiten ungeheuerlich verlangsamt…

 

Firefix Dev 49.0a9

Safari 9.1

Chrome Version 51.0.2704.106 (64-bit)

 

 Hallo @axisambrosia,

hast Du auch sicher alle Caches geleert und das Theme neu kompiliert, nachdem Du die CSS-Sourcemaps aktiviert hast? Eventuell auch mal manuell per FTP/SSH löschen.

Ich weiß jetzt gar nicht, ob Chrome und die anderen Browser die Angaben auch noch lokal cached, ich habe das immer so eingestellt, dass die Browser Caches bei Verwendung der DevTools deaktiviert sind. 

 

Alle Caches: Standard Shopware, Theme kompiliert, Browser gecleared und ich bekomme bei allen Browsern kein Mapping

@axisambrosia‍

Wenn du das DevTools von Chrome verwendest und die Seite aktualisierst sind bei mir die Zuweisungen zur jeweiligen less zu sehen. Sie werschwinden aber sobald ich live in der rechten Spalte was ändere, da ist nur noch die Zuweisung des gecachten Pfad ersichtlich.

Uwe

@useg schrieb:

@axisambrosia‍

Wenn du das DevTools von Chrome verwendest und die Seite aktualisierst sind bei mir die Zuweisungen zur jeweiligen less zu sehen. Sie werschwinden aber sobald ich live in der rechten Spalte was ändere, da ist nur noch die Zuweisung des gecachten Pfad ersichtlich.

Das Verschwinden der Less-Dateinamen nach Änderungen von CSS-Deklarationen ist ein bekannter Bug in Chrome, sozusagen normales Verhalten derzeit.  

@axisambrosia schrieb:

Alle Caches: Standard Shopware, Theme kompiliert, Browser gecleared und ich bekomme bei allen Browsern kein Mapping

Lösch doch mal die Caches von Shopware auf Dateiebene (FTP oder SSH):

  1. var/cache/  : den Ordner production…

2 )die dateien unter web/cache 

Ich habe schon Hosting-Angebote gehabt, bei denen dies über das Backend nicht richtig funktioniert hat. Eine andere Idee habe ich nicht, dass funktioniert eigentlich problemlos. Wenn gar nichts hilft, würde ich es mal mit einer neuen Shopware-Installation testen. 

Also bei mir läuft es unter MAMP, lokal am Rechner und die Datein habe ich gelöscht, jedoch hilft das auch nicht.

Das kann doch nicht wahr sein…

Probier eine Virtualbox mit Linux aus, dann bist Du doch auch viel näher am späteren Produktivsystem und hast die beiden Systeme besser voneinander separiert. Es gibt ja genügend fertige Linux-Lamp-Stack Images - ich nehme meist den Stack von bitnami, ist aber ein klein wenig Konfiguration notwendig. Oder direkt mit Vagrant: GitHub - shopwareLabs/shopware-vagrant: A Vagrant setup ready for shopware development

 

Hallo,

das Mapping für die Source-Dateien der CSS Source-Maps wurde in 5.2 gefixed.
Jetzt können die Files auch in den Dev-Tools aufgerufen werden.

Shopware Issuetracker

Sonnige Grüße,
Phil

Same old, same old…