
Довольно давно, я написал заметку о выходе IE8 с новыми средствами для разработчика, которые очень похожи на плагин FireFox Firebug. И теперь, после нескольких месяцев работы с каждым, пришло время поделиться мнением о них.
Прежде всего – оба инструмента превосходны. Если вы занимаетесь веб-разработкой (тяжелый JavaScript), сделайте себе одолжение, установите оба браузера с нужными инструментами. Если вы используете IE7 – обновите. Если вы используете IE6, что ж, пусть Боги будут милосердны к вам. Избавьтесь от него. Для тестов можно загрузить IE6 виртуальную машину.
Я знаком с .NET-разработчиками, которые просто не будут помогать вам, если у вас в среде не установлен R#. Та же ситуация и у веб-разработчиков в наши дни. У вас обязательно должен стоять IE8 и Firefox+Firebug.
Начать работать с обоими инструментами весьма просто. F12 — ваш лучший друг и товарищ. После нажатия мы увидим подсвеченный html код, возможность сворачивать код в группы, а так же информация о CSS стилях.


И чтобы долго не описывать, представляю таблицу сравнений, включая не только IE8 и FireFox:
Функия | IE8 | FireBug+ FireFox |
Opera | Safari | Chrome | Необходимость |
---|---|---|---|---|---|---|
HTML | ||||||
Подсветка синтаксиса | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Сворачивание кода | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Правка Html | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() |
Валидация Html | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Очистка кэша | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Выделение и подсветка | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() |
Разметка | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
CSS | ||||||
Просмотр/Изменение CSS | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() |
Подсветка CSS | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Отключение CSS стилей | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Создание новых стилей | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Валидация CSS | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
JavaScript | ||||||
Подсветка JavaScript | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Отладка JavaScript | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() |
Точки прерывания | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() |
Пошаговая отладка | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() ![]() |
JavaScript профайлер | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Выполнение JavaScript | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Стек вызовов | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() |
Локальные переменные | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() |
Отслеживание переменных | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Просмотр веб-сервисов | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Неосязаемое | ||||||
YSlow | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
Переключение режимов браузера | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() ![]() |
Плавающая панель | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Выбор цвета | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Выбор цвета | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Мониторинг сетевых запросов | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() ![]() |
* Использование сторонних сайтов
** Доступно с разных мест в приложении
***Технически это возможно, но вы вряд ли захотите попробовать
Как видно некоторый функционал отсутствует в каждом инструменте. YSlow, закладка Консоль, закладка Сеть в Firebug дают огромные возможности. Для недостающих возможностей следует установить Web Developer Toolbar.
Для IE8, факт, что вы можете переключаться между IE7 и IE8 режимами, стандартным или режимом совместимости, огромен. Встроенная валидация Html/CSS IE тоже не повредит. Но более всего выделяются встроенные инструменты в IE8. Выбор цвета, управление кэшем, контуры, рисунки. Чтобы получить перечисленные возможности в FireFox, вам нужно установить Web Developer Toolbar. Для отслеживания трафика в IE8, вам нужно установить Fiddler2. Фактически, у вас должен стоять Fiddler для обоих браузеров.
Что же касается других браузеров:
Google Chrome: Да, у него есть пункт в меню «Разработчикам», который содержит примитивные список возможностей. Довольно многого не хватает, но доступен просмотр html, css и JavaScript, отладка JavaScript, изменение css на лету и еще немного возможностей. В общем, Chrome позади IE8 и FireFox.
Apple Safari: В Safari так же присутствуют инструменты для разработчиков, но они точно такие же, как и у Chrome, плюс пару дополнений. Оно и очевидно, они ведь используют один движок, но черт побери, добавьте хотя бы пару новых иконок!
Да вот беда, чтобы увидеть инструменты для разработчиков, вы должны вывести панель меню. Далее пойти в настройки, закладка Дополнения, поставить галочку «Показать меню Разработка в строке меню». Далее, в меню Разработка и выбрать «Показать веб-инспектор».
Я до сих пор думаю, что Safari нисколько не лучше FireFox или IE8.
Opera: У меня некоторые проблемы с работой инструментов в Opera. Возможно, я виноват сам. Но то, что вы получаете — пригодно к использованию.
Победитель
Сложно не дать FireFox+Firebug небольшое преимущество в этой гонке, но не нужно забывать, что и IE8 дал разработчикам в руки мощный инструментарий.