Jak debugować LESS w Chrome?

Wygląda na to, że debugowanie LESS osiągnęło znaczną odległość już od roku. Zastanawiam się, ile osób ma doświadczenie w debugowaniu za pomocą narzędzi programistycznych w Chrome/Canary.Jak debugować LESS w Chrome?

Próbuję zapewnić, że podczas debugowania pliku, element CSS elementu pojawia się jako plik LESS, a nie plik CSS. Nie ma sensu pokazywać numerów linii CSS, kiedy potrzebuję znać wymaganego numeru wiersza pliku LESS. Mogę to zrobić w firefoxie z firebug i fireless, ale to nie działa w chrome Próbowałem wykonać kroki here, jednak wydaje mi się, że nie działa poprawnie, nawet po dokładnym wykonaniu instrukcji.

Używam systemu OSX, zainstalowałem LESS za pośrednictwem node.js i używam wtyczki ST2 Less2CSS, aby przetworzyć mniejszy plik przy składowaniu. Użycie komendy lessc --line-numbers=mediaquery style.less style.css działa zgodnie z oczekiwaniami i zapisuje to na początku mojego pliku css @media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, jednak podczas sprawdzania elementu nadal przechwytuje tylko plik CSS, a nie plik LESS.

mam Wymagane preferencje Chrome włączona (wsparcie dla SASS i Włącz Źródło Maps)

myśli?

Źródło

2013-03-27 Duncan

samo w Google Chrome 27.0.1453.110 (Linux) – dVaffection

To samo w wersji Chrome 27.0.1453.116 m (Windows) – Adaptabi

Myślę, że problemy, które wymieniłeś, nie są powiązane.

O ile rozumiem, skompiluj plik LESS po stronie serwera i wszystko, co chcesz zrobić, to pobrać nowy plik css, a nie buforowany? Czy mam rację?

Czy próbowałeś disable cache on google chrome?

Źródło

2013-03-27 17:50:39

Przepraszam, jeśli nie było jasne: próbuję upewnić się, że podczas debugowania pliku, CSS elementu pokazuje się jako plik LESS, a nie plik CSS. Nie ma sensu pokazywać numerów linii CSS, kiedy potrzebuję znać wymaganego numeru wiersza pliku LESS. Mogę to zrobić w firefoxie z firebug i fireless, ale to nie działa w chrome – Duncan

Ten komentarz jest o wiele bardziej przejrzysty niż twój oryginalny post. Rozważ edytowanie OP :) –

Dobra rozmowa. Gotowe :) – Duncan

Autor wpisu blogu tutaj ... Wróciłem i zaktualizowałem mój post, więc działa on teraz w zwykłym Chrome 26. Po sprawdzeniu w Canary i to już nie działa. Więc Chrome 24-26 są dobre, ale Canary jest zepsuty.

Źródło

2013-03-28 15:47:01 robdodson

To teraz pracuje perfekcyjnie z less.js 1.5b4 i Chrome 30.0.1599.69

Zasadniczo, trzeba upewnić się, że lessc generuje ważne źródło mapa URL na końcu pliku css:

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

i że plik .css.map jest ładowany przez przeglądarkę. Jeśli jest to wciąż z jakiegoś powodu nie działa dla Ciebie, w check chrome: // flags Włącz narzędzi programistycznych eksperymenty jest

enter image description here

więcej szczegółów tutaj: https://github.com/less/less.js/issues/1050

Źródło

2013-10-12 11:32:54 WooDzu

Jak debugować LESS w Chrome?

Odpowiedz

Powiązane problemy