30 полезностей для firefox developer tools

Открытие Консоли браузера

Консоль браузера можно открыть двумя способами:

1. из меню: выбрать «Консоль браузера» из меню Разработка в меню Firefox (или меню Инструменты, если оно включено или на OS X)
2. с клавиатуры: нажать Ctrl+Shift+J (или Cmd+Shift+J на Mac).

Note that until Firefox 38, if the Browser Console has become hidden by a normal Firefox window and you select it again, either from the menu or from the keyboard, then it will be closed. From Firefox 38 onwards, this instead has the effect of switching the focus back to the Browser Console, which is more likely to be what you wanted.

You can also start the Browser Console by launching Firefox from the command line and passing the argument:

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

The Browser Console looks like this:

You can see that the Browser Console looks and behaves very much like the Web Console:

• most of the window is occupied by a
• at the top, a enables you to filter the messages that appear
• at the bottom, a enables you to evaluate JavaScript expressions.

Подробности

Фаерфокс Девелопер Едишн представляет собой продвинутую во многих аспектах версию браузера, с рядом улучшений. Представляем вашему вниманию краткое описание для всех ключевых моментов:

• Повышенная производительность – использование модернизированной версии CSS-движка, с помощью которого достигается более высокая скорость работы.
• Управление CSS-сеткой – визуализация сетки с возможностью ее «горячего» редактирования.
• Редактор фигур – он предназначается для детальной наладки в визуальном редакторе параметров clip-path вместе с shape-outside.
• Инструменты разработчика – множество функций, которые окажутся полезными при создании и отладке веб-страниц.
• Панель шрифтов – просмотр подробной информации относительно задействованных шрифтов, которые были задействованы в конкретной информации.

А об одном из указанных ранее достоинстве мы поговорим более детально.

Инструменты разработчика

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

Хотелось бы остановиться на этих моментах более детально:

• Инспектор – изучение и редактирование кодов HTML и CSS на странице.
• Консоль – отображение всей необходимой информации о веб-странице странице с возможностью исполнения JavaScript.
• Отладчик – отслеживание корректности работы JS.
• Сеть – возможность мониторинга сетевых запросов вместе с их влиянием на скорость загрузки интернет-страниц.
• Панель хранилища – просмотр сохраненной пользовательской информации (кэш-файлы, данные куки, история просмотров и так далее), с возможностью ее редактирования и даже добавления.
• Визуальное редактирование – наглядная отстройка анимаций, размещения и форматирования текстов и прочих элементов.
• Редактор JS – написание, редактирование и исполнение JS-скриптов прямиком на открытой интернет-странице.
• Производительность – инструменты для оптимизации.
• Память – мониторинг потребления памяти с возможностью нахождения «слабых мест».
• Веб-аудио – возможность изучения и настройки Web Audio API.
• Режим адаптивного экрана – просмотр правильности отображения интернет-страниц на различных устройствах (ПК, смартфоны, Smart TV и так далее).
• Редактор стилей – инструменты для настройки CSS по своему усмотрению.

Overview

In this tutorial you will learn how to access the web development tools that are built into every copy of Firefox. You will also learn how to install the Firefox Developer Edition alongside your normal Firefox installation, allowing you to keep development work separate from your normal day-to-day browsing.

What you’ll learn

• How to access the developer tools
• How to use the inspector and console tools
• How to configure the user interface to show the tools you want
• Why you might want to install a second browser for development
• How to install Firefox Developer Edition

What you’ll need

• A computer running Ubuntu 16.04 or above
• The Firefox web browser (installed by default in Ubuntu desktop systems)

Although you don’t need any experience in web development to follow this tutorial, a little knowledge of how a web page is written might make some things a little more understandable. There’s a getting started guide on Mozilla’s web developer site, but if you’re the sort of person that would rather just jump right in and get going you should still be able to complete this tutorial even without that background knowledge. Whichever approach you prefer, there are links on the last page that will help you take your web developer skills to the next level.

Скачивание и установка

Все, кто хочет испробовать возможности Firefox Developer Edition, смогут скачать установочный файл с официального сайта компании. Ссылка: https://www.mozilla.org/ru/firefox/developer/

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

Для скачивания и установки браузера следует выполнить следующий порядок действий: 1. Кликните по значку загрузки.

2. На компьютер будет загружен автоматический установщик, который следует запустить.

