Google Chrome Dev Tools перевіряє стилі елементів, які не відображаються

Починаючи пару тижнів тому .... на деяких наших сайтах, але не на всіх, під час перевірки елемента на вкладці стилів відображається лише "вікно стилів", але не фактичні стилі, що стосуються css ?? - Знову ж таки, це ТІЛЬКИ на деяких сайтах - дивно

Це повинно виглядати так (зі стилями, показаними праворуч щодо css)

АЛЕ ...... замість цього, НА ДЕЯКИХ наших сайтах це тільки почалося пару тижнів тому, виглядаючи так ... без css на вкладці стилів:

ПРИМІТКА: вона працювала 2 роки - Сторінка виглядає нормально, і всі стилі застосовуються до DOM, але НЕ відображаються на вкладці стилі під час перевірки елемента.

Будь-які ідеї ??

Щойно у мене виникла та сама проблема, і для її вирішення я зайшов у Інструменти розробника Chrome -> Налаштування -> Прокрутіть униз і натисніть "Відновити за замовчуванням і перезавантажити", після чого все чарівно повернулось!

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

Я просто закриваю вкладку і відкриваю її знову, а потім клацніть правою кнопкою миші> перевірити елемент. Не потрібно відновлювати цілі інструменти розробника за замовчуванням. Це марнотратство. Спробуйте, це працює! :)

Мені довелося перейти, Chrome Developer Tools -> Settings -> Enable JavaScript source mapsа потім вимкнути цей прапорець. Це , ймовірно , отримав робити з sourcemaps і той факт , що я , що будують scssдо css.

щось, що працювало у мене: chrome: flags> Увімкнути експерименти інструментів розробника> Вимкнути. Я якось увімкнув його, використовував його роками без випуску, а потім не міг бачити жодних деталей стилю, як описано в OP. Після оновлення, скидання префайлів devtools за замовчуванням, навіть спроб інкогніто, це єдине, що, здавалося, знову змусило його працювати. Були кілька акуратних експериментів, але я волів би, щоб я міг робити свою роботу ...

Я також стикався з цією проблемою, на додаток до пропозицій інших користувачів, які працювали для мене:

Інструменти розробника Chrome -> CSS -> Відновити зв’язані таблиці стилів

Зображення Ілюструючи процедуру

У мене просто була така сама дивна проблема. Я не впевнений на 100%, що спричинило це, але ми використовуємо інструменти побудови, щоб вбудувати SCSS у CSS. Я зайшов у свій файл CSS і видалив посилання на вихідну карту -

/*# sourceMappingURL=myCSS.map */

І раптом це знову почало з’являтися. Потім я додав його назад і все ще бачу. Я не впевнений, чи це тому, що версія карти кешована зараз чи ні, але це спрацювало для мене.

Навіть я стикався з цим питанням !!!

Файл style.css викликав цю проблему ..

Я щойно створив новий файл css (Наприклад: style1.css) і вирізав встав старіший вміст файлу css (усі рядки в style.css) до файлу style1.css. Це працює

Примітка: Не забудьте оновити тег посилання, який завантажує файл css.

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

Це має бути так

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

Якщо ви пропускаєте rel = "таблицю стилів", браузер може вважати його звичайним файлом. Щоб підтвердити завантаження таблиць стилів, перейдіть до Chrome Inspector -> Джерела

Перевірте ресурси сайту

Не потрібно нічого скидати. Сподіваюся, це допоможе :)

Я використовую Dreamweaver та Breckets. Я бачив, що проблема виникла лише тоді, коли я використовував Dreamweaver. Вирішив проблему, змінивши уподобання Dreamweaver

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

Ще один для міксу - використання змінних CSS, але одна зі змінних посилалася на іншу змінну, яка не існувала.

Елементи, що використовують цю відсутню змінну в ланцюжку, просто взагалі не відображаються в хромі (він приховував усі посилання на h2s у випадку мого сайту).

Цікаво, що він все ще відображає елементи панелі інструментів розробника Firefox.

Шукайте помилки у файлі CSS, у моєму випадку це було на глобальних змінних CSS, виправлення помилок вирішило проблему.

Цей інструмент може допомогти вам знайти помилки: https://jigsaw.w3.org/css-validator/

Я думаю, це може бути корисним .. Якщо це кутовий проект> тоді просто запустіть

ng serve --extract-css.