Есть ли способ получить вычисленные показатели псевдоэлементов в веб-инспекторе Safari?

В основном я использую инструменты разработчика Chrome для отладки html/css/js, но теперь мне нужно было отладить различный рендеринг псевдоэлемента в Chrome и Safari.

Я не смог найти способ получить вычисленные метрики (или любые вычисленные свойства css) псевдоэлемента :before в Safari.

Изображения для лучшего объяснения:

Chrome: :before псевдоэлемент отображается как элемент в инспекторе ChromeSafari: Нет псевдоэлементов, и я не вижу возможности их показать

Я что-то упускаю? Вариант, переключиться..?


html css safari pseudo-element web-inspector
person Radomír Laučík    schedule 19.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не можете просматривать псевдотег непосредственно в окне проверки DOM, но вы можете просматривать псевдостили в окне инспектора стилей в правом столбце.

Вот пример из одного из моих приложений. Извините, что не вставил изображение прямо в ответ; Очевидно, мне нужно 10 очков репутации для публикации изображений:

https://www.dropbox.com/s/kf6i85d9kvarxzs/safari_screenshot.jpg?dl=0

person Alex    schedule 19.06.2015
comment
Спасибо, но это не отвечает на мой вопрос: как получить вычисленные показатели этого элемента. Например, если я использую width: inherit или left: 10%, я хотел бы увидеть, каковы точные вычисленные метрики (чтобы убедиться, что псевдоэлемент наследует свойство от элемента, который я хочу, или если он относительно расположен так, как я хочу). - person Radomír Laučík; 22.06.2015

arrow_upward
1
arrow_downward

Согласно журналу изменений, эта проблема была решена в Safari 9.1.

Псевдоэлементы HTML теперь видны в дереве DOM, что упрощает стилизацию. Элемент ::before выделен на рисунке 1.

Снимок экрана веб-инспектора Safari 9.1

Источник: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html

person Radomír Laučík    schedule 13.01.2016