3. Дождитесь окончания установочного процесса.

Теперь на ваш компьютер установлен Mozilla Firefox Developer Edition. По своему дизайну он немного отличается от обычной версии. При первом запуске откроется вкладка с описанием встроенных возможностей. О каждой из них можно узнать подробно, кликнув соответствующую кнопку.

Сам браузер выполнен в темном стиле. Главная вкладка имеет привычный интерфейс, котрый пользователь может настроить под свой вкус.

При желании можно совершить синхронизацию и перенос закладок из других браузеров.

Для того чтобы воспользоваться инструментами программы, необходимо открыть меню и кликнуть по разделу «Веб-разработка».

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

Для быстрого доступа к возможностям программы предусмотрены горячие клавиши. Зажав комбинацию из 2–3 кнопок, можно запустить процесс, не обременяя себя переходом в нужный раздел меню.

Connection to Firefox for Android 68

Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:

• Firefox Preview, if your desktop Firefox is the main release or Developer Edition
• Firefox for Android Nightly

If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop Firefox Extended Support Release (ESR), which is also based on version 68.

Note that is not enabled by default in Firefox ESR.  To enable it, open the Configuration Editor () and set to true.

If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see

«Улучшение интерфейса Firefox»

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

Statiform

Если вам не нравится внешний вид Firefox, воспользуйтесь расширением Stratiform. Этот инструмент позволяет придать оригинальность используемым в браузере иконкам, панелям инструментов, изменить вид и цвет управляющих элементов и настроить прозрачность.

All-In-One Sidebar

Дополнение для расширения функциональности боковой панели. Обеспечивает более удобный доступ к инструментам управления браузера, а также ко всем установленным расширениям.

Vertical Toolbar

Это расширение найдут для себя полезным пользователи компьютеров с широкоформатными мониторами. Vertical Toolbar заменяет привычную горизонтальную панель дополнений вертикальной, расположенной слева. Кроме того, расширением предлагается ряд дополнительных функций, например, просмотр и группировка открытых вкладок в виде миниатюр.

Omnibar

В отличие от Google Chrome, в Firefox адресная строка и строка поиска работают отдельно друг от друга, что может доставлять пользователям определённые неудобства. Дополнение Omnibar объединяет их функциональные возможности, «склеивая» адресную и поисковую строку в одно целое.

Add To Search Bar

Предназначается для расширения поисковых возможностей. После установки Add To Search Bar вы сможете добавлять в браузер практически любые поисковые движки, от Google до The New York Times.

Download Statusbar заменяет стандартную панель загрузок Firefox более удобной и информативной.

GTranslate

Простой переводчик текста прямо на веб-страницах. Позволяет быстро переводить текст кликом по нему правой кнопкой мыши.

TinEye

Полезное дополнение, позволяющее выполнять поиск дубликатов изображений. С его помощью вы можете загрузить любое изображение на специальный сервис, после чего получите полный список дубликатов с указанием размера и источника.

FindBar

Еще одно дополнение для расширения возможностей поиска. Только предназначается для поиска не в интернете, а на открытой веб-странице. В отличие от стандартного поиска, вызываемого комбинацией Ctrl+F, FindBar позволяет выполнять поиск на всех открытых вкладках сразу.

Greasemonkey

Дополнение Firefox, позволяющее добавить на любую страницу пользовательский javascript, записанный в формате этого расширения. Такие скрипты могут использоваться для решения нестандартных задач.

Stylish

По функциональности это расширение близко к Greasemonkey, но работает оно не со скриптами, а со стилями. Предназначается для пользовательского оформления отображаемых в браузере веб-страниц.

User Agent Switcher

Расширение User Agent Switcher форматирует страницы сайтов и показывает, как бы они выглядели в других браузерах, в том числе мобильных.

Evernote Clearly

Своеобразный чистильщик, позволяющий пользователю сосредоточиться на текстовом контенте

Выделяет и форматирует текст, отодвигая рекламу, отвлекающие внимание картинки и прочий мусор на задний план

Написание WebExtension

Создайте новую директорию (папку) и перейдите в неё:

Теперь создайте новый файл, назовите его «manifest.json» в папке «borderify». Вставьте туда следующий код:

