«Inspect Element» - это инструмент разработчика в браузере Firefox, который можно использовать для отслеживания HTML-кода на любой веб-странице. Таблицы стилей HTML и CSS веб-страницы можно редактировать с помощью «Проверить элемент». Вы можете попробовать отредактировать страницу, как вам нравится, и вернуть ее в прежнее состояние, просто перезагрузив отредактированную веб-страницу.
Шаг
Часть 1 из 2: Проверка элементов
Шаг 1. Обновите Firefox (необязательно)
Возможно, вы не сможете получить доступ к функциям, обсуждаемым в этой статье, если вы используете более старую версию Firefox. Обновление будет установлено автоматически, когда вы проверите, какую версию Firefox вы используете.
Firefox 9 и более ранние версии вообще не имеют инструмента «Проверить элемент»
Шаг 2. Щелкните правой кнопкой мыши любой элемент веб-страницы
Вы можете щелкнуть правой кнопкой мыши любое изображение, текст, фон или элемент. Если ваша мышь имеет только одну кнопку, сочетание щелчка левой кнопкой мыши и клавиши Control приведет к щелчку правой кнопкой мыши.
Шаг 3. В раскрывающемся меню нажмите «Проверить элемент»
Внизу окна появится панель инструментов. Панель под панелью инструментов также появится и отобразит HTML-код на активной странице.
Шаг 4. Ознакомьтесь с существующими панелями инструментов и панелями
Когда вы используете «Проверить элемент», под окном браузера откроется несколько панелей. Ниже описаны названия и функции панелей инструментов и панелей в «Проверить элемент»:
- В верхнем ряду находится панель инструментов Toolbox. Здесь можно найти несколько инструментов, но мы сосредоточимся на кнопке Inspector слева. Убедитесь, что эта кнопка активна (обозначена цветом кнопки, которая становится синей, когда она активна) на протяжении всего руководства.
- Ниже находится строка хлебных крошек HTML-элементов, которые указывают местоположение текущего выбранного элемента.
- Панель под подсказками навигации показывает дерево HTML или «представление разметки» веб-страницы. HTML-код выбранного элемента будет отмечен и центрирован на этой панели.
- На панели справа отображается таблица стилей CSS текущей веб-страницы.
Шаг 5. Выберите другой элемент
Когда панель инструментов открыта, вы можете легко выбирать другие элементы. Сделать это можно тремя способами:
- Наведите указатель мыши на строку HTML, чтобы отметить выбранный элемент (для этой функции требуется Firefox 34+). Щелкните HTML-код, чтобы выбрать этот элемент.
- Щелкните инструмент «Выбрать элемент» в левом углу панели инструментов: над полем у него есть значок в виде курсора. Переместите курсор на веб-страницу, чтобы отметить элемент, и щелкните, чтобы выбрать его.
Шаг 6. Отследите HTML-код
Щелкните в любом месте панели HTML. Для перехода от кода к коду используйте клавиши со стрелками влево и вправо на клавиатуре (для этой функции требуется Firefox 39+). Этот метод полезен для выбора элементов, которые слишком малы для выбора курсором.
- HTML-код, выделенный серым цветом, указывает на элементы, которые не отображаются на странице. Элементы, включенные в это, являются комментариями, такими как узлы и другие элементы, скрытые свойством отображения CSS.
- Щелкните стрелку слева от поля, чтобы показать или скрыть содержимое. Чтобы отобразить все содержимое, нажмите и удерживайте alt="Image" или option, щелкая стрелку.
Шаг 7. Найдите элемент
Найдите поле поиска (значок в форме петли) в дальнем правом углу строки панировочных сухарей. Щелкните, чтобы развернуть поле поиска, и введите HTML-код, который хотите найти. По мере ввода будет отображаться всплывающее окно с соответствующими результатами поиска. Щелкните элемент в результатах поиска и прокрутите панель HTML до кода, который вы ищете.
Часть 2 из 2: Редактирование HTML
Шаг 1. Обновите страницу, чтобы начать заново
Если вы новичок в инструментах разработки веб-сайтов, имейте в виду, что вы не вносите постоянных изменений в редактируемые страницы. Ваши правки отображаются на экране только до тех пор, пока вы не перезагрузите или не закроете страницу. Не стесняйтесь экспериментировать, даже если вы не знаете, что произойдет.
Шаг 2. Дважды щелкните HTML-код для редактирования
Дважды щелкните встроенный HTML. Введите новый текст и нажмите Enter, чтобы сохранить изменения.
Шаг 3. Щелкните и удерживайте инструмент в навигационной цепочке, чтобы открыть дополнительные параметры
Обратите внимание, что панель инструментов навигации находится между деревом HTML и панелью инструментов над ним. Щелкните и удерживайте инструмент в этой строке, чтобы открыть другие меню. Ниже приведены некоторые доступные варианты (не исчерпывающие):
- «Редактировать как HTML» позволяет редактировать все содержимое HTML из дерева HTML напрямую, а не редактировать каждую строку.
- «Копировать внутренний HTML» копирует все содержимое внутри узла, а «Копировать внешний HTML» копирует содержимое и узлы (например, или
- «Вставить →» вызывает несколько вариантов того, куда вставить копию, например, перед узлом или после первого дочернего узла.
- : hover,: active и: focus изменяют внешний вид элемента при взаимодействии пользователя. Измененные эффекты определяются из таблицы стилей CSS (редактируется на панели справа).
Шаг 4. Перетащите
Чтобы изменить порядок элементов в коде, щелкните и удерживайте HTML, пока не появится пунктирная линия. Переместите линию вверх и вниз по дереву и отпустите кнопку мыши, когда линия окажется там, где вы хотите.
Для этой функции требуется Firefox 39 и новее
Шаг 5. Закройте панель инструментов разработчика
Чтобы закрыть все окно «Проверить элемент», нажмите кнопку «X» в правом верхнем углу панели инструментов, расположенной над панелью CSS.
подсказки
- Вы также можете открыть панель инструментов из опций меню в верхней части окна:
- Windows: Firefox → Веб-разработчик → Переключить инструменты.
- Mac или Linux: Инструменты → Веб-разработчик → Переключить инструменты.
- В Firefox 40 есть возможность скрыть панель CSS, чтобы у вас было больше места для редактирования HTML. Найдите значок стрелки в дальнем правом углу строки хлебных крошек и справа от поля поиска. Щелкните этот значок, чтобы скрыть панель CSS, и щелкните еще раз, чтобы открыть ее.
- Вы также можете редактировать панели CSS, но они не перечислены в этой статье. Вы можете найти инструкции по редактированию кода CSS в Интернете.
