1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Настройка времени выполнения

Настройка времени выполнения

Время выполнения это среда где вы будете выполнять и отлаживать приложение, такое как веб браузер. Время выполнения может быть:

  • экземпляр Firefox, или настольная версия или экземпляр Firefox дляAndroid запускающаяся на телефоне
  • устройство запускающее Firefox OS, или Firefox OS Симулятор установленный на рабочем столе
  • различные браузерные движки, такие как Google Chrome или Safari, запускающиеся на рабочем столе или на мобильном устройстве.

В WebIDE, вы будете использовать боковую панель в правой стороне для управления временами выполнения:

В этой боковой панели времена выполнения сгрупирированны в четыре типа:

USB УСТРОЙСТВА Устройства Firefox OS подключены через USB. С Firefox 36 это также позволяет вам подключиться к Firefox for Android over USB. WI-FI УСТРОЙСТВА Устройства Firefox OS подключены через Wi-Fi. Новое в Firefox 39. СИМУЛЯТОРЫ Экземпляры установленного вами симулятора Firefox OS. ДРУГИЕ Удаленные среды выполнения для подключения WebIDE к произвольному хосту и порту. Если у вас есть Valence надстройка установлена, этот раздел также перечислит additional runtimes it enables.

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

Загрузите с веб-страницу Mozilla Firefox Developer Edition . Извлеките его с помощью file-roller и переместите папку в ее конечное местоположение. Хорошей практикой является его установка в /opt/ или /usr/local/ .

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

/.local/share/applications/firefox_dev.desktop , чтобы получить пусковую установку со значком, отличным от обычного Firefox.

Чтобы запустить его, выполните поиск Firefox Developer и просто запустите двоичный код firefox и voilÃ.

Обратите внимание, что при установке вручную, F.D.E. по умолчанию не имеет единственного глобального меню.

Firefox для разработчиков в настоящее время находится в Firefox Aurora строит: â € œUbuntu Mozilla Daily Team Team Team . Следует отметить, что:

«Firefox Developer Edition заменяет канал Aurora в процессе выпуска Firefox . Как и Aurora, функции приземлится в Developer Edition каждые шесть недель, после того как они стабилизируются в ночных сборках ». — Developer Edition — Mozilla | MDN #The_latest_Firefox_features

«Версия 35.0a2, впервые предложенная пользователям Firefox Developer Edition 10 ноября 2014 года» — Firefox — Aurora Notes (35.0a2) — основной контент Mozilla

Установите Firefox Developer Edition, ранее известный как Aurora, так:

В Mozilla PPA хранятся пакеты для поддерживаемых выпусков Ubuntu, а не выпуски EOL (End Of Life).

Обратите внимание, что установка с вышеупомянутым ppa приведет к замене вашей текущей версии Firefox!

Every week, we send out useful front-end & UX techniques. Subscribe and get the Smart Interface Design Checklists PDF delivered to your inbox.

If you do any kind of development for the web, then you know how important tools are, and you like finding tools that make your life easier. Developing and testing new browser features, however, takes time. Between the time a useful tool first appears in an experimental nightly build and the time it’s available for everyone to use in Firefox, a while has passed.

That’s one of the reasons Mozilla released Firefox Developer Edition in November 2014 as the recommended Firefox browser for developers. It gets new feature updates more quickly so that you can use the latest tools.

Of course, testing your websites in the standard Firefox release is still crucial. Thankfully, Developer Edition makes this easy by letting you run both programs side by side. Plus, Developer Edition comes with a slick new theme that matches its tools.

A Bit Of History

How far back do we go? Way back in 2001, a debugger called “Venkman” was available for Netscape Navigator version 7. The Netscape corporation had a system for UIs named XML User Interface Language (XUL). It also had a love of the movie “Ghostbusters” and its demonic character Zuul; so, Rob Ginder, who wrote that early debugger, had four options for naming his new debugger, and Venkman beat out Stantz, Spengler and Zeddemore.

Venkmann was just a JavaScript debugger. It couldn’t inspect the DOM or show network traffic. Netscape had a built-in console, but that was it as far as debugging tools went.

