CSS не отображается на вкладке покрытия Google Chrome - PullRequest
Новая
       22

CSS не отображается на вкладке покрытия Google Chrome

1 голос
/ 06 июня 2019

Я хотел бы проанализировать количество неиспользуемых CSS на моей веб-странице. Эта веб-страница написана на Angular 7, а CSS добавляется в конфигурацию сборки angular.json.

Кажется, что это добавление CSS к заголовку HTML-файла; в инструментах разработчика я вижу несколько тегов стиля.

Я читал во многих местах, что для этого мне нужно использовать вкладку «Покрытие» инструментов разработчика в Google Chrome. Для меня это работает для JS, но не для CSS.

Вот скриншоты того, что я вижу:

enter image description here

Это все JS. Если я отфильтрую файлы, которые содержат css, он не даст результатов

enter image description here

Но я вижу, что файлы css были загружены здесь.

enter image description here

Как я могу проанализировать стили покрытия кода в заголовке документа?

Заголовок моего документа выглядит так:

enter image description here

enter image description here

p.s. Я использую Chrome версии 75.0.3770.80 (официальная сборка) (64-разрядная версия)

1 Ответ

0 голосов
/ 06 июня 2019

Таким образом, кажется, что весь ваш CSS является внутренним (они не обслуживаются из файла, а связаны в HTML).

Проведите небольшой тест: поместите содержимое CSS в один из <style> теги в файле .css (например, test.css) и включите эти файлы в <head> с <link rel="stylesheet" href="test.css">, и посмотрите, работают ли они, и отображаются в зоне покрытия.

(и удалитесоответствующий тег <style> из оригинала)

РЕДАКТИРОВАТЬ

Если вы не фильтруете по ключевому слову CSS, вы увидите, что есть одна строка свведите CSS+JS или JS, которые НЕ отображаются при фильтрации по ключевому слову CSS.

Поскольку все ваши стили связаны в HTML, они все сжимаются до этой строки!

Например:

CSS+JS in Coverage tab

Ваш адрес будет корневым URL-адресом приложения.

РЕДАКТИРОВАТЬ

https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW

Вы были правы в отношении динамического CSS, он просто не рассматривается на вкладке.Приведенная выше ссылка помещает тег <style> через javascript, и правила никогда не отображаются ни в одной строке вкладки покрытия.Хорошая работа:)

...