Инструмент разработчика Inspect Element в Firefox позволяет вам точно определить HTML-код всего, что вы видите на своей веб-странице. HTML и сопутствующая таблица стилей CSS можно полностью редактировать, как только эти инструменты открыты. Поэкспериментируйте с любыми изменениями, которые вам нравятся, а затем обновите страницу, чтобы вернуться к желаемому виду веб-страницы.
Шаги
Часть 1 из 2: Проверка элементов
Шаг 1. Щелкните правой кнопкой мыши любой элемент веб-страницы
Вы можете щелкнуть правой кнопкой мыши изображение, текст, фон или любой другой элемент. Если у вас нет двухкнопочной мыши, щелкните левой кнопкой мыши, удерживая Control.
Шаг 2. Щелкните Проверить элемент в раскрывающемся меню
Внизу окна должна появиться панель инструментов. Под панелью инструментов также появится панель, отображающая HTML-код страницы.
Шаг 3. Найдите панели инструментов и панели
Когда вы нажмете «Проверить элемент», в нижней части окна откроется несколько панелей. Вот разбивка их использования и названий:
- Верхний ряд - это панель инструментов Toolbox. У него есть несколько инструментов разработчика, но нас интересует Инспектор слева. Оставьте это выделенным (выделено синим) на протяжении всего руководства.
- Под панелью инструментов находится одна строка элементов HTML Breadcrumbs, показывающая полный путь, относящийся к выбранному элементу.
- На панели под этой строкой отображается дерево HTML или «представление разметки» страницы. HTML-код выбранного элемента будет выделен и центрирован на этой панели.
- На панели справа отображается таблица стилей CSS для этой страницы.
Шаг 4. Выберите другой элемент
Когда панель инструментов открыта, выбрать другой элемент очень просто. Вот три способа сделать это:
- Наведите указатель мыши на строку HTML, чтобы выделить соответствующий элемент (требуется Firefox 34+). Щелкните HTML-код, чтобы выбрать этот элемент.
- Щелкните инструмент «Выбрать элемент» в крайнем левом углу панели инструментов: значок - это курсор над квадратом. Наведите курсор на страницу, чтобы выделить элементы, затем щелкните, чтобы выбрать элемент.
Шаг 5. Перейдите по коду
Щелкните в любом месте панели HTML. Используйте стрелки влево и вправо на клавиатуре для перемещения по коду (требуется Firefox 39+). Это полезно для элементов, слишком маленьких для выбора вручную.
- Серый HTML относится к элементам, не отображаемым на странице. Сюда входят комментарии, определенные узлы, такие как, и элементы, которые были скрыты с помощью свойства отображения CSS.
- Щелкните стрелку слева от контейнеров, чтобы развернуть или скрыть его содержимое. Чтобы развернуть все содержимое, удерживайте alt="Image" или опцию при щелчке.
Шаг 6. Найдите элемент
Найдите строку поиска (значок увеличительного стекла) справа от строки «Панировочные сухари». Щелкните здесь, чтобы развернуть, затем введите искомый HTML-код. По мере ввода появится всплывающее окно со списком подходящих элементов. Щелкните один из них, чтобы выбрать этот элемент, и прокрутите панель HTML до его кода.
Часть 2 из 2: Редактирование HTML
Шаг 1. Обновите страницу, чтобы начать все сначала
Если вы новичок в инструментах веб-разработчика, имейте в виду, что они не вносят никаких постоянных изменений. Ваши изменения будут видны только на вашем экране и только до тех пор, пока вы не закроете страницу или не обновите ее. Не бойтесь экспериментировать, даже если вы не уверены, что произойдет.
Шаг 2. Дважды щелкните HTML, чтобы отредактировать текст
Дважды щелкните строку HTML. Введите новый текст и нажмите клавишу ВВОД, чтобы сохранить изменения.
Шаг 3. Щелкните и удерживайте строку навигации, чтобы увидеть дополнительные параметры
Помните, что панель инструментов Breadcrumb зажата между полным деревом 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.