The next piece of the puzzle was the DOM inspector, which was released around 2004 or 2005. It wasn’t friendly to web developers, and it was about debugging XUL as much as HTML.

DOM Inspector add-on. (View large version)

So, in early 2006 Firefox had three pieces of the puzzle: a built-in console, a debugger and a DOM inspector — each separate and not all built in.

In late 2006 Joe Hewitt, who worked on the early release of Firefox, released Firebug version 1.0. Firebug broke new ground in allowing developers to view the DOM and in providing a JavaScript console and debugger and DOM inspector all in the same tool.

Firebug, an all-in-one developer tool. (View large version)

But Firebug was never an official Mozilla project, and with Joe’s departure to Parakey and then Facebook, the development of Firebug was taken up by a group of volunteers led by John J. Barton. Mozilla contributed to the project, supporting Honza Odvarko, who led the project after John left.

In 2011 Mozilla decided that it needed to put more effort into its developer tools and start from a clean slate to build some next-generation tools, while continuing to support the maintenance of Firebug.

One of the challenges with developer tools is that they need to reach deep into the platform to understand how the system works. They need to be a part of the browser and can’t easily be made as add-ons.

So, as Firefox gets updated, keeping Firebug running as a separate add-on becomes harder and harder. Upgrading the debugger APIs, which Firebug needed to keep up with, was significant work, and when the initiative to have separate browser and content processes in Firefox was announced, Mozilla decided to rebuild Firebug on top of the built-in tools.

A Solid Set Of Standard Features

Firefox’s DevTools have come a long way since their inception, quickly bridging the gaps between Firebug and other browsers’ developer tools. It now has all of the tools you’d expect from a browser. Let’s go through some of the main ones.

The page inspector has a a box-model highlighter, a CSS rules editor, a viewer for computed styles, fonts and layout, support for pseudo-elements, and a search tool.

The page inspector. (View large version)

The web console lists JavaScript, CSS, and network and security logs. It supports custom formatting, as well as previews and inspection of DOM nodes, objects and arrays, allowing you to search and filter them.

The web console. (View large version)

The JavaScript debugger lets you halt the execution of scripts at any point, navigate the call stack and inspect variables. It supports source maps, pretty printing of minified sources, and black boxing of library files. And it supports dynamically evaluated scripts.

The JavaScript debugger. (View large version)

The network monitor lists all requests that Firefox makes for a web page. It displays headers, responses and cookies, letting you search through them. It also shows a performance analysis of the page load.

The network monitor’s requests list. (View large version) The network monitor’s performance analysis. (View large version)

The performance tools give you insight into a website’s JavaScript and layout performance by recording browser activity over time and exposing frame-rate data, memory usage, JavaScript calls and browser-rendering events such as styling, layout and paints.

The performance tool’s waterfall graph. (View large version) The performance tool’s JavaScript flame chart. (View large version)

Some Key Differentiators

On top of the usual set of tools, Firefox has a number of neat features to make your life as a developer or designer easier. We’ll go over some of them now, but download Firefox Developer Edition and try them out for yourself.

Work With Animations

CSS animations and transitions are a great way to improve the UX of a website, but they’re also hard to get right, and they can easily get in the way instead of guiding the user’s flow. If you want your animations to look and feel just right, then you’ll need to spend time finetuning those keyframes, durations and timing functions. Firefox comes with a set of tools to help with just that. Let’s go through a few.

Timing function

The timing function drives the way that an animation or transition progresses through time. Timing functions are often described with a cubic-bezier curve. Coming up with the perfect curve is not straightforward; so, Firefox’s DevTools comes with a tooltip that allows you to modify a curve visually or even choose from a list of presets.

CSS animations are described with a set of @keyframe rules. Firefox displays these keyframe rules in the view for CSS rules when the selected element is animated, so that you can directly edit them there, where you’d expect. You can even edit keyframe properties while an animation is playing.

Animation inspector

The animation inspector allows you to view all individual animations on a page, detect when they get added or removed, as well as pause them at any point, slow them down or speed them up. It’s a powerful feature for looking at animations in detail.

Test on Multiple Devices, Browsers and Screens

