Выбор лучшего браузера для web-разработки

Март, 07th 2012Рубрика: Web 30364
Подписаться на комментарии по RSS

сравнение современных браузеров

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

Практически все современные Internet браузеры на данный момент оснащены штатными средствами для отладки и детального изучения кода web страниц. Такие инструменты существенно облегчают жизнь web-мастерам, потому сегодня хочу рассказать чем пользуюсь сам при разработке web-сайтов. Честно говоря не ожидал, что IE8 тоже наделен подобным функционалом (решил это проверить только когда взялся за статью).

Данный материал будет особенно полезен начинающим web-дизайнерам, ведь самый правильный способ освоить HTML, CSS, научиться создавать собственные шаблоны для сайтов - это изучение на конкретных примерах уже существующих, качественных ресурсов. Да и просто иногда интересно узнать как реализован тот или иной элемент дизайна на чужом сайте.

Претендентов пятеро - Google Chrome, Opera, Mozilla Firefox, Safari и IE8. Как видите, представлены все популярные браузеры на данный момент и с поставленной задачей они справляются, так что сравнение носит скорее эстетический характер. Хотя присутствуют и некоторые отличительные особенности, о которых вы узнаете ниже.

IE8

Начну с детища Microsoft чтобы поскорее от него избавиться. Итак, идем в меню Сервис - Средства разработчика либо нажимаем F12

ie8 с панелью веб-инспектора

По умолчанию панель инспектора не закреплена в нижней части экрана, как на скриншоте, а открывается в отдельном окне (на мой взгляд не удобно). Весь дизайн какой-то угловатый и крайне скучный, смотришь и тоску навевает. Тормоза, кривая работа с CSS3 в IE8, общая унылость интерфейса... ну в общем вы поняли моё отношение к этому браузеру.

Из плюсов, все элементы меню по русски (при условии что установлена русская версия Windows), можно прямо на страничке расставить все размеры у изображений, можно выбрать режим обозревателя IE7 или IE8, что возможно пригодится при разработке.

Mozilla Firefox 10.0.2

Firefox, пожалуй, единственный браузер, с минимальным функционалом для web-разработчика что называется "из коробки". Т.е. штатные средства хоть и присутствуют, но очень ограниченные. Конечно и они позволяют провести исследование HTML и CSS кода сайта, проинспектировать элементы, поэкспериментировать с параметрами (например изменить значения отступов у элементов, размеры, стили шрифтов и т.д.) Хотя всё это могут делать и конкуренты.

Mozilla с панелью веб-инспектора

На скриншоте представлена панель веб-инспектора и таблицы CSS стилей. Изначально они не активированы и находятся в свернутом виде. Для активации соответственно в нижней панели надо нажать кнопки HTML и Стиль.

Выбрать интересующий элемент на web-странице можно предварительно нажав кнопку Исследовать.

управление панелью веб-инспектора в Mozilla Firefox

Сила Firefox всё-таки в сторонних плагинах. Только тут можно нарастить небывалую функциональность. Однако для себя я этот браузер тоже забраковал - уж слишком он прожорлив до ресурсов компа, особенно до оперативной памяти.

Safari 5.1.3 и Google Chrome

Оба браузера основаны на движке WebKit, потому я объединил их в одну общую категорию для сравнения. Действительно, с точки зрения web-разработчика, исследователя чужого кода или просто интересующегося экспериментатора, эти браузеры похожи как братья близнецы.

Safari с панелью веб-инспектора

Safari будет интересен в первую очередь маководам, т.к. на Windows он пока не прижился, да и вряд-ли в ближайшее время приживется.

На маке предпочитаю использовать именно его, ведь только этот браузер предлагает такие "вкусности", которыми не может похвастать ни один другой (например увеличение конкретной области страницы двойным тапом, синхронизация закладок с i-девайсами и т.д.). Причем Safari вполне адекватный и современный браузер с поддержкой новейших стандартов, идущий вместе с системой Mac OS X, и это его основное отличие от IE на Windows.

По умолчанию, средства web-разработки в браузере не отображаются, но их можно легко включить:

включение меню Разработка в Safari

В результате появляется дополнительный пункт Разработка с довольно обширными функциями, а также пункт Проверить объект в контекстном меню (клик правой кнопкой мыши на страничке), для отображения панели веб-инспектора.

Как и у предыдущих участников обзора, для быстрого доступа к свойствам конкретного элемента web-страницы необходимо задействовать специальный режим в панели веб-инспектора:

выбор объекта для просмотра в Safari

Google Chrome наверное самый быстрый и красивый браузер на Win платформе (на Mac я не замечаю разницы с Safari). Писать о нем отдельно, с точки зрения web-дизайнера, смысла особенного нет, чтобы не повторять описание Safari. Следующий скриншот тому подтверждение:

Google Chrome с панелью веб-инспектора

Opera 11.61

Ну вот и добрались до фаворита, оставил его на сладкое. Именно в Opera наиболее приятно реализованы инструменты по исследованию устройства web-страничек.

Opera с панелью веб-инспектора

Dragonfly - так в Opera называется панель для web-разработки. В отличие от конкурентов, для навигации по элементам странички тут не нужно переходить в специальный режим. Всё работает и выглядит просто превосходно. Кроме того имеется дополнительная функция для определения цвета любых элементов, что не редко пригождается в работе. У конкурентов это возможно установкой дополнений к браузеру.

панель инструментов веб-инспектора Opera

Да... хотелось изложить предельно кратко, надеюсь это получилось. Вообще тема довольно интересная, но лучше один раз попробовать самому и составить собственное мнение, чем сто раз прочитать.

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

Подписывайтесь на канал Яндекс.Дзен и узнавайте первыми о новых материалах, опубликованных на сайте.

Если считаете статью полезной,
не ленитесь ставить лайки и делиться с друзьями.

Комментариев: 3

  1. 2014-05-14 в 14:55:15 | Влад

    с выводами автора полностью согласен

  2. 2014-09-25 в 08:03:06 | Сергей

    А я не согласен, в браузере Google Chrome Есть возможность изменить css когда это необходимо и сохранить прямо в браузере

  3. 2021-05-10 в 10:09:10 | Аноним

    Вы хоть как то обновляйте контент. Эта статья написана в 2012 году.

ваш комментарий будет опубликован после проверки
на указанный адрес будет отправлено письмо с кодом активации. Вы можете настроить собственный профиль и стать активным участником или автором.