Как использовать функцию «Исследовать элемент» в Mozilla Firefox

Загрузить PDF
Загрузить PDF

Функция «Исследовать элемент» в Firefox позволит вам просмотреть HTML код веб-страницы. Активировав эту функцию, вы сможете изменить HTML и CSS. Поэкспериментируйте, внося любые изменения, а затем просто обновите страницу, чтобы вернуться к ее первоначальному виду.

Часть 1
Часть 1 из 2:

Исследование элементов

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Вы не сможете активировать все функции, описываемые в данной статье, если работаете со старой версией Firefox. Определите вашу версию этого браузера, чтобы запустить его автоматическое обновление.
    • В Firefox 9 и более ранних версиях функции «Исследовать элемент» вообще нет.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Щелкните правой кнопкой мыши по любому элементу веб-страницы, например, по изображению, тексту, фону или другому элементу. Если у вас нет двухкнопочной мыши, зажмите Control и щелкните по элементу левой кнопкой мыши.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    В нижней части окна отобразится панель инструментов, а под ней – подокно с HTML кодом страницы.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Выбрав «Исследовать элемент», в нижней части окна откроется несколько подокон. Вот их описание: [1]
    • Верхняя строка – это панель инструментов. Она включает несколько вкладок, но нас интересует самая первая (слева) вкладка «Инспектор» (окрашена синим цветом). Не переключайтесь на другие вкладки.
    • Под панелью инструментов расположена строка с отладочными операторами.
    • Ниже расположено подокно с HTML кодом страницы. HTML код выбранного вами элемента будет выделен (синим маркером) и расположен по центру этого подокна.
    • В подокне справа вы найдете CSS этой страницы.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Открыв подокно функции «Исследовать элемент», вы можете запросто выбрать другой элемент одним из трех способов:
    • Наведите указатель мыши на строку HTML кода, чтобы выделить соответствующий элемент (в Firefox 34+). [2] Щелкните по HTML коду, чтобы выбрать этот элемент.
    • Щелкните по значку «Выбрать элемент со страницы». Этот значок расположен на панели инструментов слева и имеет вид квадрата с курсором. Наведите курсор на нужный элемент (в подокне с HTML кодом), а затем щелкните по элементу, чтобы выбрать его.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Щелкните по любой области в подокне с HTML кодом. Используйте клавиши со стрелками (на клавиатуре), чтобы перемещаться по коду (в Firefox 39+). [3] Это полезно в том случае, если элемент довольно маленький.
    • HTML код, представленный серым шрифтом, относится к элементам, которые не отображаются на странице. Например, комментарии, узлы (такие как <head>) и элементы, скрытые при помощи CSS. [4]
    • Щелкните по стрелке слева от контейнера, чтобы развернуть или скрыть его содержимое. Чтобы развернуть все контейнеры, при щелчке по стрелке зажмите Alt или Option. [5]
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    На строке с отладочными операторами найдите значок в виде лупы (справа). Щелкните по этому значку, чтобы открыть строку поиска, и введите в ней HTML код, который вы ищете. По мере ввода откроется всплывающее окно с соответствующими элементами. Щелкните по нужному элементу и прокрутите HTML код, чтобы найти код этого элемента.
    Реклама
Часть 2
Часть 2 из 2:

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

Загрузить PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Помните, что внесенные изменения будут отображаться только на экране, то есть они не являются постоянными. Закрыв или обновив страницу, она вернется к исходному виду. Поэтому не бойтесь экспериментировать, даже если вы не совсем представляете, к чему это приведет.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Введите новый код и нажмите Enter, чтобы сохранить изменения.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Нажмите и удерживайте строку с отладочными операторами, чтобы получить доступ к дополнительным опциям. Эта строка расположена между панелью инструментов и подокном с HTML кодом. Вот неполный список дополнительных опций: [6]
    • «Править как HTML». Позволяет редактировать целый узел и все его содержимое, а не отдельные строки.
    • «Копировать внутренний HTML». Копирует все содержимое узла, а опция «Копировать внешний HTML» копирует и узел (например, <div> или <body>).
    • «Вставить». Откроются варианты вставки, например, перед узлом или после узла.
    • «:hover», «:active», «:focus». Меняют внешний вид элемента. Точный эффект определяется CSS (редактируется в правом подокне).
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Чтобы переставить элементы, нажмите и удерживайте HTML код до тех пор, пока не отобразится пунктирная линия. Переместите ее вверх или вниз и отпустите, когда линия достигнет нужного положения.
    • Это работает только в FireFox 39+. [7]
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Для этого просто нажмите на значок «X» (в правом дальнем углу панели инструментов).
    Реклама

Советы

  • Вы также можете открыть панель инструментов следующим образом: [8]

    • Windows. Нажмите «Firefox» – «Разработчик» – «Панель инструментов».
    • Mac OS или Linux. Нажмите «Инструменты» – «Разработчик» – «Панель инструментов».
  • В Firefox 40 вы можете скрыть подокно с CSS кодом, чтобы расширить подокно с HTML кодом. [9] Для этого на строке с отладочными операторами найдите значок в виде стрелки, направленной вправо (рядом с лупой). Щелкните по этому значку, чтобы скрыть подокно с CSS кодом; еще раз щелкните по значку, чтобы развернуть это подокно.
  • Вы также можете отредактировать CSS код, но это выходит за рамки данной статьи. Поэтому прочитайте эту статью .
Реклама

Дополнительные статьи

Как
обнаружить спрятанные камеры и микрофоны
Как
прикинуться хакером
Как
запустить программу из командной строки
Как
подключить контроллер PS4 к игровой приставке PS5
Как
использовать контроллер PS3 на компьютере
Как
сделать стилус
Как
подключить к компьютеру еще один жесткий диск
Как
найти потерянный пульт от телевизора
Как
создать электромагнитный импульс
Как
установить жесткий диск
Как
подключить HDMI к телевизору
Как
сделать FM антенну
Как
работать с программой "Cheat Engine"
Как
исправить застрявший пиксель на ЖК–мониторе
Реклама

Источники

  1. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour
  2. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  3. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
  4. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  5. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  6. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  7. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  8. ↑ https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  9. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour

Об этой статье

На других языках
Эту страницу просматривали 44 621 раз.

Была ли эта статья полезной?

Реклама