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