When it comes to making sure a website displays correctly for everyone, things are a lot more complex than they used to be. We now have to deal with many aspect ratios and pixel densities, as well as many browsers on all sorts of operating systems and devices. Thankfully, Firefox comes with tools just for this.

Responsive design view

The responsive design view makes it really easy to see how a website looks at different screen sizes. Either choose a size from the list of presets or adjust the size to anything you want by entering custom dimensions or dragging the viewport. The responsive design view can quickly be toggled from the keyboard (Command + Alt + M or Control + Shift + M) or by clicking the corresponding icon in the DevTools toolbar.

Читать еще:  Морфологическая фильтрация AMD что это
Valence

Valence is an add-on that comes preinstalled with Firefox’s WebIDE. WebIDE already allows you to connect Firefox’s DevTools to any website or app on Firefox OS and in Firefox for Android. Now, with Valence, you can also connect the tools to Chrome on Android and the desktop and to Safari on iOS and Mac OS X. Valence gives you pretty much all you need for multi-browser testing without having to leave the DevTools you’re used to.

Developer toolbar

The developer toolbar has a handy media command that’s useful for emulating any media type in the browser. It’s very useful for testing your website’s print CSS, for instance.

Discover, Use and Understand Complex CSS Features

CSS can be complex. Some strings of syntax are hard to remember, some you might not even know about, and others, even ones you know of, have effects that are hard to predict. Firefox’s DevTools, being built into the browser, are ideally positioned to give you all of the information necessary to work with the syntax. Let’s see some examples.

CSS properties tooltips

The CSS properties tooltips help you remember the different values and syntax constructions that properties can have. Firefox makes it super-easy to get documentation for any CSS property directly in the tools where you need it. Right-click on any property’s name in the CSS rules editor to get documentation in a tooltip, with a list of possible values and documentation about them, too.

CSS transforms previewer

The CSS transforms previewer helps you understand how a given set of transform functions have changed an element. The transform property is the sort of CSS property that is hard to get right just by looking at the code; a visual rendering of what has happened is usually much better. The CSS transform previewer highlights the element as it was before and after it got transformed, so that you can easily see the effect of the transformation.

CSS filter tooltip

Filters are a relatively new feature in CSS and really powerful. With them, you can blur, add shadow or rotate the colors of any element simply. Writing a valid CSS filter function isn’t the easiest thing in the world, and you can chain as many functions as you want, so Firefox’s DevTools has a handy tooltip that allows you to create filters in a simple and visual way.

Miscellaneous Tips and Tricks

Ever need to take a screenshot of all or part of a page? Capturing web pages or parts of web pages as images is a powerful way to show a design or a bug to other people. Doing this in Firefox is easy, either by right-clicking on any node in the page inspector or by using the full-page screenshot button in the toolbar (make sure it’s enabled in the options panel first).

Eyedropper tool

The eyedropper tool is useful for sampling any color from a page. If you need to copy the color of any part of a web page or want to change the color on an element’s CSS property, then use the eyedropper. In the CSS rules view, with an element selected, click on the color swatch next to any color property’s value to change it. Or, in the developer menu bar, choose the eyedropper item to copy colors from the page.

Highlight all elements that match a selector by clicking on the selector icon in the CSS rules view.

CSS rules view search bar

Filter styles using the CSS rules view search bar. This might be helpful if you’re not sure which property has overridden another.

Closing Words

Firefox’s DevTools have evolved quite rapidly in recent years, and feature-packed versions are now getting released every six weeks. The project is being driven by an active community, which you can be a part of!

Feel free to download Firefox Developer Edition to try out the latest version of the tools. And stay up to date on new features at Mozilla Hacks.

Interface Design Checklists (PDF)

100 practical cards for common interface design challenges.

Click!

A guide to increasing conversion and driving sales.

Front-End & UX Workshops, Online

With practical takeaways, interactive exercises, recordings and a friendly Q&A.

