Новости
- Навігація по HTML-коду
- Навігаційна ланцюжок для HTML-коду
- поле пошуку
- дерево HTML
- :: before і :: after
- Контекстне меню елемента
- Копіювання і вставка
- перетягування
Дослідити і редагувати 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 . Вставити / Перед Вставити вміст буфера в документ прямо перед цим вузлом. Вставити / Після Вставити вміст буфера в документ прямо після цього вузла. Вставити / Як першого нащадка Вставити вміст буфера в документ в якості першого дочірнього елемента цього вузла. Вставити / Як останнього нащадка Вставити вміст буфера в документ в якості останнього дочірнього елемента цього вузла. Прокрутити в вид Прокручує веб-сторінку, щоб було видно обраний вузол. Видалити вузол Видалити елемент Відкрити посилання в новій вкладці (тільки в меню, відкритому для посилання, наприклад атрибута href) Відкриває в новій вкладці то, на що посилання. Відкрити файл в відладчик (тільки в меню, відкритому для посилання на код JS) Відкриває в отладчике файл, на який посилання. Відкрити файл в редакторі стилів (тільки в меню, відкритому для посилання на CSS) Відкриває код, на який посилання, в редакторі стилів. Копіювати адресу посилання (тільки в меню для URL) Скопіювати URL. : Hover Встановити CSS'ний псевдо-клас CSS : hover : Active Встановити CSS'ний псевдо-клас : active : Focus Встановити CSS'ний псевдо-клас : focus
Ви можете редагувати HTML - теги, атрибути і вміст - прямо в панелі HTML: зробіть подвійне клацання по тексту, який Ви хочете змінити, змініть його, натисніть Enter, - і зміни відразу ж будуть застосовані.
щоб редагувати outerHTML елемента, відкрийте контекстне меню елемента і виберіть «Правити як HTML». Ви побачите в панелі HTML поле для редагування тексту:
Ви можете додавати тут будь-який HTML: змінювати тег елемента, редагувати існуючі елементи, додавати нові. Як тільки ви клацніть поза полем редагування, зміни будуть застосовані до сторінки.
Копіювання і вставка
використовуючи контекстне меню , Можна копіювати вузли в дереві HTML і потім вставляти їх.
перетягування
Нове в Firefox 39.
З версії Firefox 39 можна редагувати HTML перетягуванням вузлів в дереві HTML. Просто натисніть і утримуйте кнопку миші на якому-небудь елементі, і перетягніть його вгору або вниз по дереву. Коли ви відпустите кнопку, елемент буде вставлений у відповідному місці: