как открыть инспектор кода в фаерфокс
Исследование и редактирование HTML
Исследовать и редактировать HTML-код страницы можно в панели HTML.
Навигация по HTML-коду
Вверху панели HTML находится панель инструментов, состоящая из навигационной цепочки и поля поиска.
Навигационная цепочка для HTML-кода
Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:
Нажатие и удержание левой кнопки мыши на одном из элементов навигационной панели вызывает меню, позволяющее выбрать какой-либо из соседних элементов. Кнопки со стрелками на левом и правом концах панели цепочки прокручивают цепочку, если она длиннее доступного пространства.
С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.
Поле поиска
Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидите подсказку с результатами поиска.
Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.
Дерево HTML
Остальная часть панели показывает HTML-код страницы в виде дерева. Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел. Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.
Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.
Узлы, скрытые с помощью display:none, показываются бледнее (как и совсем не отображаемые узлы, например ).
::before и ::after
Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью ::before и ::after :
Контекстное меню элемента
Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:
Меню содержит следующие пункты:
Новое в Firefox 40
Прокручивает веб-страницу, чтобы был виден выбранный узел.
Новое в Firefox 40
(только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.
Новое в Firefox 40
(только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.
Новое в Firefox 40
(только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.
Новое в Firefox 40
(только в меню для URL) Скопировать URL.
Редактирование HTML
Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо в панели HTML: сделайте двойной щелчок по тексту, который вы хотите изменить, измените его, нажмите Enter, — и изменения сразу же будут применены.
Чтобы редактировать outerHTML (en-US) элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:
Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.
Копирование и вставка
Используя контекстное меню, можно копировать узлы в дереве HTML и потом вставлять их.
Перетаскивание
Новое в Firefox 39.
С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:
30 полезностей для Firefox Developer Tools
Ниже приведены фичи и советы по использованию Firefox Developer Tools. Некоторые из них аналогичны возможностям инструментов в Chrome, для некоторых аналоги в других браузерах отсутствуют.
Осторожно, под катом много тяжёлых гифок!
Инспектор
Поиск по CSS селектору
Очень удобно использовать для:
Фильтр стилей
Вы можете отфильтровать правила CSS по любому селектору или свойству.
Для селекторов фильтр выделит цветом селекторы в списке правил. Для свойств инструмент развернёт все свойства, содержащие ваш фильтр, выделит их цветом, а так же скроет правила, где свойств из фильтра не содержится.
Выбор цвета и «Пипетка»
Кликните по любой точке с цветом в инспекторе, чтобы открыть удобный инструмент.
Смена представлений цвета
Shift+клик на цветной точке позволяет менять представление цвета (имя/hex/hsl/rgb).
Shift+клик на точке рядом с углом позволяет менять единицы измерения угла.
Редактирование кривых Безье функций времени
Кликните на точке с искривлённой линией рядом со свойством функции времени, чтобы открыть удобный редактор. Там будут как предопределённые функции, так и возможность настроить свой вариант вручную.
Консоль
Применение CSS
Поддерживаются не все свойства, но весьма много.
Поиск по истории
Нажмите CTRL+R на Mac (и F9 на Windows и Linux). После чего используйте CTRL+R / CTRL+S (F9 / SHIFT+F9) для листания результатов вперёд / назад. В отличие от стрелочек, сочетания клавиш выше будут работать и между сессиями.
Скриншот страницы или её элемента
Гораздо удобнее просто указать селектор, чем пытаться точно выделить нужную область мышкой.
Переключение контекста JavaScript
Вы можете переключаться на контекст iframe по селектору, используя cd().
Метки в таймере
Запустить таймер — console.time(“метка”),
Дебагер JavaScript
Условные точки останова
Для создания точки надо сделать правый клик на номере строки. Точка будет активной только при выполнении условия.
Поиск по имени функции или номеру строки
Поиск по имени файла — CMD + P на Mac (и CTRL + P на Windows и Linux).
Напечатайте «@» в том же инпуте, чтобы искать по объявлению функции в файле.
Напечатайте «:» в том же инпуте, чтобы быстро добраться до строки по её номеру.
Красивый вывод минифицированного кода
Нажмите на иконку <>, чтобы посмотреть красивый код вместо минифицированного.
Точки останова для URL
Точка станет активной при попытке обратиться к урлу и покажет ответственный за обращение код.
Отключить точки останова
Отключённые точки останутся доступны для включения и использования в будущем.
Редактирование и пересылка HTTP запросов
Редактируйте отправленные запросы и оправляйте их заново.
Фильтр запросов
Фильтр по домену — CMD + F на Mac (или CTRL + F на Windows и Linux).
Если вам нужно найти все запросы, без домена, добавьте чёрточку (—) перед фильтром.
Ограничение скорости
Проверьте как сайт будет загружаться при медленном интернете.
Горячее/Холодное профилирование
Кликните по иконке с таймером, чтобы посмотреть производительность запросов, который делает сайт. Страница будет загружена дважды — без кэша (эмулируя первую загрузку) и с кэшом (эмулируя повторное обращение).
Сохранение/Загрузка HAR
Сохраняем совершённые запросы в архивный формат. Удобно, чтобы обмениваться с коллегами по разработке.
Отзывчивый дизайн
Кастомное устройство
Просматривайте, как будет выглядеть сайт для устройств с кастомным разрешением.
Ограничение скорости
Смотрим загрузку мобильной версии на мобильной скорости интернета.
Эмулирование тачей
За это отвечает маленькая иконка с «рукой». Эмулируются, в том числе долгие тапы.
Изменение User-Agent
Не забудьте включить в настройках пункт «Перезагружать страницу при смене UA» — сэкономите время.
Выравнивание вьюпорта по левому краю
Удобно, если хотите разместить панели справа (например, для дебага).
Инспектор хранилища
Редактирование Cookies
Сделайте двойной клик по ячейке, значение которой хотите поменять.
Удаление Cookies
Легче всего удалить куки, выделив их и нажав Backsapce.
Обратите внимание на опции контекстного меню. Очень удобной является опция «Удалить все для домена», но учтите, что домен должен быть точным (т.е. удаление кук для .medium.com не удалит их для medium.com)
Изменение Cookies в реальном времени
Оранжевым мигают куки, которые только что были изменены.
Статические снимки для IndexedDB
Увидеть изменения записей IndexedDB в реальном времени не получится, поэтому чтобы получить наиболее актуальный снимок БД, используйте кнопку «обновить».
Изменение отображаемых столбцов таблицы
Правый клик по заголовку таблицы поможет скрыть неинтересные столбцы.
На этом всё. Надеюсь, советы были вам полезны!
Подробно об Инструментах разработчика Firefox
В этом обзоре мы рассмотрим некоторые из замечательных инструментов разработчика, которые есть в браузере Firefox «из коробки», т.е. без установки дополнительных расширений.
Даже если Google Chrome является вашим основным браузером для разработки, в Firefox есть некоторые инструменты, которых нет в Chrome. Справедливо и обратное утверждение: в Chrome есть некоторые инструменты, которых нет у Firefox, но инструменты разработчика Firefox настолько полезны, что вы действительно выиграете, зная о них.
Для начинающих
Если вы когда-либо пользовались инспектором в любом браузере, все это будет вам знакомо. То же самое относится и к настройкам Режима адаптивного дизайна (Responsive Design Mode), которые позволяют вам просматривать веб-страницы для различных экранах благодаря имитации нужных областей просмотра.
Вы можете использовать ряд кнопок/выпадающих списков для выбора модели телефона/планшета, скорость загрузки и ориентацию экрана (портретная, альбомная).
Примечание: кстати, вы знали, что дополнить/уменьшить набор инструментов разработчика вы сможете, перейдя в настройки кликом по кнопке F1.
1. Инспекторы
Все инструменты браузера содержат несколько инспекторов: HTML-инспектор и CSS-инспектор, но в Firefox есть и другие. Один из таких примеров является довольно новым и дает нам возможность проверять переменные шрифты.
Инспектор шрифтов
При выделении конкретного элемента можно узнать настройки шрифта именно для него.
Flexbox-инспектор
Инструменты разработчика Firefox также включают в себя инспектор Flexbox, подсветку которого можно включать и выключать в нескольких местах. За счет клика на ‘flex’-кнопках, вы можете увидеть подсветку сетки flexbox-элементов.
Также можно посмотреть подробные свойства flexbox-элементов, переключившись на вкладку Разметка в Инспекторе. Можете посмотреть самостоятельно на примере разметки 2 колоночного flexbox-макета.
По каждому элементу также можно посмотреть данные, кликнув по стрелке вправо.
CSS Grid Inspector
Вы увидите, что инспектор помечает любые элементы, которые используют flexbox или Grid. Взгляните на этот пример, чтобы увидеть ее в действии. В разделе правил вы увидите значок сетки рядом с элементами, которые используют сетку, разумеется, если включены соответствующая настройка.
Нажав на кнопку «grid», вы можете включить на вкладке Разметка маркеры, показывающие строки и столбцы, разрывы сетки и номера строк, а также имена областей, если они предусмотрены в коде.
Инспектор доступности
Следующим инспектором, предлагаемым инструментами разработчика Firefox, является инспектор специальных возможностей. Chrome также имеет функции проверки доступности, но у Firefox они немного отличаются. Включите их, посетив вкладку «Поддержка доступности» (Shift + F12) в Инспекторе.
Для управления спецвозможностями нажмите на кнопку «Включить функции поддержки доступности»:
Mozilla рекомендует снова отключить их, как только вы закончите использовать их, поскольку они могут повлиять на производительность. Проверить страницу вы можете на соответствие контраста текста и правильности оформления текстовых полей.
В некоторых случаях имеет смысл это сделать, т.к. при изменении каких-то настроек или css-свойств вы можете не заметить, что текст заголовков слился с фоном, например. 
2. Инструменты разработчика
Давайте теперь посмотрим на некоторые инструменты для разработчиков.
Инструмент редактирования формы
Редактор CSS-фильтров
В Инструментах разработчика Mozilla Firefox также есть редактор CSS-фильтров! Как и во всех доступных инструментах, нажмите значок рядом с соответствующим свойством, чтобы вызвать редактор / инспектор. В этом случае редактор фильтров позволяет вам манипулировать CSS-фильтрами, добавлять больше, удалять ненужные фильтры и сохранять предустановки, когда они могут понадобиться снова.
Просмотрщик изображений
Визуализатор изменений свойств группы CSS Transform
Возможность визуализации CSS-преобразований делает их создание намного проще, чем их кодирование. Например, при наведении указателя мыши на преобразование rotate() Firefox покажет вам исходную начальную позицию элемента вместе с новой позицией.
Точки позиционирования
Удобные помощники
Здесь мы рассмотрим несколько полезных маленьких помощников, которые предлагает браузер Firefox.
Встроенная пипетка
Нажмите на этот значок на панели инспектора свойств, а затем щелкните в любом месте экрана, чтобы получить цвет блока и добавить его в буфер обмена.
Инструмент создания скриншотов
Дополнительные кнопки панели инструментов
Рядом с кнопкой снимка экрана можно добавить еще две иконки, если в настройках Инструментов разработчика (F1) вы установите еще 2 флажка:
Эти два полезных дополнения действительно полезны, если вы перфекционист!
Отображение обработчиков событий, записанных в JavaScript/jQuery
Введение в инспектор доступности в Firefox Developer Tools
Дата публикации: 2018-04-24
От автора: в семействе встроенного в Firefox Developer Tools пополнение. Инспектор доступности позволяет проверять сайт на работу с вспомогательными технологиями.
Введение
Как веб-разработчик, вы когда-нибудь думали, как ваш сайт выглядит на скрин ридерах для слепых? Вы не думали, почему получаете сообщения о том, что люди с ограниченными возможностями не могут пользоваться вашим веб-приложением? Или как слепой пользователь, была ли у вас ситуация, когда вы не понимали, почему скрин ридер не читает что-либо со страницы, которую вы посещали ранее? Или еще хуже, была ли у вас ситуация, когда вам выставлялись барьеры, и вы ничего не могли сделать на веб-странице?
Команда доступности рада представить новый инспектор доступности в Firefox Developer Tools. Он дополняет инструменты проверки, которые уже есть, и напрямую работает с движком доступности, который доставляет информацию на скрин ридеры и другие вспомогательные технологии. У инструмента несколько функций:
Позволяет инспектировать дерево иерархии объектов, которое было создано из информации с веб-страницы. Для каждого узла отдельное дерево дает все релевантную информацию, такую как role (что это?), name (что это делает?), states и другую информацию, которую используют вспомогательные технологии для создания подходящего представления для целевой аудитории.
Визуальная подсветка выделения внутри дерева – визуально показывает, на какой элемент ссылается этот объект.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Возможность прыгать от свойств объекта доступности прямо в инспектор HTML для проверки элемента, из которого был создан объект доступности.
Возможность прыгать от выбранного HTML элемента в инспектор HTML к соответствующему объекту доступности для проверки его свойств.
Элемент контекстного меню в главном браузере, позволяющий инспектировать доступность элемента. Это откроет инспектор доступности, где будет выбран соответствующий узел, и будут видны его свойства.
Как и скрин ридеры, инструмент доступен для мыши, клавиатуры и вспомогательных технологий.
Где скачать?
Полностью функциональный инспектор вышел 11 апреля 2018 в Firefox Nightly build и появится в Firefox 61 (бета в мае). Релиз в июне 2018. Можете скачать Nightly build на десктоп и попробовать или дождаться беты и dev edition в мае.
Как это работает?
Сперва включите
Сейчас инспектор нужно включить вручную, чтобы он появился в блоке с инструментами. Перейдите в Settings And Feedback menu button в Developer Toolbox, выберите Settings, с помощью Tab перейдите к чекбоксу Accessibility. Нажмите пробел для выделения. Это добавить инспектор в блок инструментов и включить соответствующие пункты контекстного меню.
Включите движок
Если вы используете скрин ридер или другие вспомогательные технологии в Firefox по умолчанию, то следующий шаг можно пропустить. Всем остальным необходимо включить движок.
Перейдите на панель Accessibility. Там есть кнопка, включающая доступность. Для проверки веб-страниц ее необходимо активировать.
Инспектируйте элементы
После включения загрузите любую страницу, кликните правой кнопкой мыши на элементе, чтобы проверить его доступность. В контекстном меню теперь есть пункт Inspect Accessibility.
Откроется инспектор доступности, где будет выделен узел, соответствующий выбранному элементу. Здесь можно просмотреть или прослушать информацию. С помощью tab переключитесь на другую панель и с помощью стрелок вверх и вниз перемещайтесь по информации (name, role, description, states). Некоторые из них можно раскрыть, например, states, actions и attributes. С помощью Shift-tab вернитесь к дереву объектов и выберите другое дерево. Или сфокусируйте элемент DOM Node и нажмите enter, чтобы перейти в инспектор HTML дерева и уже там проверить HTML элемент и его соседей.
Если у вас есть зрение, вы можете перемещаться по дереву объектов доступности, а визуальная подсветка будет показывать, какой элемент соответствует этому объекту.
Поработали – выключите движок
Если обычно вы не используете вспомогательные технологии в Firefox, после проверки вы, наверное, захотите выключить движок доступности. Это можно сделать с помощью той кнопки, которая его включает.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Если вы пользуетесь скрин ридерами или другими вспомогательными технологиями, не беспокойтесь. Если инспектор видит, что доступность уже работала, когда он был запущен, инспектор не позволит выключить движок. Т.е. никто внезапно не отберет у вас доступность.
Чем не является инспектор
Инспектор не является инструментом оценки. Это инспектор. Он не подскажет вам о низком коэффициенте контрастности, вы не посмотрите там совместимость с WCAG. Он помогает инспектировать код, помогает понять, как сайт переводится в объекты для вспомогательных технологий. Это хороший инструмент для подготовки к другим инструментам Axe, Tenon.io, Colour Contrast Analyzer и любым другим, которые вы хотите использовать для реальной оценки доступности сайта.
Пример
Например, вам попалась такая немного сломанная форма (откройте в новой вкладке):