Browse All Smashing Magazine Topics

  • Accessibility
  • Android
  • Animation
  • Apps
  • CSS
  • Design
  • Design Patterns
  • Design Systems
  • E-Commerce
  • Freebies
  • Graphics
  • HTML
  • Illustrator
  • Inspiration
  • iOS
  • JavaScript
  • Mobile
  • Pattern Libraries
  • Performance
  • Photoshop
  • Plugins
  • React
  • Responsive Web Design
  • Service Workers
  • Sketch
  • Typography
  • UI
  • Usability
  • User Experience
  • Wallpapers
  • Web Design
  • WordPress
  • Workflow

With a commitment to quality content for the design community.

Founded by Vitaly Friedman and Sven Lennartz. 2006–2020 .

Firefox для разработчика

За последнее время у Mozilla произошло несколько знаковых событий. Во-первых, это юбилей Firefox. Десять лет назад группой хакеров, именующих себя Mozillian, была выпущена первая версия огнелиса — браузера, который разрушил монополию Internet Explorer с 95% долей рынка. Во-вторых, в продолжительной конкурентной борьбе за производительность с Chrome движок SpiderMonkey обошел V8 на собственных тестах Google. Ну и в-третьих, это, конечно же, релиз Firefox Developer Edition.

Firefox Developer Edition заменит существующий канал разработки Firefox Aurora, и в него будут попадать нововведения из Firefox Nightly. Также сохранится шестинедельный цикл разработки браузера: Nightly — Developer Edition — Beta — Release. Тем самым у разработчика будет 12 недель до того, как нововведение попадет в релиз. Новый браузер использует отдельный пользовательский профиль, что позволяет запускать его одновременно с обычным Firefox.

Свежий дизайн

Обновленный интерфейс ускоряет доступ к инструментам для разработчиков и по умолчанию использует новую темную тему оформления. Но ты также можешь переключиться на классическую или установить любую стороннюю тему и расширение. Изменения также коснулись внешнего вида окна настроек.

Изменения внешнего вида окна настроек

Хакер #192. ZeroNights–2014

  • Содержание выпуска
  • Подписка на «Хакер»

Кнопка «Забыть»

Не остались без внимания и проблемы секьюрности: на приборной панели браузера появилась кнопка «Забыть», при нажатии на которую удаляется информация о cookie, истории, открытых вкладках и окнах за последние пять минут, два часа или сутки.

Кнопка «Забыть», при нажатии на которую удаляется browsing data для текущего сайта

Firefox Hello

Многие уже, наверное, слышали про WebRTC, а возможно, даже экспериментировали с ней. Так вот, при поддержке компании Telefonica в новом гиковском Firefox добавились звонки и видеозвонки именно на этой технологии. А называется этот «браузерный Skype» Firefox Hello.

О самом главном

Ну вот мы плавно добрались до самого главного — инструментов для веб-разработчиков, акцента и первопричины появления данного браузера. В целом сообщество отреагировало более чем положительно, многие говорили, что в свое время перешли от Firefox к Chrome только из-за DevTools, а сейчас настало время возвращаться обратно. Но также встречались высказывания, что ничего нового не появилось, а просто взяли все, что было, и по-другому оформили. Хочу заявить, что это абсолютная ложь. Команда Firefox заметно улучшила существующие и предоставила совершенно новые инструменты для разработчиков.

  • Более продвинутая отладка JavaScript.
  • Усовершенствован веб-инспектор, в нем появилось окно с используемыми шрифтами, и он наконец-то начал отображать в DOM псевдоэлементы before и after .
  • Преобразились инструменты для работы с отзывчивым дизайном.
  • Редактор стилей с первоклассным автозаполнением позволяет редактировать CSS-файлы прямо в браузере.
  • Более информативные консоль и мониторинг сети.
  • Scratchpad для исполнения JavaScript на лету.
  • Переключатель между online- и offline-режимами.
  • Очень удобный колорпикер.

WebIDE — интегрированная среда разработки

WebIDE была введена как бета-функция (недоступная по умолчанию) в Firefox 33, а теперь официально включена в Developer Edition. С помощью WebIDE, заменяющей менеджер приложений, ты можешь разрабатывать, развертывать и отлаживать приложения Firefox OS прямо в браузере или на устройстве Firefox OS. Функция автозаполнения, функция вспомогательного экрана, доскональная проверка — некоторые из новинок. Ты можешь также приостановить приложение и осмотреть элементы со встроенным отладчиком.

