Помогая другим, помогаешь себе.
Создадим реальнyю виртyальность !
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 запросы.
