Как использовать элемент проверки в Mozilla Firefox.

Инструмент разработчика Inspect Element в Firefox позволяет вам точно определить HTML-код всего, что вы видите на своей веб-странице. HTML и сопутствующая таблица стилей CSS полностью доступны для редактирования после открытия этих инструментов. Поэкспериментируйте с любыми изменениями, которые вам нравятся, затем обновите страницу, чтобы вернуться к предполагаемому виду веб-страницы.

Шаги

Часть 1

Проверка элементов

1. 

   Щелкните правой кнопкой мыши любой элемент веб-страницы. Вы можете щелкнуть правой кнопкой мыши изображения, текст, фон или любой другой элемент. Если у вас нет двухкнопочной мыши, щелкните левой кнопкой мыши, удерживая Control.

2. 

   Нажмите «Проверить элемент» в раскрывающемся меню. В нижней части окна должна появиться панель инструментов. Под панелью инструментов также появится панель, отображающая HTML-код страницы.

3. 

   Определите панели инструментов и панели. Когда вы нажмете «Проверить элемент», в нижней части окна откроется несколько панелей. Вот разбивка их использования и названий:
   • Верхний ряд — это панель инструментов Toolbox. Здесь есть несколько инструментов разработчика, но нас интересует Инспектор слева. Оставьте этот параметр выбранным (выделенным синим цветом) на протяжении всего руководства.
   • Под панелью инструментов находится единственная строка элементов HTML «Хлебные крошки», показывающая полный путь, относящийся к выбранному элементу.
   • Панель под этой строкой показывает дерево HTML или «представление разметки» страницы. HTML-код выбранного вами элемента выделен и центрирован на этой панели.
   • На панели справа отображается таблица стилей CSS для этой страницы.

4. 

   Выберите другой элемент. Когда панель инструментов открыта, выбрать другой элемент легко. Вот три способа сделать это:
   • Наведите указатель мыши на строку HTML, чтобы выделить соответствующий элемент (требуется Firefox 34+). Щелкните HTML-код, чтобы выбрать этот элемент.
   • Нажмите инструмент «Выбрать элемент» в крайнем левом углу панели инструментов: значок представляет собой курсор над квадратом. Наведите курсор на страницу, чтобы выделить элементы, затем щелкните, чтобы выбрать элемент.

5. 

   Перемещайтесь по коду. Щелкните в любом месте панели HTML. Используйте стрелки влево и вправо на клавиатуре для перемещения по коду (требуется Firefox 39+). Это полезно для элементов, слишком маленьких для выбора вручную.
   • Серый HTML относится к элементам, не отображаемым на странице. Сюда входят комментарии, определенные узлы, такие как , и элементы, которые были скрыты с помощью свойства отображения CSS.
   • Нажмите стрелку слева от контейнера, чтобы развернуть или скрыть его содержимое. Чтобы развернуть все содержимое, удерживайте Alt или опцию при нажатии.

6. 

   Найдите элемент. Найдите панель поиска (значок лупы) в правом углу строки «Хлебные крошки». Нажмите на него, чтобы развернуть его, затем введите HTML-код, который вы ищете. По мере ввода появится всплывающее окно со списком соответствующих элементов. Нажмите на один из них, чтобы выбрать этот элемент, и прокрутите панель HTML до его кода.

Часть 2

Редактирование HTML

1. 

   Обновите страницу, чтобы начать заново в любое время. Если вы новичок в инструментах веб-разработчика, поймите, что они не вносят никаких необратимых изменений. Ваши изменения будут видны только на вашем экране и только до тех пор, пока вы не закроете страницу или не обновите ее. Не стесняйтесь экспериментировать, даже если вы не уверены, что получится.

2. 

   Дважды щелкните HTML-код, чтобы отредактировать текст. Дважды щелкните строку HTML. Введите новый текст и нажмите Enter, чтобы сохранить изменения.

3. 

   Нажмите и удерживайте навигационную цепочку, чтобы увидеть дополнительные параметры. Помните, что панель инструментов «Навигационная цепочка» находится между полным деревом HTML и верхней панелью инструментов. Нажмите и удерживайте любой из элементов в этом ряду, чтобы открыть обширное меню. Вот неполное руководство по этим опциям:
   • «Редактировать как HTML» позволяет редактировать узел и все его содержимое в дереве HTML вместо необходимости редактировать каждую строку по отдельности.
   • «Копировать внутренний HTML» копирует все содержимое узла, а «Копировать внешний HTML» также копирует узел (например, или
   • «Вставить →» открывает несколько вариантов вставки, например, перед этим узлом или после первого дочернего узла.
   • :hover, :active и :focus изменяют внешний вид элемента, когда пользователь взаимодействует с ним. Точный эффект определяется таблицей стилей CSS (редактируемой на правой панели).

   • 

     Перетащите. Чтобы изменить порядок элементов в коде, щелкните и удерживайте HTML-код, пока не появится пунктирная линия. Переместите его вверх или вниз по дереву и отпустите, когда пунктирная линия окажется в нужном месте.
     • Для этого требуется Firefox 39 или новее.

   • 

     Закройте панель инструментов разработчика. Чтобы закрыть все эти причудливые окна, просто нажмите X в дальнем правом углу панели инструментов, над панелью CSS.