Эмуляторы для тестирования приложений в различных версиях FFOS

Valence — кросс-браузерная разработка и отладка

Изначально это расширение называлось Firefox Tools Adapter. Valence предназначен для того, чтобы тестировать проекты с различных устройств (например, Chrome для Android, Safari на iOS) и изменять веб-контент, моделируя интерфейс Firefox.

Valence — удобный инструмент для кросс-браузерной отладки приложений

Web Audio Editor

Позволяет взаимодействовать с Web Audio API в режиме реального времени.

Выводы

В принципе, я перечислил все основные нововведения. Не знаю, как у вас, но я испытываю только положительные эмоции от работы с Firefox Developer Edition. Возможно, у меня предвзято хорошее отношение к самому производителю за их открытость, альтруизм и желание сделать веб лучше.

Сделали ли в Mozilla что-то кардинально новое и инновационное? Нет, и с этим никто не спорит. Даже на их лэндинге написано «It’s everything you’re used to, only better». А вот с этим утверждением я абсолютно согласен.

Илья Пестов

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

The perfect fit for developers?

To sum things up, we are excited to see Mozilla’s latest release of this stand-alone developer browser for its 10th anniversary. It’s comfortable to have a one-stop tool kit for your browser, although we’re still missing some nice features in the new Firefox (such as network throttling).

It remains to be seen if a lot of developers turn their back on Chrome and head back to Firefox. For the time being we go with the well-known Firefox developer tools and the Google Chrome DevTools.

What’s your opinion on the new Firefox browser?

This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.

Особенности

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

WebIDE :

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

Web IDE – YouTube

Валенсия :

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

Читать еще:  LGA1151 и LGA1150 что лучше

Отзывчивый дизайн :

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

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

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

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

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

Отладчик JavaScript :

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

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

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

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

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

Редактор веб-аудио :

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

Ссылка :

Mozilla представляет первый браузер, созданный для разработчиков: Firefox Developer Edition ✩ Mozilla Hacks – блог веб-разработчиков

Firefox – Aurora Notes (35.0a2) – Mozilla ( примечания к выпуску Firefox Developer Edition)

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

Firefox Developer Edition – Mozilla

Firefox Aurora строит: команда Ubuntu Mozilla Daily Build Team

Developer Edition – Mozilla | MDN

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

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

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

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

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

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

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

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

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

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

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

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

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

Извлеките файл вручную в /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.

Откройте терминал и введите:

/ .local / share / applications –create-new

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

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

  • GTK + 2,18 или выше
  • GLib 2.22 или выше
  • Pango 1.14 или выше
  • X.Org 1.0 или выше (рекомендуется 1.7 или выше)
  • libstdc ++ 4.3 или выше

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

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

  • NetworkManager 0.7 или выше
  • DBus 1.0 или выше
  • HAL 0,5,8 или выше
  • GNOME 2.16 или выше

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

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

если вы находитесь в папке «Загрузка» [credit @ blade19899]:

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

[Desktop Entry], как указано в ручной установке.

A Look Into: Firefox Developer Edition

After a short tease, Mozilla has officially released Firefox Developer Edition. It’s a new browser aimed specifically at web developers. Although it hasn’t been announced officially, it looks like it will be replacing Firefox Aurora at some point.

Judging from the name, the official announcements and the landing page it looks like Firefox Developer Edition is the first large browser built for development, not just supporting it. It contains a multitude of debuggers, panels and other utilities, plus it uses its own profile so it can be run alongside regular Firefox more easily. Let’s take a look at what it offers.

User Interface

The interface changes in the Developer Edition already hint at a developer-centric approach. The toolbar is noticeably narrower than both Chrome and regular Firefox while adding more buttons by default.

It’s fairly obvious that the new default theme is dark, which is possibly the result of some clever UI testing. It is extremely important to find everything at a glance while developing. A one second delay in finding something could amount to hours a month. I personally prefer the light colors for casual use, but the dark UI was great in my initial tests.

If you prefer the default theme you can switch the developer edition theme off very quickly using the “Use Firefox Developer Edition Theme” button by going to Menu -> Customize.

