Browser console

7 ответов

Издатель Firefox Developer Edition доступен как часть Ubuntu Make:

. После этого просто запустите установщик Firefox как пользователь (не используйте sudo в этом случае):

Он предложит вам установить Firefox, а затем загрузить его автоматически и установить.

Если вы используете ubuntu (единство), в панели запуска добавлен новый значок Firefox Developer Edition. Нажмите здесь, чтобы запустить только что установленный Firefox Developer Edition.

Firefox Developer Edition запросит автоматическое обновление (не будет использовать apt).

ответ дан
24 May 2018 в 01:59

, чем просто искать его в единстве

ответ дан
24 May 2018 в 01:59

Загрузите файл tar.bz2 с https://www.mozilla.org/en-US/firefox/developer/. В терминале извлеките tar (tar xvjf filename.tar.bz2). Перейдите в новый каталог, в котором были файлы. извлекается в. Для меня он назывался firefox/ Тип ./firefox

ответ дан
24 May 2018 в 01:59

Одна вещь, которую вы можете сделать, если у вас нет установленной gnome-panel / gnome-desktop-item-edit, создает файл .desktop вручную.

Вы можете запустить это:

, тогда вы можете поменять nano на любое приложение, которое вы хотите использовать):

и ввести следующее (или изменить его, как вы как):

ответ дан
24 May 2018 в 01:59

Это добавит ежедневную сборку firefox в ваши репозитории и установит firefox-dev. Начиная с написания этого сообщения, эти номера версий соответствуют (35.0a2).

ответ дан
24 May 2018 в 01:59

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

Загрузите версию разработчика firefox здесь: https://www.mozilla.org/en-US / firefox / developer / Извлечь файл вручную на /opt/firefox/ Открыть Nautilus: Перейти к Edit->Preferences-> Behavior-> click on «Run
executable text files when they are opened» Перейти к файлу ‘firefox’ в /opt/firefox/ Щелкните правой кнопкой мыши и выберите Properties—> Permissions—> Execute: Allow
executing file as a program. Откройте терминал и введите: gnome-desktop-item-edit ~ / .local / share / applications —create-new

Создайте ярлык, и все готово!

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

Загрузите версию разработчика firefox здесь: https://www.mozilla.org/en-US/firefox/ разработчик / GLib 2.22 или выше Извлеките файл вручную /opt/firefox/ X.Org 1.0 или выше (рекомендуется 1.7 или выше) Open Nautilus: перейдите к Edit->Preferences-> Behavior-> click on «Run
executable text files when they are opened»

libstdc ++ по умолчанию не включен в Ubuntu.

Для оптимальной функциональности рекомендуются следующие библиотеки или пакеты:

GLib 2.22 или выше DBus 1.0 или выше X.Org 1.0 или выше (рекомендуется 1.7 или выше) Перейти к файлу ‘firefox’ в /opt/firefox/

Чтобы установить пакет, откройте терминал и введите

Мне не удалось запустить исполняемый скрипт, содержащийся в файле «firefox» в каталоге firefox.

ответ дан
24 May 2018 в 01:59

Предполагая, что вы находитесь в папке «Загрузки» :

теперь скопируйте и вставьте ….

, как указано в ручной установке.

ответ дан
24 May 2018 в 01:59

What skills do I need?

Mozilla is a large project and we are thrilled to have contributors with very diverse skills

Below is a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.

Project Skills Documentation/onboarding
Firefox browser (core layers) C++ Firefox developers documentation
Firefox (front-end) JavaScript and/or HTML/CSS Firefox developers documentation
DevTools JavaScript and/or HTML/CSS Contribute to DevTools
Add-ons JavaScript and/or HTML/CSS Contribute to Add-ons
Firefox for Fire TV Java Contribute to Firefox for Fire TV
Firefox Preview (mobile browser, codename: «Fenix») Kotlin Contribute to Firefox Preview
Firefox for iOS Swift Contribute to Firefox for iOS
Firefox Focus for iOS Swift Contribute to Firefox Focus for iOS
Mozilla Hubs JavaScript and/or HTML/CSS, VR Contribute to Mozilla Hubs
Servo Rust Contribute to Servo

