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