• Первые три ключа: , , являются обязательными и содержат основные метаданные о дополнении.
• не обязателен, но рекомендуется: это описание отображается в Менеджере Дополнений.
• не обязателен, но рекомендуется: позволяет указать значок для дополнения, который будет виден в Менеджере Дополнений.
• является обязательным для Firefox, и определяет ID дополнения. Он так же может использоваться для указания минимальной и максимальной версии Firefox, поддерживаемой расширением.

Самый интересный ключ здесь — это , который говорит Firefox загружать скрипт на Web страницах, чей URL совпадает с заданным шаблоном. В нашем случае, мы просим Firefox загрузить скрипт с названием «borderify.js» на всех HTTP или HTTPS страницах, полученных с «mozilla.org» или любого из его поддоменов.

• Узнать больше content scripts.
• Узнать больше о match patterns.

. Если вам нужно указать ID дополнения включите ключ в и установите его свойство :

Дополнение должно иметь иконку (значок). Эта иконка будет показана в списке дополнений в Менеджере Дополнений. Наш файл manifest.json сообщает, что иконка будет находиться в файле  «icons/border-48.png».

Создайте директорию (папку) «icons» внутри директории «borderify» . Сохраните в ней иконку под именем «border-48.png».  Вы можете использовать иконку из нашего примера, которая взята из набора иконок Google Material Design, и используется по лицензии Creative Commons Attribution-ShareAlike.

Вы можете использовать собственную иконку. Её размер должен быть 48×48 пикселей. Вы можете также использовать иконку размером 96×96 пикселей для отображения на мониторах высокого разрешения. В этом случае вам необходимо указать её в качестве свойства «96» объекта » в файле manifest.json:

Также вы можете создать иконку в формате SVG и она будет корректно масштабироваться.

Узнать больше о ключе icons

Наконец, создайте в директории «borderify» файл с именем «borderify.js» и поместите туда следующий код:

Этот скрипт будет встраиваться в страницу, которая совпадает с шаблоном, указанном в ключе файла manifest.json. Этот скрипт имеет прямой доступ ко всему документу, как если бы он был загружен самой страницей.

Узнать больше о content scripts

Workers

The Workers section shows all the workers you’ve got registered on your Firefox, categorized as follows:

• All registered Service Workers
• All registered Shared Workers
• Other workers, including Chrome Workers and

You can connect the developer tools to each worker, and send push notifications to service workers.

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

• Registering: this covers all states between the service worker’s initial registration, and its assuming control of pages. That is, it subsumes the installing, activating, and waiting states.
• Running: the service worker is currently running. It’s installed and activated, and is currently handling events.
• Stopped: the service worker is installed and activated, but has been terminated after being idle.

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

Note: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools Application panel.

Click the Unregister button to unregister the service worker.

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

Service workers can be unavailable if the preference is set to false in .

Examine computed CSS

To see the complete computed CSS for the selected element, select the in the righthand pane. This panel shows the calculated value that each CSS property has for the selected element. (This calculated value is exactly the same as what getComputedStyle would return.)

You can Tab through the styles to select them, and you can find more information about each property — pressing F1 on a selected property will open up its MDN reference page.

Clicking the arrow next to the property name (or pressing Enter or Space while it is selected) shows the rule that set this value, along with a link to the source filename and line number:

By default, this view only shows values that have been explicitly set by the page: to see all values, click the «Browser styles» box. You can Tab through the filenames/line numbers; pressing Enter/Return will open up the relevant file at that point in the Style Editor.

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type «font» in the search box, and only properties with «font» in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to «Lucida Grande», type that in the search box.

Note: While in the Computed view, you can press Ctrl / Cmd + F to focus the search field. Once you’ve typed in a filter, you can press Esc to remove it again.

Trying it out

First, double check that you have the right files in the right places:

borderify/
    icons/
        border-48.png
    borderify.js
    manifest.json

In Firefox: Open the about:debugging page, click «This Firefox» (in newer versions of Firefox), click «Load Temporary Add-on», then select any file in your extension’s directory.

https://youtube.com/watch?v=cer9EUKegG4

The extension will now be installed, and will stay until you restart Firefox.

Alternatively, you can run the extension from the command line using the web-ext tool.

Now try visiting a page under «mozilla.org», and you should see the red border round the page:

https://youtube.com/watch?v=rxBQl2Z9IBQ

Don’t try it on addons.mozilla.org, though! Content scripts are currently blocked on that domain.

