Инструменты Google Chrome Dev проверяют стили элементов, которые не отображаются

Начиная пару недель назад.... на некоторых наших сайтах, но не во всех, при проверке элемента вкладка стилей показывает только "поле стилей", но не фактические стили, относящиеся к css? - Опять же, это ТОЛЬКО на некоторых сайтах - странно

Он должен выглядеть так (со стилями, показывающими справа, относящимся к css)

НО...... вместо этого, на НЕКОТОРЫХ наших сайтах, это только началось пару недель назад, выглядя так... без css на вкладке стилей:

ПРИМЕЧАНИЕ: он работал в течение 2 лет. Страница выглядит отлично, и все стили применяются к DOM, но не отображаются на вкладке стилей при проверке элемента.

Любые идеи?

Ответ 1

У меня была одна и та же проблема, и для ее решения я вошел в Инструменты разработчика Chrome → Настройки → Прокрутите вниз и нажмите "Восстановить значения по умолчанию и перезагрузить" , после чего все это волшебным образом вернулось!

Я ничего не менял, когда работал, и когда он остановился, поэтому не уверен, почему он сломался, но, надеюсь, это тоже поможет.

Ответ 2

Я просто закрываю вкладку и снова открываю ее, а затем правой кнопкой мыши > проверяю элемент. Не нужно восстанавливать все инструменты разработчика по умолчанию. Это пустая трата. Попробуйте, это работает!:)

Ответ 3

Мне нужно было перейти в Chrome Developer Tools -> Settings -> Enable JavaScript source maps, а затем отключить этот флажок. Вероятно, это связано с исходными файлами и тем фактом, что я создаю scss до css.

Ответ 4

что-то, что сработало для меня: chrome: flags > Enable Developer Tools tests > Disable. Я включил его в какой-то момент, использовал его в течение многих лет без выпуска, а затем не мог видеть детали стиля, описанные OP. После обновления, сбросив prefs devtools по умолчанию, даже пытающийся инкогнито, это было единственное, что, казалось, заставило его снова работать. Были некоторые опрятные эксперименты, но я бы скорее смог выполнить свою работу...

Ответ 5

Даже я столкнулся с этой проблемой!!!

Файл style.css вызывал эту проблему.

Я только что создал новый файл css (Ex: style1.css) и вырезал вставку старого содержимого css файла (все строки в style.css) в файл style1.css. Он работает

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

Ответ 6

У меня была такая же странная проблема. Я не уверен на 100%, что вызвало это, но мы используем инструменты построения для создания SCSS в CSS. Я зашел в свой файл CSS и удалил ссылку на исходную карту -

/*# sourceMappingURL=myCSS.map */

И все это внезапно начало появляться снова. Затем я добавил его обратно, и я все еще вижу его. Я не уверен, что это потому, что сейчас карта кешируется или нет, но это сработало для меня.

Ответ 7

Я думаю, что ваши файлы CSS загружены неправильно. Просто проверьте синтаксис ссылки на внешние таблицы стилей.

Это должно быть как

<link rel="stylesheet" type="text/css" href="mystyle.css">

Если вы пропустите rel= "stylesheet", браузер может считать это простым файлом. Чтобы подтвердить загрузку таблиц стилей, выберите Инспектор Chrome → Источники

Проверить ресурсы сайта

Не нужно ничего перезагружать. Надеюсь, это поможет:)

Ответ 8

Мне также пришлось столкнуться с этой проблемой, в дополнение к предложениям, которые другие пользователи сделали для меня доступным:

Инструменты разработчика Chrome → CSS → Перетянуть связанные таблицы стилей

Изображение Иллюстрирование процедуры

Ответ 9

Я использую Dreamweaver и Breckets. Возможно, проблема возникла только тогда, когда я использовал Dreamweaver. Решена проблема, изменив настройки Dreamweaver.

- > Формат кода → Тип разрыва строки → CR LF (Windows)