On the other hand, there are some interface choices which puzzle me. I’m fairly sure that bookmarking will be far less used in this version and most developers know the Ctrl / Cmd + D key combination to make it happen. The fact that there is a dedicated button for this; the bookmarks section, the downloads section, even the Developer Edition start page seems a bit unnecessary.

First Impressions

My first impression was that there’s nothing I haven’t seen before here. This is even reinforced by Mozilla on the landing page:

“It’s everything you’re used to, only better”

Developer tools handle about the same as they do on regular Firefox, WebIDE and Valence can already be used. Only slight cosmetic changes make the Developer Edition different than Firefox.

That being said, there is an underlying feeling of a good direction here. It seems very much like Mozilla has been waiting to create this version of Firefox for a while, they were just waiting for a critical mass of developer tools and know-how. It feels like they’ve created a framework in which to place future tools and methodologies and put them to the test.

In more developer-friendly lingo: it seems like the Developer Edition is a fork of the regular version which was made just now, with a few tweaks. From here on out, development will intensify and focus specifically on this product, separating it from regular Firefox and making it the go-to place for developers. Or at least that is the intention.

One of the biggest indications of how Mozilla plans to position the Developer Edition is the inclusion of Valence (more on this later). Mozilla’s stance on Valence is this:

“The Adapter is still in its early stages, and is available only as a preview. We do not yet recommend using it for day-to-day work.”

It seems that the Developer Edition will receive tools earlier than regular versions of Firefox. While it doesn’t seem likely that Mozilla will remove developer features from Firefox, perhaps some upcoming ones will only be added to the new Developer Edition. I for one support keeping bloat out of browsers and welcome this new direction.

WebIDE

One of the most prominently advertised features is WebIDE. Added in Firefox 34, it is a replacement for the App Manager – it enables you to run edit and debug Firefox OS applications using the Firefox OS simulator or an actual device. In other words, it is what Xcode is for iOS.

Valence

Valence is essentially a cross-browser debugging tool. It allows the developer tools to work with a wide array of browsers. At the moment the main targets for Valence are Chrome on Android and Safari on iOS. The technical details of this are a bit difficult to comprehend, so have a look at this video done by Mozilla:

Developer Tools

If you’re familiar with developer tools in regular Firefox, then it’s pretty much what you’d expect. Invoke it using Ctrl / CMD + I or right-click on an element and click “Inspect Element”.

Inspector

The Inspector gives you a collapsible tree view of the page DOM. When you hover over an element in the DOM, it is highlighted on the page which is super-helpful for figuring out dimensions and where things are in general.

Doing it the other way around is even more helpful. By clicking on the top right icon as per in the screenshot above, you can cruise through the page and elements will be highlighted under your cursor. In many cases, this is a more viable way of inspecting something when it is in the midst of overlapping elements.

The Inspector allows you to double-click to edit the contents or properties of an element. One trick which may be useful to know is that the DOM can be traversed using the arrow keys, you can even delete and undelete using the delete key and Ctrl / Cmd + Z command.

Clicking and dragging in the DOM will highlight a portion of the DOM, the bounds will be shown on the web page, another great tool for visualizing your HTML structure and CSS code.

The CSS rules for any given element shows up in the sidebar giving you a quick read and easy editing access.

Console

The console is a window that shows aggregate information from CSS, JS, Net, Security and Logging. It is mostly used for Javascript debugging and tracking down missing resources but can also be used to issue commands, even via jQuery.

Debugger

The console is great for quickly logging some script issues and making sure your code works on the first try. If you want to figure out some more complex problems, you’ll need to use the debugger.

By setting breakpoints in your code, you can pause the execution of the Javascript code before that point. You can view where the execution is in the code and you can modify variables before moving on.

Читать еще:  Что такое ISBN и зачем он нужен

This not only enables you to figure out bugs but also lets you test various use cases pretty quickly. It won’t replace unit testing but it will give you deeper insight and a great companion to them!

Style Editor

The style editor is a great place to write styles and see the results applied live. You can select any of the stylesheets loaded or you can import and create new ones on the fly. Any modified file can be saved easily.