Try experimenting a bit. Edit the content script to change the color of the border, or do something else to the page content. Save the content script, then reload the extension’s files by clicking the «Reload» button in about:debugging. You can see the changes right away:

https://youtube.com/watch?v=NuajE60jfGY

Learn more about loading extensions

Основные достоинства «Файрфокс Девелопер Эдишн»

Помимо вышесказанного, пользователями также отмечены такие достоинства, как:

• стандартизированный и приемлемый период выхода обновлений браузера. Если вас не устраивают еженедельные патчи, всегда можно поучаствовать в бета-тесте «ночных» версий;
• небольшой «вес». В отличие от других профессиональных инструментов, «Файрфокс» для разработчиков остается браузером и не занимает много места на ПК или флешке.

Заключение

Если вас устраивает всё отмеченное выше, то вы в любой момент можете скачать и опробовать браузер и самостоятельно решить, подходит ли он для ваших целей.

Рекомендуем! InstallPack		Стандартный установщик
	Официальный дистрибутив Firefox
	Тихая установка без диалоговых окон
	Рекомендации по установке необходимых программ
	Пакетная установка нескольких программ

Запуск сервера отладчика

Далее нужно стартовать сервер отладчика в отлаживаемом Firefox.

До Firefox 37: открыть Панель разработчика и введите команду:

listen 6000

Это укажет отлаживаемому обрабатывать клиентов-отладчиков на порту 6000. Кроме этого нигде больше не используйте порт 6000.

После перезагрузки нужно будет ввести команду заново.

Начиная с Firefox 37 и далее описанный метод работает, но есть другой: запустите отлаживаемый из командной строки, передав ему параметр :

/path/to/firefox --start-debugger-server

Без аргументов  параметр запустит обработку сервером 6000 порта. Для использования другого порта передайте его номер:

/path/to/firefox --start-debugger-server 1234

Отметьте: в Windows вызов записывается с одним «минусом»:

firefox.exe -start-debugger-server 1234

Примечание: По умолчанию и по соображениям безопасности включена (через about:config) опция. Если нужно отлаживать Firefox с другого компьютера, то измените её, но только в безопасной сети или за файерволом, чтобы предотвратить несанкционированный доступ.

Connecting the Developer Tools

If you open the developer tools using or the equivalent menu items, they’ll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

about:debugging

Debug add-ons, content tabs, and workers running in the browser.

Connect the developer tools to an instance of Firefox running on an Android device.

Connecting to iframes

Connect the developer tools to a specific iframe in the current page.

Connecting to other browsers

Connect the developer tools to Chrome on Android and Safari on iOS.

Подключение инструментов разработчика

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

about:debugging

Отладка надстроек, вкладок контента и рабочих, работающих в браузере.

Подключите инструменты разработчика к Firefox, работающему на устройстве Android.

Подключение к iframes

Подключите инструменты разработчика к конкретному iframe на текущей странице.

Подключение к другим браузерам

Подключите инструменты разработчика к Chrome на Android и Safari на iOS.

What is the difference between each Firefox edition?

Mozilla normally releases Firefox in four editions according to the development stages.

• Firefox Nightly
• Firefox Aurora (Now Firefox Developers edition)
• Firefox Beta
• Firefox Release

Firefox Nightly

This edition is released nightly. It gets check-ins each day and gets updated two times a day. This can often lead to problems until fixed, finished or reverted. It is thus, the most unstable build.

Firefox Beta

Firefox Beta is basically the next version of Firefox released around 6 weeks in advance. While it is more stable than Nightly, it’s still not final and may have minor bugs.

Firefox Developers Edition

Firefox Developers Edition is more geared towards the developers. It has java debuggers and a lot of tools which you can access from the menu or a right-click to diagnose issues with web pages you might be working on.

Review

Firefox Developer Edition is a new version of the popular browser Mozilla, focused on web developers.

In recent years the most popular browsers have built-in tools that allow to view and edit the source code of the web pages. This type of tools are very useful for web developers, since it allows to localize errors easily, edit the web page on the fly, and therefore see immediate results of the changes.

Firefox Developer Edition is a standard web browser, so we will be able to browse the Internet on the usual way, but it has the peculiarity that includes a multitude of tools that facilitate the work of the web developers. Some of these tools are:

