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

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

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

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

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

IE8

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

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

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

Mozilla Firefox 10.0.2

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

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

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

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

Safari 5.1.3 и Google Chrome

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

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

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

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

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

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

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

Opera 11.61

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

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

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

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