Это руководство нарочно как можно более короткое. В нём ссылки на другие руководства, с подробностями об использовании Инспектора.Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.
Она охватывает три основных компонента интерфейса Инспектора:
Это руководство нарочно как можно более короткое. В нём ссылки на другие руководства, с подробностями об использовании Инспектора.
Инспектор даёт вам подробную информацию о выбранном сейчас элементе. Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:
Заметьте: она на главной панели инструментов веб-разработчика, так что быстро доступна из любого инструмента, не только Инспектора.
Чтобы научиться выбирать элемент, см. руководство по выбору элемента.
Инспектор разделён на две половины. Левую половину занимает панель HTML:
Чтобы узнать больше о структуре панели HTML, см. руководство по исследованию и редактированию.
Правую сторону Инспектора занимает панель CSS:
Панель CSS имеет 5 режимов для просмотра различных данных:
Переключаться между этими режимами можно с помощью вкладок наверху панели.
Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:
См. подробности в Исследование и редактирование CSS.
Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.
См. подробности в Исследование и редактирование CSS.
Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (которые до Firefox 36 можно было редактировать).
См. подробности в Просмотр шрифтов.
Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.
См. подробности в Examine and edit the box model.
Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:
См. подробности в Work with animations.