Firefox vs. firefox developer edition: what’s the difference?
Содержание:
- General
- Firefox channels
- CSS Tutorials
- Больше инструментов
- Reference
- Performance Tool
- Rich output for objects
- This Firefox
- Opening the about:debugging page
- Интерпретатор командной строки
- Rules view
- Расширение инструментов разработчика
- Extensions
- Основные инструменты
- Изучаемые темы
- Tutorials
- Запуск сервера отладчика
- Review
General
Firebug’s activation is URL based respecting the same origin policy. That means that when you open a page on the same origin in a different tab, Firebug gets opened automatically. And when you open a page of a different origin in the same tab, it closes automatically. The DevTools’ activation on the other hand is tab based. That means, that when you open the DevTools in a tab, they stay open even when you switch between different websites. When you switch to another tab, though, they’re closed.
Firebug can be opened by pressing F12. To open it to inspect an element it is possible to press Ctrl+Shift+C / Cmd+Opt+C. The DevTools share the same shortcuts, but also provide . E.g. the Network Monitor can be opened via Ctrl+Shift+Q / Cmd+Opt+Q, the Web Console via Ctrl+Shift+K / Cmd+Opt+K and the Debugger via Ctrl+Shift+S / Cmd+Opt+S.
Firefox channels
Firefox is available in five channels.
Each night we build Firefox from the latest code in mozilla-central. These builds are for Firefox developers or those who want to try out the very latest cutting edge features while they’re still under active development.
This is a version of Firefox tailored for developers. Firefox Developer Edition has all the latest developer tools that have reached beta. We also add some extra features for developers that are only available in this channel. It uses its own path and profile, so that you can run it alongside Release or Beta Firefox.
Every four weeks, we take the features that are stable enough, and create a new version of Firefox Beta. Firefox Beta builds are for Firefox enthusiasts to test what’s destined to become the next released Firefox version.
After stabilizing for another four weeks in Beta, we’re ready to ship the new features to hundreds of millions of users in a new release version of Firefox.
Firefox ESR is the long-term support edition of Firefox for desktop for use by organizations including schools, universities, businesses and others who need extended support for mass deployments.
CSS Tutorials
- CSS basics
- CSS (Cascading Style Sheets) is the code you use to style your webpage. CSS Basics takes you through what you need to get started. We’ll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?
- CSS first steps
- CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.
- CSS building blocks
-
This module carries on where CSS first steps left off — now you’ve gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.
The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.
- Styling text
- Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.
- Common CSS Questions
- Common questions and answers for beginners.
- CSS layout
- At this point we’ve already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it’s time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.
- CSS reference
- Complete reference to CSS, with details on support by Firefox and other browsers.
- Fluid Grids
- Design layouts that fluidly resize with the browser window, while still using a typographic grid.
- CSS Challenges
- Flex your CSS skills, and see where you need more practice.
- Using CSS transforms
- Apply rotation, skewing, scaling, and translation using CSS.
- CSS transitions
- CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.
- Quick Guide to Implement Web Fonts (with @font-face)
- The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.
- Starting to Write CSS
- An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.
- Canvas tutorial
- Learn how to draw graphics using scripting using the canvas element.
- HTML5 Doctor
- Articles about using HTML5 right now.
Больше инструментов
Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools» описанных выше, могут не использоваться в повседневной работе.
- Память
- Выясните, какие объекты сохраняют память в использовании.
- Storage Inspector
- Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.
- DOM Property Viewer
- Проверьте свойства DOM страницы, функции и т.д.
- Панель инструментов разработчика
- Интерфейс командной строки для инструментов разработчика.
- Пипетка
- Получите код любого цвета со страницы.
- Scratchpad
- Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript
- Редактор стилей
- Просмотр и редактирование стилей CSS для текущей страницы.
- Редактор шейдеров
- Просмотр и редактирование вершинных и фрагментных шейдеров, используемых WebGL.
- Редактор веб аудио
- Изучите график аудиоузлов в аудиоконтексте и измените их параметры.
- Делать скриншоты
- Сделайте скриншот всей страницы, или одного её элемента.
Reference
Browse through detailed HTTP reference documentation.
- HTTP Headers
-
HTTP message headers are used to describe a resource, or the behavior of the server or the client. Header fields are kept in an . IANA also maintains a .
- HTTP Request Methods
-
The different operations that can be done with HTTP: , , and also less common requests like , , or .
- HTTP Status Response Codes
-
HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.
- CSP directives
-
The response header fields allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.
Performance Tool
Firebug allows to profile JavaScript performance via the «Profile» button within the Console panel or the and commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via and like in Firebug or via the «Start Recording Performance» button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.
This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website’s performance but doesn’t go into detail regarding JavaScript function calls.
What comes nearest to Firebug’s profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.
Note: The times and percentages listed in the DevTools’ Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.
Like in Firebug’s profiler output the Call Tree view of the DevTools’ Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.
Rich output for objects
When the Web console prints objects, it includes a richer set of information than just the object’s name. In particular, it:
The Web Console provides rich output for many object types, including the following:
Новое в Firefox 36 |
|
When an object is logged to the console it appears in italics. Click on it, and you’ll see a new panel appear containing details of the object:
To dismiss this panel press Esc..
If you hover the mouse over any DOM element in the console output, it’s highlighted in the page:
In the screenshot above you’ll also see a blue «target» icon next to the node in the console output: click it to switch to the Inspector with that node selected.
This Firefox
The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:
- Temporary Extensions
- Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
- Extensions
- This section lists information about the extensions that you have installed on your system.
- Service Workers, Shared Workers, and Other Workers
- There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
Whether internal extensions appear in the list on this page depends on the setting of the preference. If you need to see these extensions, navigate to and make sure that the preference is set to .
Opening the about:debugging page
There are two ways to open :
- Type in the Firefox URL bar.
- In the Tools > Web Developer menu, click Remote Debugging.
When about:debugging opens, on the left-hand side, you’ll see a sidebar with two options and information about your remote debugging setup:
- Setup
- Use the Setup tab to configure the connection to your remote device.
- This Firefox
- Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.
If your page is different from the one displayed here, go to , find and set the option to true.
Интерпретатор командной строки
Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.
Для ввода выражений просто введите в командную строку и нажмите Enter. Для ввода выражений, состоящих из нескольких строк, используйте комбинацию ShiftEnter вместо Enter.
Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:
Вы можете получить доступ к переменным на странице; это могут быть как внутренние переменные например в объекте , так и переменные, добавленные с помощью Javascript кода — например с помощью :
У командной строки есть функциональность автоподстановки: начните вводить несколько начальных букв — и появится всплывающее окно с возможными вариантами завершения команды:
Нажмите Enter или Tab, чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если вам не подходит ни один из вариантов.
Консоль выдаёт подсказки из области видимости текущего активного фрейма. Это значит, что если вы уже достигли точки останова в функции, то у вас будут доступны автоподстановки только для объектов, которые находятся в одной области видимости с этой функцией.
Вы можете получать такие же подсказки для элементов массива:
Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:
Командная строка запоминает введённые ранее команды: чтобы перемещаться вперёд и назад по истории, используйте стрелки вниз и вверх на клавиатуре.
Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте .
Если страница содержит встроенные iframes (en-US), вы можете использовать команду чтобы изменить область видимости в консоли на область определённого iframe, и после этого вы сможете выполнять функции, которые содержит объект document в этом iframe. Существует три способа выбрать iframe используя :
Вы можете передать DOM-элемент для определённого iframe :
Вы можете передать CSS селектор для определённого iframe:
Вы можете передать глобальный объект Window для определённого iframe:
Для переключения контекста видимости обратно к окну верхнего уровня, введите без аргументов:
Предположим у нас есть документ, который содержит iframe:
В этом iframe определена новая функция:
Вы можете переключиться на контекст iframe например так:
Сейчас вы сможете видеть, что глобальный объект Window это теперь наш iframe:
и сможете выполнить вызов функции, определённой в этом iframe:
{{ page(«/en/Using_the_Web_Console/Helpers», «The commands») }}
Rules view
The Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific. See above.
See Examine and edit CSS for more details.
The Layout view displays the box model of the page. If the page includes any sections using either the Flexbox display model or CSS Grids, this view shows the Flexbox or Grid settings used on the page.
To learn more about the Layout view, see Examine and edit the box model. Note that before Firefox 50, the box model view did not appear in the «Layout view» tab, but had its own tab.
When you are editing in the Rules view, you can see the changes you have made in the Changes view.
The Computed view shows you the complete computed CSS for the selected element (The computed values are the same as what getComputedStyle would return.):
To learn more about the CSS declarations listed in this view, see .
Starting with Firefox Developer Edition version 77, the Compatibility view shows CSS compatibility issues, if any, for properties applied to the selected element, and for the current page as a whole. It shows icons for the browsers that do support the properties, and notes properties that are experimental or deprecated.
- Click the name of the property to open the reference article for that property on MDN Web Docs. The «Browser compatibility» section of the article gives details of browser support for the property.
- In the All Issues section, click the name of the element that uses the property to select that element in the inspector. If more than one element has a given property applied to it, click the triangle to show all the occurrences.
- To configure the set of browsers you want the Compatibility view to check for, click Settings at the bottom of the panel.
Untick the checkbox for any browser you are not interested in. As new browser versions are released, the version numbers in this list will be updated.
The Fonts view shows all the fonts in the page along with editable samples.
See View fonts for more details.
The Animations view gives you details of any animations applied to the selected element, and a controller to pause them:
See Work with animations for more details.
Расширение инструментов разработчика
Инструменты разработчика предназначены для расширения. Дополнения 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.
Extensions
With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.
You don’t have to package or sign the extension before loading it, and it stays installed until you restart Firefox.
The major advantages of this method, compared with installing an add-on from an XPI, are:
- You don’t have to rebuild an XPI and reinstall when you change the add-on’s code;
- You can load an add-on without signing it and without needing to disable signing.
Once you have loaded a temporary extension, you can see information about it and perform operations on it.
You can use the following buttons:
- Inspect
- Loads the extension in the debugger.
- Reload
- Reloads the temporary extension. This is handy when you have made changes to the extension.
- Remove
- Unloads the temporary extension.
Other information about the extension is displayed:
- Location
- The location of the extension’s source code on your local system.
- Extension ID
- The temporary ID assigned to the extension.
- Internal UUID
- The internal UUID assigned to the extension.
- Manifest URL
- If you click the link, the manifest for this extension is loaded in a new tab.
If you install an extension in this way, what happens when you update the extension?
- If you change files that are loaded on demand, like content scripts or , then changes you make are picked up automatically, and you’ll see them the next time the content script is loaded or the popup is shown.
- For other changes, click the Reload button. This does what it says:
- Reloads any persistent scripts, such as
- Parses the file again, so changes to , , or any other keys take effect
The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:
The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.
Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.
Note: It’s recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.
The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.
Note: This list may include add-ons that came preinstalled with Firefox.
If you click Inspect, the Add-on Debugger will start in a new tab.
See the page on the Add-on Debugger for all the things you can do with this tool.
Основные инструменты
Вы можете открыть Средства Разработчика 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 и макета.
Режим адаптивного дизайна
Позволяет увидеть, как будут выглядеть и работать ваши сайты или приложения на различных устройствах или типах сетей.
Инспектор доступности
Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.
Изучаемые темы
Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.
- Начало работы с вебом
- Практическое введение в веб-разработку для начинающих.
- Изучение HTML: руководства и уроки
- HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.
- CSS: стилизация веб-страниц
- CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.
- JavaScript: разработка клиентских скриптов для динамических веб-страниц
- JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.
- Веб-формы: работа с пользовательскими данными
- Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.
- Доступность: сделаем интернет доступным для всех
- Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.
- Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми
- Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
- Инструменты и тестирование
- В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.
- Серверное программирование веб-сайтов
- Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).
Tutorials
Learn how to use HTTP with guides and tutorials.
- Overview of HTTP
-
The basic features of the client-server protocol: what it can do and its intended uses.
- HTTP Cache
-
Caching is very important for fast Web sites. This article describes different methods of caching and how to use HTTP Headers to control them.
- HTTP Cookies
-
How cookies work is defined by RFC 6265. When serving an HTTP request, a server can send a HTTP header with the response. The client then returns the cookie’s value with every request to the same server in the form of a request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.
- Cross-Origin Resource Sharing (CORS)
-
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, an HTML page from Domain A () makes a request for an image on Domain B () via the element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.
- Evolution of HTTP
-
A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.
- Mozilla web security guidelines
-
A collection of tips to help operational teams with creating secure web applications.
- HTTP Messages
-
Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.
- A typical HTTP session
-
Shows and explains the flow of a usual HTTP session.
- Connection management in HTTP/1.x
-
Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.
Запуск сервера отладчика
Далее нужно стартовать сервер отладчика в отлаживаемом 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 с другого компьютера, то измените её, но только в безопасной сети или за файерволом, чтобы предотвратить несанкционированный доступ.
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.