While this is an amazingly handy feature for little tweaks, it isn’t so convenient for more complex environments that work with preprocessors. These environments can be set up, but the overhead of doing so is about the same as using a preprocessor which has live reload enabled.

Performance

The performance tool was introduced with Firefox 34 and is a replacement for the JavaScript sampling profiler. It allows you to create extremely detailed performance profiles down to the the toll that reflows and paints, Javascript and CSS parsing takes and more.

Profiles can be saved and imported easily, so you can compare profiles to make your applications streamlined to the extreme!

Timeline

The timeline tool is not available in the regular version of Firefox by default, it enables you to see what operations are performed by the browser engine. The tool will display reflows (layout), restyle, paint, console and DOM events.

Network

The Network tab is great for gaining insight into the requests that your website makes while it loads and while it is being used by users. It provides an overview of resources and status codes, along with the time it took to load and when the loading took place.

The bottom filter allows you to look at specific asset types, a particularly useful tool for figuring out AJAX calls using the XHR type.

Clicking on any asset displays its response and request headers, cookies, parameters, response and timings.

One of the most useful features is the ability to start a performance analysis on your website by right clicking and choosing the appropriate option. This will bring up two pie charts which compare a cached and an un-cached load.

Responsive Design Mode

The responsive design mode allows you to view how your site will look in different sized windows. This is not a true emulator so results may vary somewhat, but it is great for previewing the outcome of media queries.

Once in responsive mode you can switch between preset screen sizes, click and drag for custom sizes, change orientation and simulate touch events.

When developing, I usually change the browser window width and leave it be until I’m done but I find that the responsive design mode is great for final checks and for looking at states in-between breakpoints.

Conclusion

In a nutshell: while there aren’t a lot of brand-spanking new features for developers who keep up with Mozilla news, the direction is very promising. I look forward to a lot of tool-specific features like Coffeescript, Sass, Less and others.

Perhaps even compiler and other processing tools could be added to make Firefox Developer Edition a true developer package, and not just something we use to look at our end result with.

As a seasoned developer, I already have tools to compile my scripts, create final builds, automate general programming tasks, error-check my code and live-reload my browser. If a browser would offer some of these features, it may make some aspects of my work a lot faster. I’ll be following this project with great interest and I suggest you do too.

If you have any thoughts or already have some experience with the Firefox Developer Edition, let us know what you think in the comments.

Valence

Valence is an add-on for Firefox that enables the Firefox Developer Tools to remotely inspect / debug Gecko-based browsers, Chrome, and Safari on iOS. The debug “target” can be an iOS device or a Chrome desktop browser (using the —remote-debugging-port=9222 special “flag” to allow remote inspection — see the Chrome Desktop setup paragraph on the Valence site for instructions) or Firefox OS. Valence, unfortunately, cannot inspect Android device emulators, or older Android devices, but UIWebViews and Simulators on iOS can be inspected — although I haven’t tried it, since I don’t own an Apple computer.

The smartphone / tablet must be physically connected to your computer and if you are using Windows, you will probably need to install USB drivers for your device, which may or may not even exist! Windows users will also have to install iTunes if they need to inspect iOS. Lastly, developer mode and/or USB debugging must be enabled — please remember to deactivate the settings when your work is done! Valence is rather limited at the moment, and somewhat unstable as an early beta can be, but it is a promising tool.

Valence in Action

Inspecting the HTML source and styles of a Chrome browser on an Android 5 smartphone:

Any site can be inspected:

Adding color attributes to SVG paths, to change the logo:

Ok React… thank you for leaving the console message for me below!

Here is an example of debugging JavaScript:

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Тёмный Хабр на тёмном Файерфоксе с нативным инспектором — так новость, оформленная из него самого (Fx35 Dev), смотрелась бы в тему :):

Но вообще, непонятно, почему такой апломб. Поиск показывает, что Fx постоянно занимается выпуском девелоперской версии, да и сейчас — ftp.mozilla.org/pub/mozilla.org/firefox/nightly/ — каталог, из которого предлагается скачивать — это обычный девелоперский канал. Заметное добавление — WebIDE для работы с проектами, расположенными в сети. Но это — скромное начало долгого пути, который неизвестно, будет ли ещё пройден компанией. Сравните имеющуюся оболочку

