Конференция по DevOps практикам — DevOps Fest, 20-21 марта. Cпикеры и доклады на сайте >>
×Закрыть

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

LinkedIn

53 комментария

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Вот когда вебсокет-дебаг в firefox завезут таки, смогу наконец-то полностью удалить google chrome. А то иногда приходится в него ради этого лезть :(

Ей, недавно только вышло, не заметил. Спасибо!

У ФФ консоль потяжелее, чем у хрома. Если приложение генерирует большое количество тяжелых логов (порядка нескольких тысяч, с выводом объектов) — работать с консолью становится сложно, часто она просто умирает (то есть приходится убивать вкладку, открывать новую, и там — новую консоль). Хром в такой ситуации тоже жутко тупит, но продолжает работать.
Но у ФФ консоль мощнее, особенно мне пригодилась возможность копирования в буфер обмена выведенного в консоль объекта. В хроме для того, чтоб это сделать, нужно хорошенько извратиться.

Дякую! Поставив собі 12 за те, що скільки себе пам’ятаю з FF. Єдине «але» — зависає після 20-30 вкладок. Але це вирішується Монітором Активності: проблемний процес -> Завершити процес.

Синхронізація вкладок — дуже зручно.

Вся розробка на FF і тільки після чек по всім браузерам.

Єдине «але» — зависає після 20-30 вкладок.

Може, не вистачає оперативної пам’яті, або у вкладках занадто важкі сайти?

Поставив собі аддон
addons.mozilla.org/...​fox/addon/tab-count-icon
що показує скільки вкладок відкрито, навіть при 200+ вкладках з сайтами типу DOU, LinkedIn, Twitter, Facebook не особливо зависає на досить старому ноутбуці з 16 ГБ оперативної пам’яті.

Перекатился с блинк-браузеров (в моем случае с Оперы) на ФФ после эпичной новости о хромовском Manifest v3 который убьет все вменяемые адблокеры (подробней на реддите на ArsTechnica).

Сейчас использую хром в качестве браузера для разработки (так и не получилось пересесть на ФФ дев.тулзы, правда я и не очень-то старался).
Для сёрфинга — ФФ и, иногда, Опера.

В принципе получается удобно, т.к. не смешиваются рабочие и личные экосистемы — в хроме рабочий гугл аккаунт, рабочая почта и все такое. В ФФ/Опере соответственно — личные.

По личным ощущениям ФФ вполне себе хорош для казуального сёрфинга. Все нужные расширения есть. Рендеринг шрифтов и т.п. не напрягает. Работает шустро. В общем, доволен.

FF only ибо не могу отучить себя не генерить тысячи открытых вкладок, которые нужно будет обязательно вскоре прочитать, а поперемещать в закладки по тегам — некогда. А ещё в нём поиск по табам удобный.

Якось намагаючись відмовитись від синхронізації і що вкладки з роботи мені вдома нахрін не впали спіймав веселі краші хрому. З тих пір тільки ФФ

Хочу ще відмітити, як дуже круту фічу, розширення для контейнерів. Multi-Account Containers

Гугл сделит за этой темой. В youtube выдал recommended Chrome 79 — What’s New in DevTools, хотя я ничего по веб-разработке там не смотрю 🙂.

Сижу на FF примерно с 2004. Никогда не уходил на хром, предпочитаю FF из-за нормальной кастомизации и вкусных плагинов начиная с tree style tab, лёгкого разделения профилей, управления всякими блокировками...
Но иногда таки натыкаешься на следствия того, что большинство веб-дизайнеров таки целятся на хром, на остальные — по остаточному принципу. Некоторые сайты вообще регулярно сходят с ума под FF (linkedin лучший пример).

Плагины сейчас полезные в нем режут только в путь. Недолго три-табу осталось. Но, в хроме еще хуже всё.

Сейчас выбираешь не где лучше, а где говна меньше.

Последнее рабочее от мелкомягкиих было во времена NT4 со всеми ее сервиспаками.

в FireFox есть удобный сайдбар с букмарками в отличии от наркоманского Chrome.

Пытался несколько раз переходить. ФФ хороший браузер и инструменты разработчика там клевые, но рано или поздно возвращаешься к Хрому. Все-таки удобней, быстрее, лучше интеграция с Гуглом, все сайты выглядят хорошо.

Когда пробовал прошлый раз? У меня тоже такое было, но недавно все-таки перешел. Различий по удобству и быстродействия я не заметил.

Вже кілька разів старався «пересісти» на ФФ, але не можу... Не можу витримати їх рендерінг як шрифтів, так і деяких інших елементів/ефектів. Якогось милого на всіх інших браузерах з цим все ок (так, навіть в ІЕ і Сафарі), але в ФФ вже 10 років не можуть з цим нічого зробити.
Або це я такий тугий, і не можу правильно налаштувати ці шрифти в «about:config».

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

У меня вообще Опера много лет уже))) мой грех вообще поддаётся искуплению?)))

Только после написания аналогичной статьи)

Прощаются тебе грехи твои. Иди и впредь не греши:)

Тред не читав, перейшов на фаєрфокс повністю вже три місяці як, брат живий, залежність є.

Розлив хроміуму (ірідіум) запускаю тільки коли треба робити пошук по XPath, в FF нажаль цього немає.

Хех, уже забыл сколько лет с Фаерфоксом. В свое время перешел из-за поддержки MRU обхода по Ctrl-Tab, т.к. отсутствие этой фичи в Хроме просто выбешивало, и как-то нормально все. И синхронизация со смартом, где Хром, оказалась нафиг не нужна, наоборот ничего лишнего на смарт не лезет.

Зато через Pocket на смарт почитать закидывать норм.

