Как отладить LESS в Chrome?

Question

Похоже, что отладка LESS пришла на приличное расстояние, так как еще год назад, и мне было интересно, сколько людей имеют опыт отладки с помощью инструментов разработчика в Chrome/Canary.

Я пытаюсь гарантировать, что когда я отлаживаю файл, CSS-элемент появляется как файл LESS, а не файл CSS. Не имеет смысла указывать номера строк в CSS, когда мне нужно знать номер строки LESS. Я могу сделать это в firefox с firebug и без огней, но он не работает в chrome

Я попытался выполнить шаги here, однако он, похоже, не работает для меня правильно даже после тщательного ознакомления с инструкциями.

Я запускаю OSX, LESS установлен через node.js, и я использую плагин ST2 Less2CSS для обработки меньшего файла при сохранении. Использование команды lessc --line-numbers=mediaquery style.less style.css работает так, как ожидалось, и записывает это в начало моего файла css @media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, однако при проверке элемента он все еще только захватывает файл CSS, а не файл LESS.

У меня есть требуемые Chrome предпочтения включена (Поддержка SASS и Enable Source Maps)

Мысли?

Answer 1

Я думаю, что проблемы, о которых вы говорите, не связаны.

Насколько я понимаю, вы скомпилируете свой файл LESS на стороне сервера, и все, что вы хотите сделать, - это получить новый файл css, а не кешированный? Я прав?

Вы пытались disable cache on google chrome?

Answer 2

Блог автора здесь ... Я вернулся и обновил сообщение, поэтому теперь он работает с обычным Chrome 26. Только что зарегистрировался в Canary и , похоже, что он больше не работает. Так что Chrome 24 - 26 хороши, но Канарские острова разоряются.

Answer 3

Это теперь работает прекрасно с less.js 1.5b4 и Chrome 30.0.1599.69

В принципе, вы должны убедиться, что lessc генерирует действительный источник карту URL в конце файла CSS:

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

и что .css.map файл загружается в браузере. Если это еще по какой-то причине не работает для вас, в контрольной хромом: // флаги Включить Инструменты разработчика эксперименты на

более подробно здесь: https://github.com/less/less.js/issues/1050