Я динамически добавляю теги CSS на страницу с помощью jQuery:
$('<style type="text/css"/>').text(css).appendTo(document.head);
При просмотре в инструментах разработчика Chrome все CSS отображаются как "localhost", что не всегда полезно:
Есть ли что-то вроде Source Maps for CSS, который позволит мне определить источник CSS для отладчика?
Добавьте sourceURL в тег встроенного стиля при его добавлении.
/*@ sourceURL=mystyles.css */
Это даст тегу inline style временное имя, которое будет использоваться внутри DevTools для навигации.
Он идентифицирует источник CSS. Он отображается только как localhost, потому что источник стиля находится из внутреннего javascript на вашей домашней странице localhost. если вы нажмете ссылку на местоположение правила, она все равно приведет вас к встроенному javascript, который динамически устанавливает ваш стиль.
Что касается исходной карты, попробовали ли вы расширить раздел "Вычисленный стиль", а затем расширили определенный стиль, с помощью которого вы хотите просмотреть иерархию наследования?