Opera Dragonfly — мощный инструмент прямо из коробки

Хей народ! Сегодня я поведаю вам о такой клевой штуке как Opera Dragonfly! Она поставляется вместе с браузером прямо из коробки, но многие о ее существовании даже не догадываются. Что это такое? Это отличный инструмент для веб-разработчика, который поможет быстро разобрать страницу на элементы, посмотреть стили каждого div’a, каждой кнопки, и все это буквально в один клик. Зачем это нужно? Читайте далее.



Начнем с того, как вызвать Opera Dragonfly. Очень просто: Идем в главное меню — Страница — Средства разработки — Opera Dragonfly.



Или можно просто нажать Ctrl+Shift+I. После этого запустится наша стрекоза 🙂

Вы можете увидеть ее в нижней части окна.

Давайте познакомимся со всеми возможностями:

• Просмотр DOM;
• Просмотр и редактирование CSS;
• Отладчик JavaScript;
• Просмотр HTTP запросов;
• Отладка страницы для мобильных устройств;
• Удалённое подключение к любым компьютерам и устройствам с установленным браузером Opera, поддерживающим данный инструмент для осуществления отладки веб-страниц.

Начнем по порядку. DOM это аббревиатура Document Object Model, что в перевода означает объектная модель документа, ну это и так понятно 😉 Таким образом каждая html страничка из себя представляет сложный документ, содержание которого подчиняется строгим правилам. А Опера драгонфлай поможет разобрать любую страницу на объекты. Chrome такое тоже умеет, но так как это там реализовано мне не очень по душе. Да и возможностей по сравнению с Opera гораздо меньше.

Вот как выглядит мой блог в стрекозе:



Можно скрывать код того или иного объекта с помощью кнопок «+». Все объекты вложены друг в друга и имеют иерархию, все структурировано и логически связано. Можете побродить по коду своих или чужих сайтов.

Но это только начало! Теперь мы можем обратиться к стилям любого объекта, например, давайте посмотрим на кнопку с моего блога.



Стрекоза позволяет нам просматривать и изменять стили любого объекта на странице. Изменения вступают в действие сразу же, но, естественно, не сохраняются. Если вы планируете переделывать шаблон своего блога под себя, то заходите в Opera Dragonfly, и начинаете менять все сверху и до самого футера, или наоборот, кому как больше нравится 😉 Выбираем любой элемент, находим названия его id или class’a в CSS и правим как нам нужно. Просматриваем то что получается и не забываем потом все изменения перенести непосредственно в CSS, ведь, как я уже говорил, стрекоза изменения не сохраняет, а только показывает.

С помощью этого мощного инструмента можно делать очень много полезного. Например, я захожу на какой-то сайт и вижу красивый элемент интерфейса. Хочу себе такой же, но если открыть просто исходный код страницы, то там черт ногу сломит, да и сопоставлять все с CSS вручную не хватит ни сил ни желания. Я просто захожу в драгонфлай и получаю всю нужную информацию.

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

На вкладке «Скрипты» можно увидеть подробную информацию обо всех JavaScript скриптах. Просмотрел свои, ничего подозрительного не заметил, кстати, советую и вам проверить, ведь когда сайты ломают, то ставят левые ссылки не напрямую в код, ибо так их легко спалить, а как-нибудь через яваскрипты и прочее. У меня я вижу только 1 скрипт от библиотеки jquery и от счетчиков Яндекс метрики и лайвинтернета.

Вкладка «Сеть» оказалась тоже очень и очень полезной. На ней можно отследить во-первых, что именно загружалось в процессе формирования страницы, а во-вторых, за какое время. Например, вот как выглядит время загрузки моей главной:



Также она позволяет отслеживать http запросы. Мне, например, это нужно когда я балуюсь написанием очередного парсера (что это?) 🙂