Computed: найти итоговое значение CSS
Вкладка Computed показывает вычисленные стили выбранного элемента и помогает отделить написанное правило от фактического результата каскада.
Назначение
Вкладка Computed показывает вычисленные стили выбранного элемента и помогает отделить написанное правило от фактического результата каскада.
Как это работает
Панель Styles показывает совпавшие объявления и переопределения, а Computed — итоговые значения в соответствующем представлении DevTools. Для анализа размера также полезна схема box model.
Пример
.message { color: #11694e; }
.message { color: #703b12; }Что должно получиться
При одинаковых остальных условиях второе объявление задаёт итоговый цвет. Изменения в DevTools временные: чтобы сохранить исправление, его нужно перенести в исходник.
Граница применения и частая ошибка
Не редактируйте случайный селектор, увидев похожее название. Сначала выберите именно проблемный элемент и проверьте состояние hover, media-условия, наследование и перечёркнутые правила.
Самостоятельная проверка
Задайте цвет через класс, затем переопределите его более поздним правилом. Найдите победившее объявление и выключите его временно в DevTools, не изменяя исходный файл.