Got Firefox? Можно ли жить с Firefox в качестве основного браузера

Простите меня, отец, я согрешил. Firefox — мой основной браузер для работы и повседневного использования. После того как я исповедовался, хочу немного прояснить, что меня подвигло к написанию этой статьи. На работе я часто сталкиваюсь с непониманием, почему не Chrome? Почему FF?

После того как недавно вышла статья моего коллеги о полезных инструментах в Chrome dev tools, я решил, что нужно восстановить баланс силы и рассказать, за что же я люблю FF. Хочу рассмотреть те преимущества, которые помогли мне сделать выбор в пользу Firefox и о которых, возможно, знают не все.

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

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

Но этот график отлично демонстрирует кампанию Google по продвижению своего браузера вместе со своими сервисами. (Напомню, что Chrome предустановлен на большинстве Android-смартфонов, планшетов, а есть еще Chrome OS.) На этом с историей можно закончить, перейдем к теме статьи.

Начнем пересчет приятных фишек FF c инструментов, помогающих в разработке. Уточню, что все, что будет показано в этой статье, работает out of the box.

Визуализация

Eyedropper

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

Info icons в инструментах разработчика

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

Наводим на иконку и видим, что мы пытаемся применить justify-content не к контейнеру, а к элементу внутри, у которого не стоит ни display:grid, ни display:flex.

Визуализация flex- и grid-контейнеров

В инспекторе возле всех элементов, имеющих display:flex или display:grid, появляется такой значок, нажав на который можно увидеть размеры контейнера на странице.

Вот у нас есть страница с двумя контейнерами.

Нажимаем на grid, и у нас визуализируется разметка контейнера.

Перейдя во вкладку Layout, мы можем дополнительно визуализировать номера линий, имена area или растянуть линии до краев viewport.

Нажимаем на флекс — происходит то же самое со вторым контейнером.

Визуализация свойства transform

Предположим, у нас есть элемент, которому мы задали transform.

Наведя на значение этого свойства во вкладке Rules, получаем наглядную визуализацию того, как относительно своего изначального места смещен элемент.





Работает и с другими значениями.

Возможность сразу в браузере менять единицы измерения

Наводим мышкой на иконку pie chart, кликаем с зажатым Shift и меняем единицы измерения.

Shape Path Editor

Очень удобный инструмент для создания обтекаемой текстом картинки — Shape Path Editor. Если нужно быстро подправить обтекание и сразу увидеть результат, наводим мышкой на значок перед значением polygon и у нас на экране появляются все точки, которые сейчас указаны в свойстве.

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

Двойным нажатием на линии можно добавить точку, таким же нажатием точки можно ее удалить.

Shape-outside: circle




Shape-outside: ellipse




Вкладка Changes

Часто приходится вручную менять стили с помощью инспектора в браузере для страницы, чтобы сразу увидеть результат. Для того чтобы потом быстро перенести их в код, существует вкладка Changes, на которой собраны все изменения в CSS, которые вы внесли с помощью инспектора.

Можно скопировать все правила сразу:

Или для отдельного элемента:

Шрифты

Вкладка Fonts

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

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

Также можно развернуть пункт @font-face и увидеть стили для подключения шрифта на страницу:

Общее

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

Enhanced Tracking Protection

Встроенный в браузер adblock, который защищает пользователя от разнообразных трекеров и реклам. Вот от чего, по словам Mozilla, это защищает:

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

Вот эта иконка означает, что вы защищены, вас никто не отслеживает в этот момент (из известных трекеров, конечно же).

Нажав на нее, можно получить более подробную информацию о заблокированных трекерах.

Заходим в Social Media Trackers и видим следующее:

Нехороший Facebook отслеживает, что мы делаем вне его просторов.

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

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

Screenshot tools

В браузер встроен довольно неплохой тул для создания скриншотов.

В правом верхнем углу можно выбрать режим сохранения: вся страница или видимая область.

В первом случае копируется полностью сайт по высоте, во втором — только содержимое viewport.

Также при наведении можно копировать отдельные элементы на странице:

Бац — и вот результат такого копирования.

Или вот картинка, но на этот раз с текстом.

Send tab to device

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

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

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

Интеграция Pocket

Интеграция с Pocket Out of the box позволяет сохранять копии страниц для работы с ними в офлайне. Очень удобно перед выходом из дома или работы сохранить себе какую-то интересную статью в Pocket, открыть ее на телефоне в метро и читать, несмотря на отсутствие интернета или его плохое качество. Возможность добавлять теги позволяет во всем этом быстро ориентироваться и структурировать информацию.

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

Недостатки

Наверное, уместно будет добавить и некоторые негативные моменты при работе с браузером, а именно:

  • более скудный, чем у Chrome, магазин дополнений;
  • слабая интеграция Google-сервисов (естественно, в Chrome этому уделено больше внимания).

Честно говоря, больше ничего в голову не приходит, подскажите в комментах, пожалуйста, кто знает еще о чем-то. Все аддоны для работы (pixel perfect, react dev tools, redux dev tools) есть как в Chrome, так и в Firefox.

Что почитать

В этих темах вам помогут разобраться:

  • официальный канал на YouTube;
  • канал для разработчиков;
  • канал самой Mozilla, где в основном освещаются проблемы приватности в интернете (Internet for people, not profit — гласит слоган компании).

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

Спасибо за внимание! Надеюсь, материал был для кого-то полезен, и после этой статьи не одного меня будут через день спрашивать: «А почему не Chrome?»

Похожие статьи:
Оператор «МегаФон» объявил о снижении цен на самой популярной линейке тарифов «Всё включено». Изменения затронут все регионы...
Уранці 7 жовтня Ізраїль зазнав масованого ракетного удару з боку сектору Газа, у містах спалахнули пожежі. Відповідальність...
А ще TypeScript лідирує за темпами росту, цікава ситуація у світі мобільної розробки та непохитна популярність Python....
When you have a nice bouquet of flowers, it can be an art trying to arrange them properly. So, this is why we thought we would guide you through the steps require on how to arrange flowers properly. How...
В Интернет попали фотографии смартфона HTC One A9, который еще не был официально анонсирован. Ожидается, что данная...
Яндекс.Метрика