На самом деле, некоторые вещи там сделаны лучше, некоторые хуже. Со временем встроенные инструменты стали достаточно удобными и теперь Firebug не обязателен к установке.

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


Знать бы, как намертво удалить мозильские developer tools из «релизного» (массового) бруазера — уже был бы хлеб. И сделать плагином их установку, для тех, кому надо. А то я не пойму: релизный, массовый браузер суть несет в себе отладчик, что, как бы, несколько увеличивает и вес, и объем, и сложность кода. Это как если бы Автоваз (ну хорошо, Хонда) прикладывала бы к своим машинам еще и подъемник, на случай если клиент масло решит себе поменять — притом не спросив юзера, и за его деньги )

Я так понимаю: поставил я себе ядро браузера — уже могу смотреть веб. Понадобилось мне смотреть flash — доставил плагин. Захотел сайты отлаживать — поставил Firebug. Захотел… что угодно — поискал плагин. Зачем все валить в одну коробку, тратя силы на поддержку лишнего — не понятно.

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

Тем более, что Мозилла и так имеет, на что потратить силы разработчиков.

И уж помочь ребятам из Firebug ускорить работу их детища, чем пилить свое — не было бы лучше?

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

Для этого надо, чтобы парень из Яндекса долго и нудно поработал в тех самых инструментах разработчика в Лисе.

И уж помочь ребятам из Firebug ускорить работу их детища, чем пилить свое — не было бы лучше?

Для этого надо, чтобы парень из Яндекса долго и нудно поработал в тех самых инструментах разработчика в Лисе.

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

Можно много разводить разговоров, но решать проблемы юзеров, на не свои — обычно это делает продукт ближе к юзерам же. Опенсорс в этом смысле ничего не убавит и не добавит: хорошо бы, чтобы продукт был «для людей».

Ууу, как вы отбрили 🙂 Тем не менее, не соглашусь.

У Мозиллы вообще много идей, да мало хорошо сделанных идей. Примеры вы и сами привели, я лишь к тому, что хорошие девелоперы — это еще не все для безусловного успеха. А сам факт, что FF и TB при этом есть и будут на рынке, показывает, каков этот рынок.

Вспомните теперь, почему мы все (включая и наших родителей — но нашими с вами руками) не сидим на IE — он слишком сложен и слишком многое умеет (благодаря интеграции с ОСью), чтобы считаться безопасным. Теперь его конкуренты подросли, и начали толстеть. Хорошо ли это?

Пример старой доброй Оперы, когда браузер — суть этакий «швейцарский нож» — показывает, что комбайн нужен не всем, и используется, если он быстр, удобен, и привычен. То же, в общем, за что vi/vim любят. Но посади тупую секретаршу за текстовый процессор с мощностью vim — и сразу захочешь, чтобы фич в нем было поменьше, а то она себе в ногу выстрелит отнюдь не водой.

Так вот давайте скажем честно: если FF — браузер для разработки, сил Мозилле девать некуда, а конкуренция — это так, фигня, то devtools там к месту и не следует их трогать. Если же это браузер «для людей» (что выход сборки для разработчиков как раз и подтверждает), то сделайте два варианта, «для всех» и «для девелоперов», и все станет мило и логично.

OpenSource — это не когда «у нас тут много сил и кода, лови +10 Мб», а когда есть свобода внешним разработчикам внести свой вклад в разработку не самой центральной подсистемы (которая у Мозиллы, простите, получилась несколько хуже, чем у команды Firbug).

Что же касается вашего общения со шрифтами — полагаю, если бы во всплывающем по ПЩМ меню была команда «настроить шрифты», вы бы чаще задумывались, с какой целью она там выведена для всех пользователей. И вы таки передергиваете: шрифтодвижок — сердце движка рендера, куда браузер без понимания относительных размеров объектов? А вот отладчик — это, и правда, полезно, но не обязательно. Вам с машиной, хорошо, не подъемник, но мультиметр же не кладут (хотя он и прикольный), правда?

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector