Come eseguire il debug di LESS in Chrome?

Question

Sembra che il debug di tipo LESS sia arrivato a una distanza accettabile da quando, anche un anno fa, mi stavo chiedendo quante persone hanno esperienza con il debug usando gli strumenti di sviluppo in Chrome/Canary.

Sto cercando di assicurarmi che quando eseguo il debug di un file, il CSS dell'elemento si presenti come il file LESS, piuttosto che il file CSS. È poco utile visualizzare i numeri di riga CSS, quando ho bisogno di conoscere il numero di riga richiesto del file LESS. Posso farlo in firefox con firebug e senza firme, ma non funziona in chrome

Ho provato a seguire i passaggi here, tuttavia non sembra funzionare correttamente anche dopo aver seguito attentamente le istruzioni.

Sto eseguendo OSX, ho installato LESS via tramite node.js e sto utilizzando il plug-in ST2 Less2CSS per elaborare il file meno in fase di salvataggio. L'utilizzo del comando lessc --line-numbers=mediaquery style.less style.css funziona come previsto e lo scrive nella parte superiore del mio file css @media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, ma durante l'ispezione di un elemento, continua a catturare solo il file CSS e non il file LESS.

ho le preferenze Chrome necessarie accesi (Supporto per SASS e abilitare le mappe Fonte)

Pensieri?

Answer 1

Penso che i problemi a cui si riferiscono non siano correlati.

Per quanto ho capito, compila il tuo file LESS sul lato server e tutto quello che vuoi fare è recuperare il nuovo file css e non quello in cache? Ho ragione?

Hai provato disable cache on google chrome?

Answer 2

Autore post del blog qui ... Sono tornato indietro e ho aggiornato il mio post in modo che ora funzioni con il normale Chrome 26. Appena controllato in Canary e non sembra che funzioni più. Quindi Chrome 24 - 26 sono buoni ma Canary viene eliminato.

Answer 3

questo è ora lavorando perfettamente bene con less.js 1.5b4 e Chrome 30.0.1599.69

Fondamentalmente, è necessario assicurarsi che lessc genera fonte valida mappa url alla fine del file css:

/*# sourceMappingURL=/templates/lwks/css/template.css.map */ 

e che il file .css.map viene caricato dal browser. Se questo è ancora per qualche motivo non funziona per voi, sotto controllo chrome: // flags Abilita Developer Tools esperimenti è in

maggiori dettagli qui: https://github.com/less/less.js/issues/1050