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

92

Я создал несколько довольно сложных элементов DOM с псевдоэлементом: after, и я хотел бы иметь возможность проверять и настраивать их в Chrome Inspector, Firebug или аналогичном.

Несмотря на то, что эта функция упоминается в этом сообщении блога WebKit / Safari (датированном 2010 годом), я не могу найти эту функцию ни в Chrome, ни в Safari. В Chrome есть по крайней мере флажки для проверки состояний: hover,: visit и: active, но: before и: after нигде не видно.

Кроме того, в этом сообщении блога (датированном 2009 годом!) Упоминается, что эта возможность существует в инструментах разработки IE, но в настоящее время я использую Mac OS, поэтому мне это не помогает. Кроме того, IE не является браузером, на который я в первую очередь нацелен.

Есть ли способ проверить эти псевдоэлементы?

РЕДАКТИРОВАТЬ: помимо того, что Firebug не может проверить эти элементы, я обнаружил, что Opera довольно хорошо справляется с проверкой: до и: после элементов из коробки.

css firefox google-chrome firebug google-chrome-devtools Majackson
источник
1
с помощью firebug вы можете проверить стиль этих псевдоэлементов.
Фабрицио Кальдеран
@ F.Calderan как? Обновляет ли он страницу, если я их изменяю?
majackson
да, я могу изменить свойства псевдоэлементов через firebug 1.9.1 на Fx11 / MacOS
Фабрицио Кальдеран
Ах да, я тоже это вижу. Приносим извинения, я ошибочно принял новые встроенные инструменты разработчика Firefox (которые я раньше не использовал) за какую-то переработку Firebug с необъяснимо меньшим количеством функций. Стою
исправлюсь
Отметьте этот ответ, чтобы проверить псевдоэлементы в Chrome и firefox stackoverflow.com/a/20716179/1868660
Subodh Ghulaxe

Ответы:

62

В инструментах разработчика Chrome стили псевдоэлемента видны на панели:

В противном случае вы также можете ввести следующую строку в консоль JavaScript и проверить возвращенный CSSStyleDeclarationобъект:

getComputedStyle(document.querySelector('html > body'), ':before');
Роб В
источник
9
Я этого не вижу. Какой элемент вы проверяете, чтобы увидеть, как он отображается на панели? Кроме того, какую версию Chrome вы используете?
majackson
@majackson Chrome 18.0 Ubuntu 11.10. Ознакомьтесь с xэтой демонстрацией: jsfiddle.net/2M6JA
Роб В.
Я вижу псевдоклассы в вашей демонстрации, но не в моем коде, что заставляет меня подозревать, что у меня другая проблема. В любом случае очевидно, что вы правы, поэтому я отмечу это как решенное - большое спасибо!
majackson
Это похоже на то, что псевдостили: в некоторых случаях невозможно проверить. Взгляните на эту вилку скрипки @Rob W. jsfiddle.net/RQsY6 => псевдоэлемент тега a не может быть проверен.
Fabien Quatravaux
1
@FabienQuatravaux По крайней мере , в Chrome 23, я вижу , div::beforeс content: 'x';- скриншоте: i.stack.imgur.com/nQ2TZ.png . РЕДАКТИРОВАТЬ: Наши скрипки ничем не отличаются. Вы хотели заменить divна a? Тем не менее, псевдоэлемент все еще можно проверить: jsfiddle.net/RQsY6/1 (просто выберите тег привязки в дереве DOM).
Rob W
33

В Chrome 31 псевдоэлементы отображаются на панели элементов как дочерние элементы своих родительских элементов, как показано на следующем изображении:

Снимок экрана

Вы можете выбрать их, как обычный элемент, но если вы удалите contentстиль, псевдоэлемент также будет удален, а фокус инструментов разработки изменится на его родительский.

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

АМК
источник
22

Chrome не будет показывать псевдоэлементы: before и: after в DOM-дереве, если они пропустили атрибут content. Он должен быть установлен, даже если он не установлен.

Это не будет отображаться:

:after {
  background-color: red;
}

Это отобразится в инспекторе:

:after {
  content: "";   
  background-color: red;    
}

Надеюсь, это поможет.

поп
источник
5

После того, как много разочарований, я понял, что светлячок не показывает элементы псевдо в дереве документа на всех , но если вы выбираете точное элемент , который имеет псевдо элемент (ы) определены, то стили для его псевдо элемента (ов ) показаны в разделе правил стиля с правой стороны. Это верно как для firebug, так и для встроенной инспекции («Q»), и я шокирован тем, что раньше никто не удосужился четко объяснить это.

Очевидно, что обработка псевдоэлементов chrome / chromium значительно превосходит их, поскольку они могут быть выбраны (как в дереве документа, так и непосредственно на странице) и проверены так же, как обычные элементы, с макетом, свойствами и всем остальным, независимо от их "владельца". ".

Версии браузера, которые я использую сейчас: Chromium 40.0.2214.91, Firefox 31.3.0.

Адицу уйти, потому что SE - это ЗЛО
источник
1

В Firefox уже некоторое время есть эта функция, просто щелкните правой кнопкой мыши, «проверьте элемент» и посмотрите элементы до и после на правой панели инспектора.

Нет ошибок
источник
1
Я не вижу псевдоэлементов :afterи :beforeв «родном» инструменте инспектора - переключение псевдоэлементов дает мне hover, activeи focusтолько. Хотя я вижу их в Firebug.
Самиерс
@sameers Вы говорите о переключателях в контекстном меню? Потому что: before и: after - это не то, что вы там переключаете, они всегда должны отображаться в инспекторе css.
NoBugs
0

Выберите элемент -> выберите при наведении флажка ---> вы можете увидеть :: до и после элементов Выберите элемент -> выберите при наведении флажка ---> вы можете увидеть :: до и после элементов

васу
источник
0

По крайней мере, с Chrome 62 в DevTools есть параметр «Показывать теневую DOM пользовательского агента», который отображает дополнительные псевдоэлементы, такие как заполнители ввода. , которые в противном случае не отображались бы в дереве DOM.

Дополнительная информация: https://stackoverflow.com/a/26853319/3963594

Jgangso
источник