К счастью, каждый основной браузер предоставляет набор инструментов для разработки. Вы можете использовать Firebug в Firefox, IE Developer Tools, инспекторе веб-наборов или Opera Dragonfly. Тем не менее, вы можете не знать, что Dragonfly является бета-продуктом. Как и многие разработчики, я использовал его время от времени, но нашел несколько привлекательных функций, которые утащили меня от Firebug. До сегодняшнего дня.
5 мая 2011 года отмечается выпуск версии 1.0 … и я был преобразован! Стрекоза потрясающая. Вы будете знакомы с большинством функций, но Dragonfly предлагает больше инструментов, приятнее и выглядит лучше, чем его конкуренты.
Самым фундаментальным изменением является интерфейс. Бета-версии были немного уродливыми и дезориентирующими, но с версией 1.0 Opera выпустила прекрасный инструмент для разработки. Это выглядит так же хорошо, как инспектор веб-наборов, но гораздо яснее и не так загромождено.
просмотреть полный скриншот Opera Dragonfly
DOM инспектор стрекозы отлично. Узлы HTML-элементов, свойства текста и CSS можно легко проверить или изменить. Вы даже можете отлаживать и редактировать графику SVG на лету. Свойства также могут быть отфильтрованы по текстовой строке — полезное средство, которое еще не появилось в других инструментах.
Opera всегда предлагала отличные средства отладки JavaScript. Dragonfly продолжает эту традицию на вкладке «Сценарий», где вы можете отслеживать и устанавливать контрольные точки или точки останова в любом исходном файле. Интересно, что консоль JavaScript выглядит как наложение, поэтому вы все равно можете просматривать и перемещаться по информации в основном интерфейсе. Это умная идея и хорошо работает.
просмотреть полный скриншот Opera Dragonfly
Аналогично, вкладка «Ошибки» сообщает о ряде проблем в виджетах HTML, JavaScript, CSS, XML, XSLT, SVG, Opera и других. Одной из лучших функций является фильтр, который удаляет ошибки CSS, вызванные свойствами с префиксом поставщика.
просмотреть полный скриншот Opera Dragonfly
Сеть и ресурсы обеспечивают просмотр всех загрузок файлов с временем запроса и ответа. Файлы могут быть открыты в собственной вкладке для дальнейшей проверки.
просмотреть полный скриншот Opera Dragonfly
Вкладка «Хранилище» позволяет просматривать, изменять и удалять данные в файлах cookie, локальном хранилище HTML5, хранилище сеансов HTML5 и виджетах. Firebug пока не предлагает эту возможность, и, хотя инспектор веб-наборов немного красивее, реализация Dragonfly проще в использовании и предоставляет лучшие возможности редактирования.
Последняя вкладка — «Утилиты», в которой есть инструмент для создания скриншотов, масштабирования, выбора цвета и палитры. Это отлично подходит для дизайнеров и уникально для Dragonfly.
Наконец, если вам этого недостаточно, Dragonfly предоставляет удаленную отладку для мобильных телефонов, планшетов, телевизоров и любых других устройств с помощью Opera Mobile.
Итак, вы, вероятно, спрашиваете, как вы можете установить этот удивительный инструмент? Dragonfly — это кэшированное приложение HTML5, которое загружается или обновляется при его использовании. Вам потребуется браузер Opera с opera.com, и после его установки выберите «Инструменты»> «Дополнительно»> «Стрекоза» в меню или нажмите Ctrl + Shift + I. Или создайте ярлык:
- Щелкните правой кнопкой мыши инструмент или строку состояния и выберите «Настроить», а затем «Внешний вид».
- Выберите вкладку «Кнопки», затем выберите «Просмотр браузера».
- Перетащите значок Opera Dragonfly на панель инструментов.
Opera создала потрясающий инструмент для разработки браузеров, который так же хорош, если не лучше, чем все его конкуренты. Скорость и стабильность превосходны, и хотя в финальной бета-версии я столкнулся с небольшим количеством мелких проблем, можно ожидать, что проблемы будут быстро устранены.
Если вы уже пробовали Dragonfly, но не оценили его, я призываю вас взглянуть еще раз. Я провел несколько счастливых часов, улыбаясь от уха до уха, играя с новыми развивающими игрушками.
Для получения дополнительной информации и учебников, обратитесь к opera.com/dragonfly
Пожалуйста, дайте нам ваше мнение о Dragonfly v1.0 …