MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Исследование и редактирование HTML

Исследовать и редактировать HTML-код страницы можно в панели HTML.

Навигация по HTML-коду

Вверху панели HTML находится панель инструментов, состоящая из навигационной цепочки и поля поиска.

Навигационная цепочка для HTML-кода

Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:

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

С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.

Поле поиска

Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидете подсказку с результатами поиска.

Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.

Можно искать тег, или ввести любую другую строку селекторов CSS, так что можно найти элемент с ID myId, введя строку #myId.

Начиная с Firefox 40, можно искать по атрибутам class или id без учёта формата селекторов CSS, так что для поиска соответствующего элемента достаточно ввести просто myId.

Дерево HTML

Остальная часть панели показывает HTML-код страницы в виде дерева.  Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел.  Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.

Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.

Узлы, скрытые с помощью display:none, показываются бледнее (как и совсем не отображаемые узлы, например <head>).

::before и ::after

Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью ::before и ::after:

Контекстное меню элемента

Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:

Меню содержит следующие пункты:

Править как HTML HTML-код элемента
Копировать внутренний HTML Скопировать innerHTML элемента
Копировать внешний HTML Скопировать outerHTML элемента
Копировать уникальный селектор Скопировать CSS-селектор, выбирающий этот и только этот элемент.
Копировать URL данных изображения Скопировать изображение в формате data:// URL, если выбранный элемент изображение.
Показать свойства DOM Открыть split console и ввести туда команду «inspect($0)», чтобы исследовать текущий выбранный элемент.
Вставить внутренний HTML Вставить содержимое буфера в узел в качестве его innerHTML.
Вставить внешний HTML Вставить содержимое буфера в узел в качестве его outerHTML.
Вставить/Перед Вставить содержимое буфера в документ прямо перед этим узлом.
Вставить/После Вставить содержимое буфера в документ прямо после этого узла.
Вставить/Как первого потомка Вставить содержимое буфера в документ в качестве первого дочернего элемента этого узла.
Вставить/Как последнего потомка Вставить содержимое буфера в документ в качестве последнего дочернего элемента этого узла.
Прокрутить в вид

Новое в Firefox 40

Прокручивает веб-страницу, чтобы был виден выбранный узел.
Удалить узел Удалить элемент
Открыть ссылку в новой вкладке

Новое в Firefox 40

(только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.
Открыть файл в Отладчике

Новое в Firefox 40

(только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.
Открыть файл в Редакторе стилей

Новое в Firefox 40

(только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.
Копировать адрес ссылки

Новое в Firefox 40

(только в меню для URL) Скопировать URL.
:hover Установить CSS’ный псевдо-класс CSS :hover
:active Установить CSS’ный псевдо-класс :active
:focus Установить CSS’ный псевдо-класс :focus

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

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

Чтобы редактировать outerHTML элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:

скриншот Nightly 2015-04-26Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.

Копирование и вставка

Используя контекстное меню, можно копировать узлы в дереве HTML и потом вставлять их.

Перетаскивание

Новое в Firefox 39.

С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:

Метки документа и участники

 Внесли вклад в эту страницу: Aleksej, trevorh
 Обновлялась последний раз: Aleksej,