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

Основные инструменты

Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав Открыть меню > Веб-разработка > Инструменты разработчика или используя комбинации клавиш Ctrl + Shift + I или F12 на Windows и Linux, или  Cmd + Opt + I на macOS.

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

Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов ). Нажатие на эту кнопку отображает список фреймов (тегов ) на текущей странице и позволяет выбрать тот фрейм (тег ) с которым Вы хотите работать.

Щелчок по данной кнопке создает снимок экрана (screenshot) текущей страницы

(Внимание: По-умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)

Переключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).

Открывает меню, которое включает настройки «прилипания» (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.

Закрывает окно Средств Разработчика

Инспектор страницы

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

Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.

Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.

Показывает сетевые запросы возникающие в процессе загрузки страницы.

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

Режим адаптивного дизайна

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

Инспектор доступности

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

Firefox Quantum: Towards a next-gen browser

Developer Edition now includes “Quantum CSS,” an entirely new CSS engine written in Rust and based on the Servo parallel browser engine project. Additionally, the “Quantum Flow” team tracked down and fixed 369 performance bugs in Firefox, with a special focus on responsiveness and UI interactions. Lastly, the “Quantum DOM” project began overhauling how Firefox prioritizes work, responding more quickly to events like user input while delaying less urgent computations until the browser is idle.

The result? Compared to Firefox six months ago, today’s Developer Edition is twice as fast on benchmarks like Speedometer 2.0 that simulate the real-world performance of modern web applications.

Furthermore, Firefox is 64-bit and multi-process by default, and Firefox’s unique architecture allows it to take advantage of modern, multi-core processors while still respecting your available RAM. Meanwhile, the “Quantum Compositor” project significantly reduced crashes caused by buggy graphics drivers.

Скачивание инсталлятора

Скачать последнюю версию Firefox Quantum для Windows XP/7/8/10, macOS или Linux можно с официального сайта разработчиков. Рассмотрим порядок установки обычной, портативной и расширенной версий.

Скачивание обычной версии

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

2. Нажать кнопку «Загрузить сейчас».

3. Дождаться загрузки инсталлятора на жесткий диск.

В некоторых ситуациях возникают проблемы с определением нужной версии браузера. В таком случае подойдет ручной способ, который позволит найти инсталлятор на нужном языке, с желаемой операционной системой разрядностью 32 или 64 бит. Для этого следует выполнить следующую последовательность действий: 1. Перейти на страницу поддержки Mozilla по адресу: https://support.mozilla.org/ru/kb/ustanovka-predydushej-versii-firefox.

2. Нажать на раздел «Системы и языки» под кнопкой «Скачать Firefox».

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

4. Выбрать нужную операционную систему. Для скачивания Firefox Quantum 64bit следует нажать кнопку Download или «Загрузить» под соответствующим значком.

После этого на устройство будет загружен инсталлятор с последней версией браузера (Firefox Quantum 64 bit rus версия 66).

Важно знать, что сборки под номером 65 и выше работают с операционной системой Windows не ниже 7 версии

Firefox Quantum Developer Edition

Для загрузки установщика расширенной версии Firefox следует посетить раздел «Разработчикам» на официальном сайте. 1. Нажать кнопку Firefox Developer Edition.

2. Нажать кнопку для загрузки инсталлятора.

После этого начнется загрузка установщика на компьютер.

Firefox ESR

Браузер Firefox ESR (Extended Support Release) –это специально разработанный веб-обозреватель для организаций, который подойдет для работы:

  • в учебных заведениях;
  • на предприятиях;
  • государственных учреждениях.

Характеристики

Некоторые, но не все, функции, рекламируемые Mozilla:

  • WebIDE:

    • позволяет разрабатывать, развертывать и отлаживать веб-приложения непосредственно в браузере или на устройстве с операционной системой Firefox. Он позволяет вам создавать новое приложение Firefox OS (которое является просто веб-приложением) из шаблона или открывать код существующего приложения. Оттуда вы можете редактировать файлы приложения. Это один щелчок, чтобы запустить приложение в симуляторе, и еще один, чтобы отладить его с помощью инструментов разработчика.

    • Веб-IDE — YouTube

  • Валентность:

    • (ранее назывался Firefox Tools Adapter) позволяет разрабатывать и отлаживать приложение для нескольких браузеров и устройств, подключая инструменты разработчика Firefox к другим основным движкам браузера. Valence также расширяет возможности потрясающих инструментов, которые мы создали для отладки Firefox OS и Firefox для Android, для других основных мобильных браузеров, включая Chrome для Android и Safari для iOS. Пока что эти инструменты включают в себя наш Инспектор, Отладчик, Консоль и Редактор стилей.

    • Валентность — YouTube

  • Адаптивный режим дизайна:

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

  • Инспектор страниц:

    изучить HTML и CSS любой веб-страницы и легко изменить структуру и макет страницы.

  • Веб-консоль:

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

  • Отладчик JavaScript:

    пройти через код JavaScript и проверить или изменить его состояние, чтобы помочь отследить ошибки.

  • Сетевой монитор:

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

  • Редактор стилей:

    просматривать и редактировать стили CSS, связанные с веб-страницей, создавать новые и применять существующие таблицы стилей CSS к любой странице.

  • Web Audio Editor:

    проверять и взаимодействовать с Web Audio API в режиме реального времени, чтобы убедиться, что все аудио узлы подключены так, как вы ожидаете.

Ссылка:

  • Firefox — Aurora Notes (35.0a2) — Mozilla (Firefox Developer Edition для заметок)

    Версия 35.0a2, впервые предложенная пользователям Firefox Developer Edition 10 ноября 2014 г.

  • Developer Edition — Mozilla | MDN

Вручную

Загрузите с веб-страницы Mozilla Firefox Developer Edition. Извлеките это с и переместите папку в ее окончательное местоположение. Хорошей практикой является его установка в или же ,

Как только вы переместили файлы в их окончательное местоположение (скажем, ), вы можете создать следующий файл чтобы получить лаунчер с иконкой отличной от обычного Firefox.

Чтобы пометить модуль запуска как надежный, сделайте его исполняемым:

Чтобы запустить его, перейдите в ~/.local/share/apps/ с помощью приложения «Файлы» (убедитесь, что вы включили скрытые папки), затем дважды щелкните firefox_dev.desktop. Кроме того, поиск , и просто запустите бинарный и вуаля.

Обратите внимание, что при установке вручную FDE по умолчанию не имеет глобального меню Unity

Additional features and improvements

In addition to the new Performance tools we’ve also implemented many new convenience features — mostly inspired by direct feedback from developers via our UserVoice channel — and over ninety bug fixes, representing a ton of hard work over the last eight weeks from Firefox Developer Tools staff as well as many contributors. Please continue to submit your feedback.

This video from Matthew “Potch” Claypotch shows off some the most requested feature implementations for Developer Edition 40.

Network Monitor improvements

As seen in the video above, the Network Monitor includes many improvements such data collection when the Network Tab is not active, and the ability to see quickly when an asset is loaded from the cache as opposed to the network.
It is now possible to copy post data, URL parameters, and Request and Response headers using the context menu when selecting a row entry.

CSS docs integration

Firefox Developer Tools now support integration with MDN documentation for CSS properties, providing more information for developers while they are debugging web app styling and layout. To access this feature, you can right-click (Ctrl + click on Mac) on CSS properties within the Inspector, and select “Show MDN Docs” from the context menu.

Additional fixes

Many additional fixes are also included, like improvements to the Animation Inspector, scroll into view context menu support and Inspector search improvements. To see all the bugs addressed in this release have a look at this big list in Bugzilla.

We’d like to send a gigantic special thank you to all the contributors and individuals who reported bugs, tested patches, and spent many hours working to make Firefox Developer Tools impressive.

DevTools in 57: Redesigned and better than ever

Firefox Quantum: Developer Edition also includes a ton of refined, redesigned, and brand new developer tools.

A few highlights:

  • The Console, Debugger, and Network tabs are now implemented using standard web technologies, including React and Redux, as part of our “devtools.html” effort.
  • The Inspector gained tons of new features for working with CSS Grid, CSS Variables, toggling classes on elements, etc.
  • The Console now supports grouping messages and expanding / inspecting objects in-line.
  • The Debugger offers completely new ways to search, navigate, and debug projects.

And that’s not all. To read in greater depth about what’s new in Firefox Developer Tools, check out Developer Edition Devtools Update.

Features

Some — but not all — features touted by Mozilla:

  • WebIDE:

    • allows you to develop, deploy and debug Web apps directly in your browser, or on a Firefox OS device. It lets you create a new Firefox OS app (which is just a web app) from a template, or open up the code of an existing app. From there you can edit the app’s files. It’s one click to run the app in a simulator and one more to debug it with the developer tools.

    • Web IDE — YouTube

  • Valence:

    • (previously called Firefox Tools Adapter) lets you develop and debug your app across multiple browsers and devices by connecting the Firefox dev tools to other major browser engines. Valence also extends the awesome tools we’ve built to debug Firefox OS and Firefox for Android to the other major mobile browsers including Chrome on Android and Safari on iOS. So far these tools include our Inspector, Debugger and Console and Style Editor.

    • Valence — YouTube

  • Responsive Design Mode:

    see how your website or Web app will look on different screen sizes without changing the size of your browser window.

  • Page Inspector:

    examine the HTML and CSS of any Web page and easily modify the structure and layout of a page.

  • Web Console:

    see logged information associated with a Web page and use Web Console and interact with a Web page using JavaScript.

  • JavaScript Debugger:

    step through JavaScript code and examine or modify its state to help track down bugs.

  • Network Monitor:

    see all the network requests your browser makes, how long each request takes and details of each request.

  • Style Editor:

    view and edit CSS styles associated with a Web page, create new ones and apply existing CSS stylesheets to any page.

  • Web Audio Editor:

    inspect and interact with Web Audio API in real time to ensure that all audio nodes are connected in the way you expect.

Reference:

Photon: Firefox’s new UI

To complement Quantum, the Photon team rebuilt Firefox’s interface to be faster and more modern:

You’ll hear more about Photon in November, but highlights include redesigned menus, square tabs, and a new “Library” button that acts as a single place for your bookmarks, downloads, history, etc. By default, Photon combines the search and URL bars into a single widget, but the old style is only a preference away.

The “Activity Stream” project redesigned the New Tab Page to feature highlights from your recent history and bookmarks, as well as recommendations from Pocket. Of course, each of these content blocks are optional, and add-ons can completely replace the new tab page to create entirely different experiences.

We also refreshed form handling in Firefox, adding a brand new autofill feature and implementing built-in widgets for and elements.

Lastly, Firefox’s preferences were completely redesigned and are now searchable.

Возможности программы

Разработчики постарались создать многофункциональный браузер, и им это удалось. Mozilla Firefox developer edition – действительно, уникальный продукт. Разберем его главные достоинства.

1. Повышенная производительность.

Добиться более быстрой работы программы стало возможно после того, как ее движок был полностью переработан. Разработчики практически с нуля написали новый код. Новый CSS-движок гораздо быстрее и умнее своего предшественника. Он вобрал в себя все лучшее из других популярных браузеров. Высокую производительность обеспечивает алгоритм, который распределяет нагрузку равномерно по всем ядрам вашего компьютера. Тем самым, скорость работы может быть увеличена в 2, 4, а на некоторых устройствах и в 16 раз.

2. Новые инструменты разработчика.

Developer Edition обладает рядом полезных инструментов, которые пригодятся разработчикам. Они отличаются своей гибкостью и большим функционалом. Например, есть встроенный отладчик JavaScript, который эмулирует деятельность других браузеров. Тем самым можно проверить, как будет отображаться страница в других веб-обозревателях. Работа с кодом в Mozilla Developer Edition стала гораздо удобнее. На экране отображается вся необходимая информация и подсказки.

3. CSS-сетка.

В отличие от других браузеров Firefox Developer Edition имеет инструмент для построения дизайна, именуемый CSS-сеткой. С ее помощью разработчик может распределять на экране области в отдельные блоки, содержащие информацию, менять их положение и дизайн.

4. Встроенный редактор фигур.

Разработчики могут воспользоваться редактором контуров фигур для настройки и изменения размеров фигур. Доступ к нему осуществляется через панель CSS. Для того чтобы приступить к редактированию объекта, достаточно кликнуть по нему мышью. На данный момент редактор может работать с фигурами, созданными с помощью clip-patch и shape-outside.

5. Панель шрифтов.

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

6. Хранилище. Веб-страницы используют различные типы хранилищ. В Firefox Developer Edition встроена панель, с помощью которой разработчик может проверить кэш, cookies, данные о сеансе и многое другое. Сейчас панель хранилищ предусматривает только чтение памяти, но Mozilla обещает в скором времени расширить возможности этого инструмента.

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

8. Редактор Web Audio. Экспериментальный инструмент Web Audio Editor исследует на страницах аудиоконтекст и выводит на экран информацию о нем в виде графиков. На данный момент редактор еще находится в разработке и может иметь ошибки, о которых вы можете сообщить.

Это далеко не все возможности браузера. Даже если вы не имеете должного опыта и только осваиваете разработку программ, компания Mozilla позаботилась о том, чтобы ваше обучение проходило как можно проще. На сайте компании есть раздел devtools, в котором подробно описано, как работать с каждой из возможностей браузера. И также существует сайт Mozilla Developer Network, где содержится огромное количество полезной информации для разработчиков. Материалы публикуют профессионалы, которые занимаются созданием новых программ. Ссылка на сайт: https://developer.mozilla.org/ru/

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

Подробности

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

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

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

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

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

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

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

Manually

Download from Mozilla Firefox Developer Edition webpage. Extract it with and move the folder to its final location. A good practice is to install it in or .

Once you moved the files to their final location (say ), you can create the following file to get a launcher with an icon distinct from normal Firefox.

Please note, that the parameter is added to prevent duplicate icons in the launcher, .

To mark the launcher as trusted, make it executable:

To launch it, navigate to ~/.local/share/applications/ using your «Files» application (ensure you turn on hidden folders), then double-click firefox_dev.desktop. Alternatively, search for , and simply run the binary, and voilà.

Note that, when you install manually, the F.D.E. does not have the unity global menu by default.

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.

Otherwise, keep following the Hacks blog to learn more about how the Firefox Developer Tools are evolving. Join in at the , the @FirefoxDevTools Twitter account, or #devtools on irc.mozilla.org.

Introducing the new performance tools

Firefox Developer Edition features a new performance tool that gives developers a better understanding of what is happening from a performance standpoint within their applications. Web developers can use these tools to profile performance in any kind of website, app, or game; for a fun insight into how these tools can be used to optimize HTML5 games, check out our post about the “Power Surge” game right after you’re done here.

All performance tools can now be found grouped together under the Performance tab, for easier usage. Performance is all about timing, so you can view browser events in the context of a timeline, which in turn can be extended to include a number of detailed views based on the metrics you choose to monitor.

In the following video, Dan Callahan demonstrates how to use the new performance tools.

The Performance tab contains the new timeline, which includes: Waterfall view, Call Tree view and a Flame Chart view.

All of the views above provide details of application performance that can be correlated with a recorded timeline overview. The timeline displays a compressed view of the Waterfall, minimum, maximum, and average frame rates, and a graphical representation of the frame rate. Left-clicking on the view and dragging to the desired range allows you to zoom into this timeline. This also simultaneously updates all three new views to represent a particular selected range.

The recording view gives developers a quick way to zoom into areas where frame rate problems are occurring.

The Waterfall view provides a graphical timeline of events occurring within the application. These events include markers for occurrences such as reflows, restyles, JavaScript calls, garbage collection, and paint operations. Using a simple filter button you can select the events you want to display in the Waterfall.

You can use console commands like to indicate, with a marker on the Waterfall, when a specific event occurs. Also, you can graphically show timespans using the and functions.

The Call Tree view shows the results of the JavaScript profiler for the specified range. Using this view you can see the approximate time spent in a function. The table displays total time spent within a function call or the self-time that a particular function call is using. The total time encapsulates all time spent in the function and includes time spent in nested function calls. The self-time only includes time spent in the particular function, excluding nested calls. This view can be very helpful when trying to locate functions that are consuming a large portion of processing time. This view has been available in previous iterations of Firefox, and should be familiar to developers who have used the tool in the past.


The Flame Chart view is similar to the Call Tree in that it graphically illustrates the call stack for a selected range. For example, in the screenshot below the function is taking over 25 milliseconds (ms) to complete, which is larger than the allotted time for frame generation to produce 60 frames per second.

Performance profiles can be created, saved, imported, or deleted. In addition, multiple profiles can be opened at once to contrast and compare performance statistics between runs. Profiles can be created programmatically or using the console, by entering to start a profile and to stop a profile. This allows you to fine-tune when profiling starts and stops within your code.
You can find complete docs for the performance tools on MDN. These include a tour of the UI, reference pages for each of the main tools, and some examples in which we use the tools to diagnose performance problems in CSS animations and JavaScript-heavy pages.

интересные посты

Держу в курсе
555 просмотры

Держу в курсе
555 просмотры

WhatsApp добавил кнопку Магазин

YouKit — 15.11.2020

Кнопка «Магазин» появится на месте иконки голосового вызова в интерфейсе приложения при общении с бизнес-пользователями для просмотра товаров по всему…

Держу в курсе
264 просмотры

Держу в курсе
264 просмотры

Instagram обновили дизайн расширив функции магазина

YouKit — 13.11.2020

Редизайн коснулся прежде всего главного экрана приложения. Появились вкладки Reels и Shop. На первой вкладке будут показываться персональные рекомендации, подборки канала @shop,…

Держу в курсе
1102 просмотры

Держу в курсе
1102 просмотры

Секретный доклад Yandex Scale 2020 • Яндекс.Облака трансляция

YouKit — 23.09.2020

На конференции вы узнаете анонсы будущих сервисов Яндекс.Облака, получите доступ к реальному опыту применения Облака от партнеров и клиентов, сможете…

Расширение инструментов разработчика

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

Example devtools add-ons
Use these examples to understand how to implement a devtools add-on.
Add a new panel to the devtools
Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor
A code editor built into Firefox that can be embedded in your add-on.
The Interface
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output
How to extend and customize the output of the Web Console and the Browser Console.
Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий