Функция «Исследовать элемент» в Firefox позволит вам просмотреть HTML код веб-страницы. Активировав эту функцию, вы сможете изменить HTML и CSS. Поэкспериментируйте, внося любые изменения, а затем просто обновите страницу, чтобы вернуться к ее первоначальному виду.
Исследование элементов
Шаг 1. Обновите Firefox (если хотите).
Обновите Firefox (если хотите). Вы не сможете активировать все функции, описываемые в данной статье, если работаете со старой версией Firefox. Определите вашу версию этого браузера, чтобы запустить его автоматическое обновление.
- В Firefox 9 и более ранних версиях функции «Исследовать элемент» вообще нет.
Шаг 2. Щелкните правой кнопкой мыши по любому элементу веб-страницы, например, по изображению, тексту, фону или другому элементу.
Щелкните правой кнопкой мыши по любому элементу веб-страницы, например, по изображению, тексту, фону или другому элементу. Если у вас нет двухкнопочной мыши, зажмите Control и щелкните по элементу левой кнопкой мыши.
Шаг 3. В открывшемся меню выберите «Исследовать элемент».
В открывшемся меню выберите «Исследовать элемент». В нижней части окна отобразится панель инструментов, а под ней – подокно с HTML кодом страницы.
Шаг 4. Разберитесь с панелями инструментов и подокнами.
Разберитесь с панелями инструментов и подокнами. Выбрав «Исследовать элемент», в нижней части окна откроется несколько подокон. Вот их описание:
- Верхняя строка – это панель инструментов. Она включает несколько вкладок, но нас интересует самая первая (слева) вкладка «Инспектор» (окрашена синим цветом). Не переключайтесь на другие вкладки.
- Под панелью инструментов расположена строка с отладочными операторами.
- Ниже расположено подокно с HTML кодом страницы. HTML код выбранного вами элемента будет выделен (синим маркером) и расположен по центру этого подокна.
- В подокне справа вы найдете CSS этой страницы.
Шаг 5. Выберите другой элемент.
Выберите другой элемент. Открыв подокно функции «Исследовать элемент», вы можете запросто выбрать другой элемент одним из трех способов:
- Наведите указатель мыши на строку HTML кода, чтобы выделить соответствующий элемент (в Firefox 34+).[2] X Источник информации Щелкните по HTML коду, чтобы выбрать этот элемент.
- Щелкните по значку «Выбрать элемент со страницы». Этот значок расположен на панели инструментов слева и имеет вид квадрата с курсором. Наведите курсор на нужный элемент (в подокне с HTML кодом), а затем щелкните по элементу, чтобы выбрать его.
Шаг 6. Навигация по HTML коду.
Навигация по HTML коду. Щелкните по любой области в подокне с HTML кодом. Используйте клавиши со стрелками (на клавиатуре), чтобы перемещаться по коду (в Firefox 39+). Это полезно в том случае, если элемент довольно маленький.
- HTML код, представленный серым шрифтом, относится к элементам, которые не отображаются на странице. Например, комментарии, узлы (такие как <head>) и элементы, скрытые при помощи CSS.[4] X Источник информации
- Щелкните по стрелке слева от контейнера, чтобы развернуть или скрыть его содержимое. Чтобы развернуть все контейнеры, при щелчке по стрелке зажмите Alt или Option.[5] X Источник информации
Шаг 7. Найдите элемент.
Найдите элемент. На строке с отладочными операторами найдите значок в виде лупы (справа). Щелкните по этому значку, чтобы открыть строку поиска, и введите в ней HTML код, который вы ищете. По мере ввода откроется всплывающее окно с соответствующими элементами. Щелкните по нужному элементу и прокрутите HTML код, чтобы найти код этого элемента.
Редактирование HTML кода
Шаг 1. Обновите страницу, чтобы отменить все внесенные вами изменения.
Обновите страницу, чтобы отменить все внесенные вами изменения. Помните, что внесенные изменения будут отображаться только на экране, то есть они не являются постоянными. Закрыв или обновив страницу, она вернется к исходному виду. Поэтому не бойтесь экспериментировать, даже если вы не совсем представляете, к чему это приведет.
Шаг 2. Дважды щелкните по HTML коду, чтобы отредактировать его.
Дважды щелкните по HTML коду, чтобы отредактировать его. Введите новый код и нажмите Enter, чтобы сохранить изменения.
Шаг 3. Нажмите и удерживайте строку с отладочными операторами, чтобы получить доступ к дополнительным опциям.
Нажмите и удерживайте строку с отладочными операторами, чтобы получить доступ к дополнительным опциям. Эта строка расположена между панелью инструментов и подокном с HTML кодом. Вот неполный список дополнительных опций:
- «Править как HTML». Позволяет редактировать целый узел и все его содержимое, а не отдельные строки.
- «Копировать внутренний HTML». Копирует все содержимое узла, а опция «Копировать внешний HTML» копирует и узел (например, <div> или <body>).
- «Вставить». Откроются варианты вставки, например, перед узлом или после узла.
- «:hover», «:active», «:focus». Меняют внешний вид элемента. Точный эффект определяется CSS (редактируется в правом подокне).
Шаг 4. Перетаскивание.
Перетаскивание. Чтобы переставить элементы, нажмите и удерживайте HTML код до тех пор, пока не отобразится пунктирная линия. Переместите ее вверх или вниз и отпустите, когда линия достигнет нужного положения.
- Это работает только в FireFox 39+.[7] X Источник информации
Шаг 5. Закройте подокна функции «Исследовать элементы».
Закройте подокна функции «Исследовать элементы». Для этого просто нажмите на значок «X» (в правом дальнем углу панели инструментов).