Ще в Хромі відсутні плагіни не вигідні для Гугла (різноманітні завантажувачі відео з Yutube, FB), тощо.
Ще він основний в Убунту, тому набридло постійно доставляти Хром і перейшов на ФФ.

Главное, что они своими апдейтами убили все плагины и самое главное убили тот, что в трей его сворачивал и показывал количество нее прочитанных сообщений.
Сейчас выбор между браузерами: говно с палочкой, говно с веревочкой и говно с розовым бантиком.

Перешел на FF года полтора назад, может больше, когда хром уже перестал стесняться и выжирать всю существующую память, ради своих меркантильных целей содрать как можно больше личных данных. Последнее, что держало в хроме — это быстрая синхронизация всех вкладок при переустановке ОС, но FF с этим тоже справляется.
В работе использую все популярные браузеры, но Dev tools использую все таки Chrome, потому что, в FF нет встроенного поиска элементов по селекторам Xpath/CSS

addons.mozilla.org/...​don/chropath-for-firefox
Есть экстеншн для Firefox, не знаю правда насколько уступает/обгоняет встроенный поиск из Chrome

Спасибо, я его использую на обоих браузерах

Мне FF помимо описанных фич нравится тем что на Andriod в нем легко отключить рекламу в отличии от Chrome. Я ненавижу рекламу во всех её проявлениях, потому для серфинга только FF. В остальном у обоих несть преимущества и недостатки, потому пользуюсь и тем и другим. GC лучше для их YTube/YTubeMusic и прочих их сервисов. В разработке лучше любить оба браузера и использовать все доступные возможности))

GC лучше для их YTube/YTubeMusic и прочих их сервисов.

Чем лучше? Я разницы вообще не заметил.

У меня на разных компах вынесены YTMusic/YTKids/GKeep/GMail как приложения в отдельном окне. Лучше тем что их работа отточена именно в Chrome. YTMusic к примеру мультимедийными клавишами переключается только в Chrome и подобные мелочи.

Сейчас проверил — у меня в хроме youtube music мультимедийными клавишами не переключается. Я как раз для этого использую Google Play Music Desktop Player. В нем можно между google и youtube music переключаться и управлять треками через мультимедийные клавиши.
UPD: сначала проверял на винде — там не работает в хроме переключение, а потом проверил на маке — там работает.

Из хороших фич — уже есть поддержка DNS-over-HTTPS, что в Хроме включается почти никак.
И Facebook container для параноиков — хотя иногда он даже им мешает.

В хроме прикольней сделали подстановку фейковых координат. Редко такое надо, но удобно, что легко можно подставить нужные и тестировать не меняя кода. По интеграции с сервисами говорили, но уточню, что ФФ просто отвратно предлагает расшарить экран в хэнгауте(вываливает список всех окон с какими-то не релевантными названиями). Так же bank id не завелся под ФФ, а только на Хроме. Полезная штука если пользуешься онлайн сервисами от государства.

юзаю под FF все гос-сервисы, все работает, проблем замечено не было.

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

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

Все так
лет 5 точно ФФ основной
Opera — для доп отладки сайтов на localhost, и прочего, чего не хочется видеть в истории
Хром — для гмайла, гдокса, гугл календаря и google keep. и то, забываю, обычно ФФом хожу :)

Також користуюсь FF як основним браузером. Єдине що мене розчарувало за час роботи з ними це:

bugzilla.mozilla.org/show_bug.cgi?id=195361

На протязі 17 років їм доказують що FF це єдиний браузер з такою поведінкою, і було би добре якби в них було так як і в інших, але вони все не піддаються і гнуть свою лінію про те, що вони не порушують специфікацію.

Також нагадаю, що Firefox і Chromium мають повністю відкритий код, на відміну від Chrome, IE, Opera та Vivaldi.

Як фронтенд інженер не маю проблем з недостачею екстеншнів — є усі стандартні react, redux, vue + json форматтери + блокувальники реклами + youtube enhancer.
Також маю сказати, що саме flexbox та grid tools стали причиною переходу з Хрому на Файрфокс як основний робочий браузер.
Як приватний все ще використовую Сафарі.

да-да грид тулы это круто, когда они еще в бете начали выкатывать окончательно перешел на ФФ (точнее вернулся спустя сколько-то лет) ... хоть я и не фронтенд (это вторично)

Перешел также на FF, только с Safari. Chrome как-то не прижился еще с самого начала, а под Linux — только FF.

+1 аргумент adnauseam.io який хром тупо випиляв з магазину додатків

Уже роки 2 використовую firefox як основний браузер і поки альтернатив не бачу. Ще як фічу я б добавив можливість виключити звук на табі і розумне перемикання між джерелами звуку ( якщо включити друге відео на youtube, то перше автоматично ставиться на паузу)

13 років використовую firefox як основний браузер.

Аналогично. Хром использую только на работе, если он является основным браузером для AUT.

Ну і нащо так жити? Для кого тоді Google старається?)))
YOLO!

13 років тому не було Chrome, тому я на Firefox (як і на Sublime Text) скоріше за інерцією, ніж для того щоб насолити Google. Ось така ще стаття була на ДОУ в 2008:
dou.ua/...​s/google-chrome-overview

Я мав на увазі у статтю добавити) Ці функції реалізовані уже)

Можно. Я несколько недель назад полностью перешел на FF c хрома. До этого тоже несколько раз пробовал, но порой FF был заметно медленее, потой нехватало каких-то привычных фич. В этот раз перешел без проблем и каких бы то ни было неудобств. Обратно не собираюсь. Кстати, 1Password намного лучше интегрировать в FF.

Подписаться на комментарии