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 запросы. Мне, например, это нужно когда я балуюсь написанием очередного парсера (что это?) :)
Комментарии:
Настраивать дизайн сайта с оперой одно удовольствие :) пробовал такой же инструмент на хроме и мозиле, но им далеко до стрекозы… :)
Вот это точно! В хроме обрезок функционала какой-то =)
Вот она, статья моей мечты :D! Dragonfly и вправду хорош. Не зря я себе поставил несколько браузеров. От каждого что-то полезное имею. От Оперы вот стрекозу ;)
Хорошо, что понравилась статья, значит не зря писал =)
у каждого браузера щас есть свои примочки для вебмастерства,у одного лучше у другого худше.
Точно не зря ;), я, например, был удивлен, что стрекоза поставляется уже в комплекте с Оперой, когда полез читать про ее установку в Интернет. А у тебя еще и расписано про остальные нехитрые, но все-таки пока мало изученные мною закладки и возможности dragonfly.
Вот поэтому-то я и использую каждый из них в каждом конкретном случае. Потому что где слабо справляется один, поможет другой ;)
Такого функционала как в стрекозе пока больше нигде нет. Есть именно сторонние программы которые поставляются независимо от браузеров.
штука хорошая. сам юзаю!
Угу, хорошая ;)
В Мозилле это штука называется Firebug (светлячок). Вот и кто у кого идею спер? :).
Кстати, я твой шаблон весь по на части разложил с помощью стрекозы ради интереса и саморазвития ;).
Ну и правильно что разложил, ну и как там, нормально? :D
Знаешь, вот за пару часов я проникся CSS настолько, что даже не знаю как я до этого мог без него обходиться. :) Кстати, позаимствовал у тебя закругленные края в рамках (интересно, но в интернете про это практически ничего нет). Я пока пробую туда-сюда стили менять на своем блоге в тестовом режиме. Прям оторваться не могу :D
О, это мне знакомо, я первые месяца 3 наверно только и делал что что-то менял в CSS’ке :) Ну успехов, я уверен что ты сделаешь все как надо) Если что — спрашивай, мало ли что, вдруг я буду знать ответ :D
Ок! Буду иметь ввиду ;)
Меня заинтересовала эта «Стрекоза» с точки зрения перевода терминов. Опера не стоит. Скачал инсталлятор в нем файлов Dragonfly не нашел.
Как найти их, чтобы в итоги придти к переводу терминов: т.е. менюшек, диалогов, строк в виде Английский — русский?
Стрекоза отдельно от Оперы не поставится.
Оххх, вот Женька задал задачку, мучаю теперь Оперу и себя)
нерадивый бухгалтер, ну зачем же мучить, можно ведь и удовольствие от этого получать, если сменить точку зрения ;)
Люди, все ето класно что Ви тут пишите, но! Толку с того, если всю мою работу низзя сохранить ! Толку с того, что я пол дня меняю все ети настройки сss, если при перезагрузке сайта или Dragon’а снова та же картина. А если мне всего-лишь одну картинку надо удалить с дерева DOM ? Не мог поверить, что нет кнопки «сохранить как»…Пока-што приходится через експорт, потом копировать в Источник, потом сохранять, потом…….но ето же издевательство !!!
Объясните, как идиоту: ЧТО выдаёт Dragonfly и КАК преобразовать это обратно в веб-страницу?
Статья класс! мне тоже нравится стрекоза в опере. Знаю что стрекоза в опере вызывается с сайта оперы и грузится в браузер. А можно ли оперовскую стрекозу залить в мозилу?….