MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.

Она охватывает три основных компонента интерфейса Инспектора:

  • кнопка выбора элемента
  • панель HTML
  • панель CSS

Это руководство нарочно как можно более короткое.  В нём ссылки на другие руководства, с подробностями об использовании Инспектора.

Кнопка выбора элемента

Инспектор даёт вам подробную информацию о выбранном сейчас элементе.  Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:

Заметьте: она на главной панели инструментов веб-разработчика, так что быстро доступна из любого инструмента, не только Инспектора.

Чтобы научиться выбирать элемент, см. руководство по выбору элемента.

Панель HTML

Инспектор разделён на две половины.  Левую половину занимает панель HTML:

Чтобы узнать больше о структуре панели HTML, см. руководство по исследованию и редактированию.

Панель CSS

Правую сторону Инспектора занимает панель CSS:

Панель CSS имеет 5 режимов для просмотра различных данных:

  • Правила
  • Вычислено
  • Шрифты
  • Блоковая модель
  • Анимации

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

Просмотр правил

Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:

Вкладка Правила Инспектора Nightly 2015-04-26

См. подробности в Исследование и редактирование CSS.

Просмотр вычисленного

Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.

Вкладка Вычислено Инспектора Nightly 2015-04-26

См. подробности в Исследование и редактирование CSS.

Просмотр шрифтов

Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (которые до Firefox 36 можно было редактировать).

Вкладка Шрифты Инспектора Nightly 2015-04-26

См. подробности в Просмотр шрифтов.

Вкладка «Блоковая модель»

Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.

Вкладка Блоковая модель Инспектора Nightly 2015-04-26

См. подробности в Examine and edit the box model.

Вкладка «Анимации»

Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:

 

См. подробности в Work with animations.

Метки документа и участники

 Внесли вклад в эту страницу: AnkaChurkina, Vatheslav, savkin.ser40, Aleksej
 Обновлялась последний раз: AnkaChurkina,