• Valence: this tool allows is to debug different browsers in different devices. For example, we can debug a web page running on a Safari at iOS, or running on a Chrome at Android. This allows connecting the mobile device to the computer, and make changes on the page source code using Firefox. These changes will be reflected in the connected mobile devices. This tool is on atesting phase, so it is not recommended to work with it in a consistent way.
• Responsive design: thanks to this view it will not be necessary to install any plug-in to check how the page is viewed in many resolutions. This way, we can see if the responsive design adapts perfectly to the maximum number of possible resolutions.
• Page Inspector: this panel displays information about the elements that make up the web page. We can see and modify the HTML and CSS code on the fly. For example, if we select a CSS class, we will see highlighted in the web all the elements that make use of that CSS class. The same happens with the HTML code, when we open the “Inspector Page” panel and place the cursor on top of an HTML element, this element will be highlighted on the design of the page.
• Web Console: this panel shows the errors and warnings messages generated by the web page that we are visiting, and organizes them into categories, so we can see the correponding errors to CSS, Javascript, Network, etc., we can also interact with the elements of the web by typingJavascript code on the console. We will be able to call the method of an object, or use jQuery to list a series of items. Any thing we can do on Javascript, can be performed directly on the “Web Console”.
• Network Monitor: here we can see all the requests performed by a web page, and explore the headers of the same. This view is very useful to know exactly how many external elements is loading a web, and if it is necessary to reduce the number of elements. We can filter the requests by type: HTML, CSS, JS, Image, Sources, Multimedia, and other.

These are just some of the features that this new version of Firefox browser presents. Sure many web developers will be happy with this version, and will make Firefox Developer Edition his default browser.

Editing HTML

You can edit the HTML — tags, attributes, and content — directly in the HTML pane: double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately.

To edit an element’s , activate the element’s popup menu and select «Edit As HTML». You’ll see a text box in the HTML pane:

You can add any HTML in here: changing the element’s tag, changing existing elements, or adding new ones. Once you click outside the box, the changes are applied to the page.

When you’re editing HTML, the context menu you’ll see is the normal one for working with editable text:

You can use the to copy nodes in the HTML tree and paste them into the desired location.

You can reorganize the HTML content of a page by moving nodes in the HTML tree. Just click and hold on any element and drag it up or down in the tree. When you release the mouse button, the element will be inserted at the corresponding position:

You can cancel the drag and drop by pressing the Esc key.

There’s a «+» icon at the top of the markup view:

Click this icon to insert an empty into the document as the last child of the currently selected element. You can then edit the new node’s content and styling just as you would any other node in the document.

You can access the same functionality using the «Create New Node» popup menu item.

Note that this button is disabled if the selected element’s type is such that adding a last-child would have no effect (for example, if it is an or element). However, it is enabled in places where it is not valid to insert a , such as or . In these cases the element is added as text.

Device selection

Just above the viewport there is a label «no device selected»; click this to see a list of device names. Select a device, and Responsive Design Mode sets the following properties to match the selected device:

• Screen size
• Device pixel ratio (the ratio of device physical pixels to device-independent pixels)
• Touch event simulation

Additionally, Firefox sets the User-Agent HTTP request header to identify itself as the default browser on the selected device. For example, if you’ve selected an iPhone, then Firefox identifies itself as Safari. The property is set to the same value.

The devices listed in the drop-down are just a subset of the devices that can be selected. At the end of the drop-down, there is an item labeled Edit list. Select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. The set of devices, and the values associated with each device, are taken from https://github.com/mozilla/simulated-devices. You can also define a custom device, as described below.

You can create and save custom devices in Responsive Design Mode by clicking the Add Custom Device button. Each device can have its own:

• Name
• Size
• DevicePixelRatio
• User Agent String
• Touch Screen

Also, you can preview the properties of existing devices by hovering over the name in the device modal, where they display in a tooltip.

What is Firefox ESR?

Firefox ESR or Extended Support Release is a version of the browser designed for IT professionals in particular. Using Firefox ESR, IT professionals can easily configure and deploy Firefox in their organization. It is based on a regular release of Firefox for desktop and is intended for use by several kinds of organizations like schools, businesses, and all those who need extended support for mass deployments or who want to set up and maintain Firefox on a large scale.

Firefox ESR 1

The main purpose of Firefox ESR is to provide support for older technologies like Microsoft Silverlight which have been deprecated. This feature of the browser is extremely useful for people who are still using older tech. Up to Firefox 52 ESR, Silverlight, as well as Java, was supported by the browser, however, with the release of Firefox 60 ESR, this support has been removed and the browser now only supports the Adobe Flash NPAPI plugin.

