6 лучших браузеров для разработчиков в 2020 году
Веб-разработчики делают гораздо больше, чем просто просматривают страницы онлайн. Именно по этой причине среднестатистическому кодеру нужен браузер, способный на множество разных вещей. Например, тот, который поставляется с плагинами, позволяющими просматривать код вдохновляющих сайтов. Кроме того, вы можете искать браузер, который дает вам возможность увидеть, как некоторые проекты будут выглядеть на разных экранах.
На первый взгляд веб-браузеры кажутся очень похожими. Все они предоставляют вам относительно простой способ выхода в интернет и поиска нужного вам контента.
Тем не менее, чем больше времени вы тратите на развитие своих навыков дизайнера/разработчика, тем больше вы осознаете необходимость уникального вида просмотра. К счастью, мы нашли несколько лучших браузеров для веб-разработчиков, чтобы вы могли начать.
Давайте посмотрим, что может предложить каждый из вариантов.
Firefox Developer Edition
Среди разработчиков браузер Firefox, вероятно, является самым популярным в мире.
Сам по себе Firefox — довольно мощный браузер. Считается, что он намного быстрее, чем любой другой средний веб-браузер, и помогает вам отслеживать информацию, а также создавать потрясающие страницы за короткий срок, например, как Edge.
Однако, если вы действительно хотите перевести свой опыт Firefox на следующей уровень, то вам определенно стоит обновить его до собственной версии р Firefox для разработчиков.
Как и Google Chrome для разработчиков, Firefox Developer Edition создан для открытого интернета.
Кроме того, с Firefox Developer Edition вы получаете доступ к движку CSS следующего поколения (написанному в RUST), неактивной системе CSS, которая выделяет объявления CSS, которые не влияют на страницу, и многое другое. Существует также множество Firefox DevTools для неограниченного доступа.
С помощью вашего нового браузера вы можете получить доступ к лучшему в своем классе отладчику JavaScript, Master CSS Grid и другим функциям. На самом деле Firefox — это единственный браузер, который специально созданный с инструментов, помогающими разработчикам создавать и проектировать собственную CSS-сетку. Эти инструменты упрощают визуализацию информации, отображение имен областей и предварительный просмотр преобразований.
Polypane
Polypane — это уникальный вид браузера, специально спроектированный для разработчиков и дизайнеров. Данный браузер представляет собой кросс-платформенное решение и инструмент разработки, который специалисты могут использовать для максимально быстрой разработки, тестирования и отладки сайтов.
Созданный для того, чтобы помочь разработчикам и дизайнерам повысить как качество своей работы, так и производительность, Polypane полон полезных функций. Более того, он работает с любым редактором кода и технологическим стеком.
В эпоху, когда пользовательский опыт является более важным, чем когда-либо, Polypane помогает компаниям создавать более качественные веб-сайты, начиная от WordPress и заканчивая Drupal и Angular.
Поскольку инструменты для разработки и отладки уже встроены в браузер, вам не нужно беспокоиться о поиске и добавлении дополнительных расширений.
Для тех, кто не уверен в использовании нового и проприетарного браузера, Polypane действительно поставляется с бесплатной пробной версией. Однако, как и в случае с большинством специализированных инструментов для веб-разработчиков, вам придется заплатить, если вы хотите продолжать пользоваться расширенными функциями в долгосрочной перспективе.
С другой стороны, как и версия для разработчиков Google Chrome, Polypane получает выгоду от регулярных обновлений, так что вы всегда будете в центре событий веб-индустрии.
Более того, вы также можете получить доступ к различным пакетам в зависимости от того, используете ли вы Polypane как частное лицо или агентство.
Google Chrome для разработчиков
Google Chrome выделяется как один из наиболее широко используемых браузеров в мире.
По последним оценкам, доля Chrome на рынке составляет более 58%. С такими цифрами он просто должен предложить что-то особенное.
В то время как Chrome может быть особенно популярен среди обычных потребителей, он также может предложить что-то особенное для людей из мира веб-разработки и дизайна. Например, у Google теперь есть собственный продукт «Браузер Chrome для разработчиков».
Созданный для открытого интернета, Google Chrome для разработчиков помогает профессионалам разрабатывать веб-сайты, специально оптимизированные для следующей версии цифрового мира. С помощью Google Chrome вы можете тестировать передовые API для веб-платформ в режиме реального времени.
Более того, Google Chrome упакован бесконечными инструментами и дополнениями, которые вы можете внедрить в свой браузер. Список таковых включает в себя консоли PHP для WordPress, инструменты скриншотов для сбора вдохновляющих веб-дизайнов и даже LastPass для управления паролями.
Вы получаете не только бесконечные возможности для творчества с Google Chrome, но и доступ к обновлениям, которые происходят еженедельно, так что вы всегда остаетесь на передовой.
Opera
Opera может быть не такой популярной, как Chrome или Firefox для разработчиков, но она имеет ряд преимуществ. Если вам не нужно слишком много продвинутых функций разработки, тогда Opera может предоставить вам все необходимое для быстрого и эффективного взаимодействия в Интернете.
Многочисленные стресс-тесты и тесты на скорость поместили это решение в середину нашего списка. С Opera вы не добьетесь производительности, которая изменит вашу жизнь, но вы получите подключение и опыт просмотра, на которые вы можете положиться.
В отличие от Chrome и Firefox, Opera также больше полагается на встроенные функции. Это означает, что вам не нужно беспокоиться о добавлении дополнительных опций в ваш браузер самостоятельно.
Браузер Opera для разработчика предоставляет сегодняшним экспертам по дизайну возможность начать работу с некоторыми из новейших инструментов и функций. Так что если вы хотите оставаться в курсе событий, данный браузер — идеальный выбор. Однако стоит отметить, что некоторые функции для разработки, к которым вы можете получить доступ из этого браузера, не будут такими стабильными, как они должны быть.
Blisk
Blisk — интересная альтернатива многим основным браузерам в Интернете.
По сравнению с Opera, Chrome и Firefox, Blisk уделено не так много внимания в интернете. Тем не менее, данный браузер стоит рассмотреть, если вы начинающий разработчик. Он был специально разработан, чтобы предоставить дизайнерам первое рабочее пространство, где они могут разрабатывать и тестировать современные приложения как можно быстрее.
Blisk — это единственный веб-браузер, ориентированный на разработчиков, который позволяет вам получить доступ ко всем функциям, необходимым для создания сенсационного онлайн-опыта. Вы можете посмотреть, как будет выглядеть ваш сайт или приложение практически на любом дизайне телефона, от Google Pixel до iPhone. Более того, есть варианты просмотра в альбомном или портретном режиме.
Blisk также показывает мобильный и десктопный дизайны рядом, чтобы вы могли сравнить пользовательский интерфейс, который пользователи получат, когда они заходят на веб-сайт, независимо от того, с какого устройства они это делают. Другие функции включают в себя:
Safari для разработчиков
Хотите — верьте, хотите — нет, но Safari для разработчиков – это очень мощный инструмент, в зависимости от типа веб-сайтов и онлайн-опыта, который вы хотите создать. Хотя этот вариант браузера не так широк и всеобъемлющ, как некоторые другие варианты, о которых мы упоминали до сих пор, он имеет свои преимущества.
Например, Safari — это лучший способ убедиться, что ваши сайты будут потрясающе работать на iPhone, Mac и iPad.
Поскольку Apple становится все более популярным брендом во всем мире, Safari позволит вам общаться со зрителями в очень специфическом ландшафте. Кроме того, Safari для разработчиков также позволяет экспериментировать с множеством дополнительных функций.
С данным браузером, вы можете добавлять такие вещи, как Apple Pay, что дает клиентам больше возможностей для онлайн-оплаты. Это может быть отличным способом увеличить конверсии для ваших клиентов, имеющих сайты электронной коммерции.
Кроме того, функция «картинка в картинке» позволяет перемещать окно видео из Safari по рабочему столу или полноэкранному приложению. Это облегчает выполнение определенных рекомендаций при работе в Safari.
Safari даже имеет свою собственную вкладку в Mac App store, где вы можете изучить такие вещи, как Xcode для создания уникальных расширений Safari, которые работают специально для клиентов Apple.
В заключение
Как разработчику, вам понадобится уникальный набор инструментов в вашем браузере, который поможет вам получить максимальную отдачу от ваших проектов.
Обычный браузер просто не сможет дать продвинутый опыт, который вам нужен в интернете. Вот почему важно экспериментировать с различными решениями, начиная от Google Chrome для разработчиков, вплоть до современных решений, таких как Blisk.
Если вы решите попробовать что-то проверенное, например Firefox, или что-нибудь более инновационное, вы наверняка обнаружите, что браузер, ориентированный на разработчиков, поможет вам добиться большего.
Всем успешной работы и творчества!
🕸 Самые удобные браузеры для веб-разработчиков
Если какое программное обеспечение разработчики используют чаще текстовых редакторов и IDE, это браузеры. Без них не обойтись при решении многих задач: от поиска информации в сети до отладки скриптов. К сожалению, не все браузеры одинаково полезны. Чтобы сделать труд более продуктивным, веб-разработчику нужен инструмент с возможностями анализа и отладки. В небольшом обзоре мы рассмотрим наиболее продвинутые в этом отношении программы-обозреватели.
Кроссбраузерность
Для начала хотелось бы вспомнить о кроссбраузерности – способности веб-ресурса подстраиваться под несколько программ для просмотра сайтов одновременно и корректно в них отображаться. Каждый фронтенд-разработчик знает, что не расползающаяся верстка сайта вызывает доверие у пользователей, а лояльность аудитории – важный показатель.
Топ 5 веб-обозревателей для разработки
Firefox
Создатели одного из самых популярных браузеров предлагают созданную специально для разработчиков версию – Firefox Developer Edition. Вот список функций, отличающих ее от версии для пользователей:
Также в этой версии кнопки инструментов веб-разработки вынесены прямо на панель управления. Firefox Developer Edition доступен для Windows, Linux и OS X бесплатно – опробуйте его в действии.
Sizzy
Sizzy – это браузер с отличной функциональностью, специализирующийся на ускорении рабочего процесса разработки. Его создатели пообещали сделать этот процесс более продуктивным и, как мне кажется, справились с задачей. Список предлагаемых Sizzy функций довольно широк, но некоторые из них заслуживают особого внимания:
Если вы искали многофункциональный браузер с инструментами, которых нет не в одном другом обозревателе, Sizzy идеально вам подойдет. Он действительно создан для разработчиков, но доступен только на условиях ежемесячной или ежегодной платной подписки с двухнедельным бесплатным периодом.
Polypane
Polypane предлагает идеальный баланс между классическим пользовательским браузером и браузером, ориентированным на разработчиков. Однако это не означает, что в нем отсутствуют полезные для создателей сайтов функции. Перечислим некоторые из них:
Polypane уделяет особое внимание обеспечению доступности ресурса, не забывая про людей с ограниченными возможностями и поставляется с бесплатной пробной версией. Если вы захотите продолжать пользоваться расширенными функциями в долгосрочной перспективе, придется заплатить.
Brave
Если вы ищете пригодный для повседневного использования браузер, Brave – отличный выбор. Быстрый, безопасный и ориентированный на конфиденциальность обозреватель был разработан соучредителем Mozilla и создателем JavaScript Бренданом Эйхом – этот продукт стоит попробовать. Вот некоторые из его сильных сторон :
Также стоит упомянуть функцию Brave Rewards, дающую возможность заработать крипто-токены BAT. Brave – отличный повседневный браузер. Он не только быстрый и безопасный, но еще и бесплатный.
Google Chrome
Нельзя не включить в наш топ самый популярный в мире браузер. Согласно проведенному statcounter в декабре 2020 года опросу, доля пользователей Google Chrome превышает 60%. Веб-разработчик просто обязан протестировать в нем код перед отправкой в production. Давайте перечислим очевидные преимущества интернет-обозревателя №1:
Конечно нас больше интересует версия для разработчиков – Developer edition. Она имеет специализированный инструментарий, а также продвинутую консоль, позволяющую править код и активировать скрытые опции. Есть в Chrome Developer edition и особые плагины для разработки. Среди них можно отметить следующие:
Все сравнения между перечисленными в обзоре браузерами довольно условны и относительны – выделить лучший не получится. Одно можно сказать наверняка: создатели этих программ пытаются сделать фронтенд-разработку более легкой и комфортной, учитывая потребности как специалистов, так и простых пользователей.
А какой браузер предпочитаете вы? Делитесь вариантами в комментариях.
В данной статье я хочу поделиться мыслями на счёт создания собственного браузерного движка. Мы рассмотрим текущие браузеры и браузерные движки. Вспомним про Modest и узнаем его нелёгкую судьбу.
Это будет цикл статей в которых мы создадим свой собственный минималистичный браузерный движок. Каждая статья будет подкреплена реальным кодом и примерами.
По прошествии десяти статей у нас с вами будет минимальная рабочая версия браузерного движка, сильно минимальная. После этого, если запал не уйдёт и будет интерес сообщества, продолжим, и в итоге доберёмся до JS.
И конечно, первым делом необходимо понять, что такое браузер и браузерный движок.
Браузер и браузерный движок
Существующий мир сложно представить без браузеров. Они есть на многих устройствах: компьютеры, лэптопы, телефоны, игровые приставки. Если представить браузер в виде машины то браузерный движок это всё то, что скрыто под капотом вашего автомобиля.
Браузеры как и автомобили могут отличаться внешним видом и содержимым под капотом. Цвет, кнопочки на панели, аудиосистема. У кого-то под капотом двигатель V8, а у кого-то там масло течёт.
Браузер объединяет периферию и предоставляет функционал позволяющий манипулировать движком, его поведением, предоставляет дополнительные сервисы.
Браузерный движок выполняет всю «грязную» работу: загрузка, обработка, отрисовка данных и все возможные расчёты.
Всё как в автомобилях. Есть салон в котором присутствует педаль газа, тормоза и множество переключателей полезных и понятных пользователю. А есть большая механическая часть скрытая от пользователя под капотом.
Кто создает браузеры и движки
Разработкой собственного браузера занимается множество компаний: Google, Mozilla, Apple, Microsoft, Opera Software, Яндекс, Ростелеком, Vivaldi Technologies, много их…
Каждый добавляет какие-то свои «фишки», сервисы в создаваемый браузер. К примеру, Яндекс интегрирует свои сервисы, поиск.
С браузерными движками дела обстоят кардинально иначе. Вот список движков, их разработчиков и обладателей:
Это основные обладатели и разработчики движков. В разработке им помогают сторонние компании на определенных условиях.
Например, рассмотрим самый популярный проект от компании Google — Chromium. Данный проект содержит в себе движок Blink. Создавать данный проект Google помогают такие компании как Intel, Facebook, IBM, LG Electronics, NVIDIA, Yandex. Полный список можно посмотреть тут.
Условия на которых компании помогают создавать Blink/Chromium описаны в разделе Legal stuff на сайте проекта Chromium. Если кратко, то всё что вы создаёте принадлежит (не эксклюзивно) Google.
Браузеры компаний Opera, Яндекс, Ростелеком и другие используют именно этот браузерный движок. Если быть до конца откровенным то заявления вроде «у нас есть свой браузер» не совсем правда. Собственные сервисы — да, а вот всё остальное принадлежит другой компании(ям). И эта другая компания предоставляет свой браузерный движок на определенных условиях.
Лицензии браузерных движков
Любой открытый код содержит в себе лицензию с описанием условий по использованию данного кода, и браузерные движки не исключение.
Если сразу и кратко: лицензии сносные, прям вот из ряда вон ничего нет. Кроме EdgeHTML который закрыт. Легально утащить к себе какой-то проект и закрыто разрабатывать/изменять видимо не выйдет. Лицензии призывают к взаимной открытости.
Открытый исходный код, ответвление движка WebKit. Как и в WebKit заявлено четыре лицензии:
Самый популярный браузерный движок. Он входит в состав проекта Chromium. Именно на основе Chromium создают собственные браузеры.
Если верить файлу LICENSE проекта Chromium его основная лицензия 3-Clause BSD. Но у проекта есть директория third_party (третьи лица, третья сторона) содержащая множество стороннего кода от которого проект зависит. Иначе говоря, без этого кода собрать браузер не выйдет. У каждого компонента свои лицензии отличные от того что указано в LICENSE проекта:
Открытый исходный код. Заявлена одна лицензия:
Активно развивается компаний Mozilla и используется в собственном браузере компании — Firefox. Так же используется в браузере Tor Browser обеспечивающий анонимное пребывание в сети.
Как основа для производителей браузеров большой популярности не имеет.
Открытый исходный код. Заявлено четыре лицензии:
Развивается компанией Apple и используется в собственном браузере компании — Safari. Ранее многие компании использовали в своих разработках WebKit, но после покинули проект и переключились на Blink от Google.
Закрытый исходный код. Проприетарная лицензия.
Движок используется для браузера компании Microsoft под названием Edge, который пришёл на смену Internet Explorer. Это их новый движок. Предыдущий Trident (MSHTML) компания прекратила развивать.
Риски
Использование стороннего движка порождает очевидные риски:
Никто не может гарантировать, что исходный код свободного браузерного движка не будет закрыт для публичного доступа. Так же возможен выход ключевых компаний из разработки свободного движка, что фактически является его закрытием.
Компании развивающие собственные браузеры должны понимать, что всё будет «хорошо» пока они не составляют угрозу/конкуренцию разработчикам оригинального браузера/браузерного движка. Думаю это очевидно. Компания тратит на разработку движка свои ресурсы, но вдруг появляется другая компания которая используя их движок захватывает рынок. Реакция, думаю, очевидна — смотрим список рисков выше.
«Мы создадим копию движка на текущий момент и продолжим развивать сами» — именно так отвечают производители браузеров на сторонних движках. Большое заблуждение, не выйдет просто так продолжить разработку чужого движка. То есть, взять программистов и поставить им задачу — пишите браузерный движок. Написание браузерного движка сложный технологический процесс. Подтверждением этого служит список их обладателей.
Для примера, компания Microsoft создает свой движок, хоть и закрытый. Google вместе с Apple разрабатывали WebKit, но позже Google сделал форк и начал развитие собственного движка Blink.
При этом нужно понимать, что браузерный движок постоянно развивается. Постоянно обновляются спецификации, добавляются новые возможности, улучшаются текущие. Это живая работа. Если взять какой-либо движок на текущую дату и просто использовать его для своего браузера то, примерно, через год-два браузер на этом движке морально устареет.
Адаптация движков
Существует проблема адаптации стороннего движка под нужды собственного браузера. На адаптацию тратится не мало ресурсов. При этом нужно понимать, что браузерные движки часто обновляются, что создает систематические проблемы при интеграции в собственный браузер.
Собственный движок
Прежде всего стоит ответить на главный вопрос — зачем создавать свой браузерный движок? А точнее, кому не надо создавать свой движок?
Свой браузерный движок не стоит создавать если:
На текущий момент нет сложности создать собственный браузер на стороннем движке. Их наплодилось не мало и как-то выделиться среди всей этой массы можно только созданием браузера на исключительно своих компонентах, на собственном движке.
Стоит ли заниматься разработкой движка для «заработка», для создания стартапа?
Данный вопрос скорее к сфере его применения. Мне видится несколько направлений:
Кроме того, престиж компании разработчика браузерного движка значительно выше чем у клонов. Именно как технологической компании. Это сказывается на популярности компании и привлекательности для существующих и будущих сотрудников. Но это уже скорее о честолюбии, встать в одном списке с такими компаниями как Google, Mozilla, Microsoft.
Заключение
Без сомнения, создание браузерного движка процесс сложный и требующий значительных ресурсов. Подходить к этой разработки необходимо крайне серьёзно и с чётким планом по развитию. Кроме того, это не тот продукт прибыль от которого можно получать на промежуточном этапе разработки. Да, отдельные компоненты можно адаптировать под нужды компаний, но я уверен, что такой подход только отнимет время и значительно затянет разработку.
Развитие браузерного движка сильно зависит от метода его разработки. Каким он будет: открытым, закрытым?
Я уверен, что если компания занимается развитием браузера на основе стороннего браузерного движка то ей следует серьёзно подумать над перспективой создания собственного.
Компании далёкой от браузеров заняться разработкой браузерного движка тоже можно, и не только для того чтобы создать браузер. Если итоговый продукт будет полноценным браузерным движком превосходящим существующие то он будет востребован. Сферы применения были описаны выше.
Цикл статей
Судьба Modest
Кто-то из читателей, возможно, знает, что я занимаюсь разработкой браузерного движка. В моих публикациях можно найти предыдущие статьи на эту тему.
К сожалению, проект Modest пришлось завершить. Какое-то время проект развивался в компании, в которой я раньше работал. Мне пришлось покинуть компанию. Появились разногласия которые не позволили продолжить разработку проекта. Обычный рабочий процесс, такое бывает.
Не смотря на то, что у меня есть все права на Modest, на код никто не претендует (подписаны бумаги), я решил его «закопать». Чтобы ни у кого не возникало ложных ощущений. Тут надо понимать, что закапывается и весь основной код который развивался вне компании (mycore, myhtml). Но, есть и плюс, возможно, я стал чуть умнее.
Мной было потрачено очень много времени на изучение спецификаций, осознания их, поиск оптимальных алгоритмов, написание черновиков (прототипов), создание myhtml (самый быстрый парсер html) в свободное от работы время, и просто так забросить эту тему я пока не могу. Было потрачено много выходных, праздников, вечеров, ночей.
Теперь я занимаюсь разработкой нового браузерного движка. Разработка с ноля. Имени у него пока нет, только кодовое — lexbor. Вся основа уже написана: работа с памятью, общие алгоритмы, заложена будущая архитектура. Как всегда, всё краше и лучше чем было. В общем, у меня есть самое главное: технология и чёткое видение/понимание как и что развивать.
Одному мне такой проект не потянуть. Если поддержки не найду (финансирования) то прекращу разработку и присоединюсь контребьютером к существующему открытому движку (Blink или Gecko). Попробую побыть там волонтером и реализовать свои идеи. Занимаюсь всем этим исключительно в нерабочее время.
Тут видимо должна быть картинка «ты должен был бороться со злом, а не примкнуть к нему».