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?»