More Tools

These developer tools are also built into Firefox. Unlike the «Core Tools» above, you might not use them every day.

Memory

Figure out which objects are keeping memory in use.

Storage Inspector

Inspect cookies, local storage, indexedDB, and session storage present in a page.

DOM Property Viewer

Inspect the page’s DOM properties, functions, etc.

Eyedropper

Select a color from the page.

Style Editor

View and edit CSS styles for the current page.

Taking screenshots

Take a screenshot of the entire page or of a single element.

Measure a portion of the page

Measure a specific area of a web page.

Rulers

Overlay horizontal and vertical rulers on a web page

For the latest developer tools and features, try Firefox Developer Edition.

CSS

This feature renders control characters (Unicode category Cc) other than tab (), line feed (), form feed (), and carriage return () as a hexbox when they are not expected. (See bug 1099557 for more details.)

Release channel	Version added	Enabled by default?
Nightly	43	Yes
Developer Edition	43	No
Beta	43	No
Release	43	No
Preference name	or

The CSS property is part of the CSS Inline Layout specification and allows you to specify how dropped, raised, and sunken initial letters are displayed. (See bug 1223880 for more details.)

Release channel	Version added	Enabled by default?
Nightly	50	No
Developer Edition	50	No
Beta	50	No
Release	50	No
Preference name

The CSS property is part of the CSS4 Sizing specification and allows you to create boxes which conform to an aspect ratio. (See bug 1639963 and bug 1646096 for more details.)

Release channel	Version added	Enabled by default?
Nightly	81	Yes
Developer Edition	81	No
Beta	81	No
Release	81	No
Preference name

Support for using a single as a when specifying the aspect ratio for a media query. (See bug 1565562 for more details.)

Release channel	Version added	Enabled by default?
Nightly	70	No
Developer Edition	70	No
Beta	70	No
Release	70	No
Preference name

The property applies filter effects to the area behind an element. (See bug 1178765 for more details.)

Release channel	Version added	Enabled by default?
Nightly	70	No
Developer Edition	70	No
Beta	70	No
Release	70	No
Preference name

The function as it applies to and other sizing properties. This function is already well-supported for CSS Grid Layout track sizing. (See bug 1312588 for more details.)

Release channel	Version added	Enabled by default?
Nightly	91	No
Developer Edition	91	No
Beta	91	No
Release	91	No
Preference name

Adds support for a masonry-style layout based on grid layout where one axis has a masonry layout and the other has a normal grid layout. This allows developers to easily create gallery style layouts like on Pinterest. See bug 1607954 for more details.

Release channel	Version added	Enabled by default?
Nightly	77	Yes
Developer Edition	77	No
Beta	77	No
Release	77	No
Preference name

The media feature is used to detect whether the user has specified a preference for higher (or lower) contrast in the presentation of web content. Refer to bug 1506364 for more details.

Release channel	Version added	Enabled by default?
Nightly	80	No
Developer Edition	80	No
Beta	80	No
Release	80	No
Preference name

The property indicates whether MathML equations should render with normal or compact height. (See bug 1665975 for more details.)

Release channel	Version added	Enabled by default?
Nightly	83	No
Developer Edition	83	No
Beta	83	No
Release	83	No
Preference name

The Core Tools

You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Web Developer Tools or use the keyboard shortcut  Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.

The ellipsis menu on the right-hand side of Developer Tools contains several commands that let you perform actions or change tool settings.

	This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work.
	Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.)
	Toggles Responsive Design Mode.
	Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community.
	Closes the Developer Tools

Page Inspector

View and edit page content and layout. Visualize many aspects of the page including the box model, animations, and grid layouts.

See messages logged by a web page and interact with the page using JavaScript.

Stop, step through, and examine the JavaScript running on a page.

See the network requests made when a page is loaded.

Analyze your site’s general responsiveness, JavaScript, and layout performance.

See how your website or app will look and behave on different devices and network types.

Accessibility inspector

Provides a means to access the page’s accessibility tree, allowing you to check what’s missing or otherwise needs attention.

Application panel

Provides tools for inspecting and debugging modern web apps (also known as Progressive Web Apps). This includes inspection of service workers and web app manifests.

Note: The collective term for the UI inside which the DevTools all live is the Toolbox.