Исходные карты Sass в Chrome не работают. В замешательстве

Я следовал всем инструкциям, которые я мог найти, чтобы заставить исходные карты Sass работать в Chrome - и у меня все еще что-то не получается. Не могу сказать, как - может, сможешь?

С помощью Sass 3.3.0.alpha.198 (как мне сказали, «передний край») я успешно генерирую файл исходной карты (test.css.map), который размещается вместе с моим скомпилированным CSS; а внизу этого скомпилированного CSS находится строка: /*# sourceMappingURL=test.css.map */. Так что этот шаг, кажется, идет хорошо.

В Chrome Canary я перешел на chrome://flags и включил эксперименты с инструментами разработчика. Я перезапустил. В моих настройках инспектора на вкладке «Общие» я установил флажок «Включить исходные карты»; на вкладке "Эксперименты" я проверил "Отладку таблицы стилей Sass".

После всего вышеперечисленного, когда я проверяю элемент (в локальном файле HTML, имеющем доступ к скомпилированному CSS), мне по-прежнему предоставляется тот же старый номер строки CSS, связанный с тем же старым скомпилированным файлом CSS. Нет указаний на поддержку исходной карты. Это не то, о чем говорится в учебниках.

(Я также пробовал это в стабильной версии Chrome - должна ли она работать в стабильной версии? - включив Эксперименты с инструментами разработчика и установив флажки «Включить исходные карты» и «Поддержка Sass». И здесь тоже не повезло.)

Может кто-нибудь сказать мне, что мне не хватает?


person davidtheclark    schedule 16.07.2013    source источник


Ответы (2)


Вы загружаете свою страницу из URL-адреса file: //? Это не сработает по соображениям безопасности - используйте любой http-сервер на localhost.

Кроме того, неплохо было бы обновить Canary; Исходные карты CSS закончили эксперименты. Вы должны установить флажок «Включить исходные карты CSS» в общих настройках.

person Alexander Pavlov    schedule 16.07.2013
comment
Спасибо - мне не хватало знаний о том, что я не могу использовать исходные карты из локальных статических файлов, что они должны обслуживаться через HTTP. Работает сейчас. - person davidtheclark; 17.07.2013

В случае, если кто-то еще окажется здесь, чтобы использовать исходные карты в Chrome для Sass, вам нужно сначала использовать флаг --sourcemap, чтобы сгенерировать их!

sass --watch --sourcemap --debug-in sass/screen.scss:screen.css

Дополнительная информация: https://developers.google.com/chrome-developer-tools/docs/tips-and-tricks#debugging-sass.

person Jason Lydon    schedule 25.10.2013
comment
Обновление этого ответа: флаг --sourcemap без аргументов официально устарел. Вы должны предоставить тип карты источника, который будет генерировать SASS, один из auto, file, inline или none. Из справки командной строки: --sourcemap = TYPE Как связать сгенерированный вывод с исходными файлами. auto (по умолчанию): относительные пути, где это возможно, URI файлов в другом месте файл: всегда абсолютные URI файлов встроенные: включать исходный текст в карту источников none: нет исходных карт - person Pierce; 06.02.2015