There are even many ways to contribute to the Mozilla mission without programming. If getting involved in design, support, translation, testing, or other types of contributions sparks your interest please see community website.

Perhaps you do not know programming yet, but you want to start learning? There are plenty of resources available on the MDN Web Docs!

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.

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

Все, кто хочет испробовать возможности 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 (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 и макета.

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

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

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

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

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

Examining object properties

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..

Выделение и инспектирование узлов DOM

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.

Возможные проблемы при установке и их решение

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

Если пользователь хочет скачать определенную версию браузера, необходимый установочный файл, он сможет найти все на том же официальном сайте Mozilla. Разберем пример скачивания русской версии Firefox Developer Edition x64 для операционной системы Windows 10 c разрядностью 64 бит.

Архив инсталляторов всех версий программы на разных языках находится по адресу: https://www.mozilla.org/ru/firefox/developer/all/

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

Остается только выбрать инсталлятор для своей операционной системы и нажать кнопку «Загрузить».

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

Следуя его указаниям, нажимайте кнопку «Далее» и выбирайте устраивающие вас действия.

По завершении установочного процесса остается нажать кнопку «Готово» и приступить к работе с программой.

Firefox Developer Edition – это уникальный браузер, выпущенный компанией Mozilla специально для веб-разработчиков. Он обладает большим количеством полезных инструментов, которые по достоинству оценили многие пользователи. Его отличительная черта – высокая производительность, по которой он опережает конкурентов в разы. Даже если далеки от веб-разработки, вы по достоинству оцените преимущества этой программы и сможете использовать ее как простой браузер. А если захотите освоить новые навыки, то сможете найти полезную информацию в сообществе Mozilla Developer Network.

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.

Изучаемые темы

Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.

Начало работы с вебом
Практическое введение в веб-разработку для начинающих.
Изучение HTML: руководства и уроки
HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.
CSS: стилизация веб-страниц
CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.
JavaScript: разработка клиентских скриптов для динамических веб-страниц
JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.
Веб-формы: работа с пользовательскими данными
Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.
Доступность: сделаем интернет доступным для всех
Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.
Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми
Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
Инструменты и тестирование
В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развертывания и клиентские JavaScript-фреймворки.
Серверное программирование веб-сайтов
Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).

Browser Console command line

The Browser Console command line is disabled by default. To enable it set the preference to in , or set the «Enable chrome debugging» option in the developer tool settings.

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console’s command line interpreter, this command line supports , , and various and . If the result of a command is an object, you can .

But while the Web Console executes code in the scope of the content window it’s attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating :

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser’s UI by creating, changing and removing XUL elements.

Controlling the browser

The command line interpreter gets access to the object, through the global, and that enables you to control the browser through the command line. Try running this code in the Browser Console’s command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";

It adds a listener to the currently selected tab’s event that will eat the new page, then loads a new page.

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

Modifying the browser UI

Since the global object is the browser’s chrome window, you can also modify the browser’s user interface. On Windows, the following code will add a new item to the browser’s main menu:

var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

On macOS, this similar code will add a new item to the Tools menu:

var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);

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.

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.

Чем Firefox DE полезен для разработчиков?

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

  1. Проверить работоспособность сайта в различных браузерах;
  2. Протестировать адаптивность дизайна сайта;
  3. Узнать скорость загрузки сайта;
  4. Найти нужную часть кода для редактирования, и т.д.

Теперь теперь все это и даже больше доступно в одном инструменте.
Несколько основных функций браузера Firefox для разработчиков:

  • WebIDE – замена Менеджеру Приложений (App Manager) для создания и отладки приложений отладку приложений под Firefox OS.
  • Режим адаптивного дизайна – Тестирования любого сайта или веб-приложения для отображения на экране любого размера (например телефона), не изменяя размер окна браузера.
  • Valence – Инструмент разработки и отладки приложений в различных браузерах и устройствах.
  • Редактор веб-аудио – Инструмент тестирования Веб-аудио API в режиме реального времени будет полезен web ресурсам с аудио тематикой.
  • Инспектор страницы – Просмотр HTML и CSS любой страницы в удобном виде (аналог Firebug).
  • Веб-консоль – Доступ к логу информации, связанной с веб-страницей, веб-консоли для взаимодействия с веб-страницами с использованием JavaScript.
  • Отладчик JavaScript – Просмотр ошибок и редактирования JavaScript кода.
  • Монитор сети – Просмотр всех сетевых запросов браузера, отображение времени выполнения каждого запроса и другой технической информации.
  • Редактор стилей – Просмотр и редактирование Online CSS-стилей веб-страницы.

Функционал многим знакомого расширение «Firebug» – Отладочная консоль с DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest. (Показывает ошибки на вашем сайте) теперь встроен в браузер и называется «Инспектор».

Native developer tools in Firefox

We are working on building a great set of developer tools for you included in Firefox. They are described much more in detail in Developer Tools in Firefox Aurora 10 and there are some very interesting implications for what we can accomplish with them!

We are evaluating and experimenting with a number of user interfaces and code approaches to try and find the most optimal ways to work with code in a page. If you install Firefox Aurora you can try them out right now! Let us know what you think.

Also stay tuned to this blog, since we will post updates on progress and features for the native Developer Tools.

Клавиши быстрово вызова

Команда Windows OS X Linux
Открыть веб-консоль Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Искать в панели показа сообщений Ctrl + F Cmd + F Ctrl + F
Очистить Esc Esc Esc
Переместить фокус на командную строку Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Очистить

Ctrl + L

С Firefox 44:

Ctrl + Shift + L

Ctrl + L

Ctrl + L

С Firefox 44:

Ctrl + Shift + L

Интерпретатор командной строки

Эти клавиатурные сокращения работают, пока вы находитесь в .

Команда Windows OS X Linux
Прокрутить в начало вывода в консоль (новое в Firefox 34, и только при пустой командной строке) Home Home Home
Прикрутить в конец вывода в консоль (новое в Firefox 34, и только при пустой командной строке) End End End
Прокрутить вверх вывод консоли Page up Page up Page up
Прокрутить вниз вывод консоли Page down Page down Page down
Переместиться назад по Up arrow Up arrow Up arrow
Переместиться вперёд по истории команд Down arrow Down arrow Down arrow
Перейти в начало строки Home Ctrl + A Ctrl + A
Перейти в конец строки End Ctrl + E Ctrl + E
Выполнить текущее выражение Enter Enter Enter
Добавить новую строку, чтобы войти в режим ввода многострочного выражения Shift + Enter Shift + Enter Shift + Enter

Всплывающее окно автодополнения

Эти клавиатурные сокращения работают, когда открыто :

Команда Windows OS X Linux
Выбрать текущее предложение в окне автодополнения Tab Tab Tab
Закрыть окно автодополнения Esc Esc Esc
Перейти к предыдущему предложению в окне автодополнения вверх вверх вверх
Перейти к следующему предложению в окне автодополнения вниз вниз вниз
Прокрутить вверх предложения в окне автодополнения Page up Page up Page up
Прокрутить вниз предложения в окне автодополнения Page down Page down Page down
Прокрутить в начало списка (новое в Firefox 34) Home Home Home
Прокрутить в конец списка (новое в Firefox 34) End End End

Global shortcuts

Эти сокращения работают для всех инструментов, находящихся в окне набора инструментов.

Команда Windows OS X Linux
Увеличить размер шрифта Ctrl + + Cmd + + Ctrl + +
Уменьшить размер шрифта Ctrl + - Cmd + - Ctrl + -
Сбросить размер шрифта Ctrl + Cmd + Ctrl +
Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий