Opera dragonfly как включить

Обновлено: 05.07.2024

К счастью, каждый основной браузер предоставляет набор инструментов для разработки. Вы можете использовать Firebug в Firefox, IE Developer Tools, инспекторе веб-наборов или Opera Dragonfly. Тем не менее, вы можете не знать, что Dragonfly является бета-продуктом. Как и многие разработчики, я использовал его время от времени, но нашел несколько привлекательных функций, которые утащили меня от Firebug. До сегодняшнего дня.

Самым фундаментальным изменением является интерфейс. Бета-версии были немного уродливыми и дезориентирующими, но с версией 1.0 Opera выпустила прекрасный инструмент для разработки. Это выглядит так же хорошо, как инспектор веб-наборов, но гораздо яснее и не так загромождено.

Opera всегда предлагала отличные средства отладки JavaScript. Dragonfly продолжает эту традицию на вкладке «Сценарий», где вы можете отслеживать и устанавливать контрольные точки или точки останова в любом исходном файле. Интересно, что консоль JavaScript выглядит как наложение, поэтому вы все равно можете просматривать и перемещаться по информации в основном интерфейсе. Это умная идея и хорошо работает.

Аналогично, вкладка «Ошибки» сообщает о ряде проблем в виджетах HTML, JavaScript, CSS, XML, XSLT, SVG, Opera и других. Одной из лучших функций является фильтр, который удаляет ошибки CSS, вызванные свойствами с префиксом поставщика.

Вкладка «Хранилище» позволяет просматривать, изменять и удалять данные в файлах cookie, локальном хранилище HTML5, хранилище сеансов HTML5 и виджетах. Firebug пока не предлагает эту возможность, и, хотя инспектор веб-наборов немного красивее, реализация Dragonfly проще в использовании и предоставляет лучшие возможности редактирования.

Наконец, если вам этого недостаточно, Dragonfly предоставляет удаленную отладку для мобильных телефонов, планшетов, телевизоров и любых других устройств с помощью Opera Mobile.

  1. Щелкните правой кнопкой мыши инструмент или строку состояния и выберите «Настроить», а затем «Внешний вид».
  2. Выберите вкладку «Кнопки», затем выберите «Просмотр браузера».
  3. Перетащите значок Opera Dragonfly на панель инструментов.

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

Если вы уже пробовали Dragonfly, но не оценили его, я призываю вас взглянуть еще раз. Я провел несколько счастливых часов, улыбаясь от уха до уха, играя с новыми развивающими игрушками.

Сейчас мало кто задаётся вопросом: «А как вот эта штука будет работать без Интернета?». Ещё меньше есть тех, для кого автономная работа той или иной программы или инструмента является важной составной частью рабочего процесса. И совсем немногим хотелось бы заполучить в автономном режиме отладчик Opera Dragonfly под Opera 12 Presto.

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

Opera Dragonfly Local

Прежде всего, коротко о том,

С чего всё началось

На этом лирическая часть закончена.

Как сделать Opera Dragonfly доступной локально

Пишу в контексте операционки Windows 7 64bit. Но справедливо будет для любой винды, и по большей части и для иных осей.

Общее начало

Далее есть три рабочих пути.
Можно было, конечно, ограничиться первым попавшимся или оптимальным, но для полноты изложения и картины описываю все найденные возможности.
Как наиболее корректный и простой советую 2-й способ, пронумерованный под литерой B).

A) — Первый видимый путь, в лоб.

B) — Более короткий и красивый путь.

С) — Путь настоящего воина

Как оказалось, DragonKeeper собирать может, ну наверняка же, и крутая штука, и не только собирать… Но для цели «соберу ка я Стрекозу из сурсов» на самом деле необязателен. Т.к. в сурсах Стрекозы есть собственный питонский сборщик с хороводом поддержки в подпапке /tools

Но если кто решится продолжить своими силами развитие Dragonfly под Оперу Presto, местные мануалы и Стрекозы, и Кипера подскажут много полезного.

Сначала интуиция подсказывала мне, что стоит взять Python 2

Пробуем собрать под Python 2.7.11

И тут на тебе, UnicodeEncodeError: 'ascii' codec can't encode character u'\u2026'
Потыркал немного, сказал, что я так не играю, и пошёл за другим питоном.

Пробуем собрать под Python 3.5.1

>python tools/dfbuild.py -dtsm src build
File «tools/dfbuild.py», line 393
except (IOError, os.error), why:
^
SyntaxError: invalid syntax

Кода вроде немного в питонячьих скриптах сборки Стрекозы…
Ради спортивного интереса, я было попробовал в полуручном режиме натравить регэкспы на сурсы:

except (.*)?, (\w+):
except \1 as \2:

(manually)
print
print\(

Оно всё равно легло, но уж совсем с непонятной мне, новичку в питоне, ошибкой, и тут я окончательно понял что что-то я делаю не так :)
Предварительно, я конечно забэкапил исходное состояние папки /tools. Восстановил его и решил чуть попристальней попробовать собрать под 2-м.

Пробуем собрать под Python 2.7.11, попытка 2.

File "tools/dfbuild.py", line 458, in _convert_imgs_to_data_uris
temp.write(line.encode("ascii"))
UnicodeEncodeError: 'ascii' codec can't encode character u'\u2026' in position 12: ordinal not in range(128)

Ладно… google, stackoverflow,…

Попробовал поменять методом тыка «ascii» на «utf-8»:
File "tools/dfbuild.py", line 465, in _convert_imgs_to_data_uris
fp.write(temp.read().encode("utf-8"))
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe2 in position 126562: ordinal not in range(128)

И ещё несколько попыток методом «Угадай Мелодию».

И тут я вернулся к началу, — а что за символ-то \u2026?
Ellipsis… так значит, многоточие говорите.
А код, который валится у нас, отвечает за обновление css-ки билда Dragonfly в процессе встройки туда base64 картинок.
И что там в необновившейся /style/dragonfly.css?
Ага. И правда, есть там оно, символ многоточия! В бинарной utf-8 кодировке.
(Кстати, как потом выяснилось, там ещё есть пару символов длинного тире)

И я нашёл как починить процесс билда! Только это уже вынесу из под спойлера наружу. Итак:

7. Dragonfly собралась в только что созданной подпапочке /build. Берём оттуда файлы client-ru.xml, style/dragonfly.css, script/dragonfly-ru.js
8. Остальное воину объяснять уже излишне.

Результат

Opera Dragonfly Local works!

Работают все три метода.
И да, это было увлекательно!

PS: Дойти рукам до публикации этого небольшого мана помог, уже и нежданный, выход обновления Opera 12.18

PPS: В заключение, упомяну про для многих уже долгожданный выход релиза Vivaldi — лучик света в тёмном царстве! Спасибо старой-новой команде во главе с Йоном фон Тэчнером и отдельно за освещение событий Илье Shpankov — тёплый вам привет и успехов!


Любой современный браузер должен обладать инструментами для web-разработчика, Opera в их числе, её "инструмент" зовётся стрекозой ( Dragonfly ). К сожалению, сие насекомое сильно уступает по удобству и функционалу Firebug -у и Chrome Developer Tools -ам. Но что есть, то есть. Среди прочих недостатков стрекозы — она расположена на сервере производителя, и не смотря на то, что её файлы сохраняются в кеше, он обновляется слишком часто, что может служить серьёзной преградой для её использования на работе или со сверх-дорогим интернет-каналом.

Рецепт 1 - Offline

Однако подключить стрекозу можно и offline. Для этого:


Если вы всё сделали правильно, стрекоза отныне у вас грузится почти мнгновенно, и что самое примечательное - офлайн. Минусы этого пути очевидны - обновлять придётся вручную, но тем кому этот рецепт пригодится, я думаю, это не помеха :) Кстати, в качестве файлов я вам подсунул эксперементальную ветку, так что не пугайтесь глюков. Я использую именно её, из-за того, что разработчики слишком затянули с выпуском версии-релиза.

Рецепт 2 - AJAX ответы

До недавнего времени, стрекоза не показывала ответы на ajax -запросы. Этот функционал "запилили", но спрятали во вкладке Network Log . Однако для того, чтобы сия возможность заработала - необходимо в под-вкладке Network Options включить настройку Content tracking behaviour . Имейте ввиду: исходя из описания, Opera станет работать медленнее и станет "кушать" больше памяти. Почему разработчики до сих пор не сделали адекватный аналог этой возможности у Firebug (отображение запроса в консоли, просмотр ответа в режиме JSON , XML , HTML ), остаётся лишь гадать, наверное, пресловутый opera-style. Впрочем, и реализация в chrome сильно подкачала. Надеюсь, опыт firebug-а вправит мозги и тем, и другим.


Любопытный читатель может задаться вопросом - а зачем же тогда её использовать? - Для того, чтобы поддерживать нормальную работу сайта во всех основных браузерах, приходится использовать все доступные средства.

Раньше я думал, что для оперы нет дебаггера, но не так давно поставил отличный дебаггер под оперу, и приятно удивился. Может всё тоже самое, что и Firebug, и даже немного больше.


Единственное, что интерфейс немного непривычный, и иногда подтормаживает.

Вот возможности, которых нет в фаербаге:

Изображение растягивает дизайн. Сделайте превью и полное изображение по ссылке, пожалуйста.

но не так давно поставил отличный дебаггер под оперу

Вы его не поставили, он встроен в Opera 9.50+

Просьба картинки такие длинные уменьшать.

Может всё тоже самое, что и Firebug, и даже немного больше.

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

это как? разве firebug в каждой вкладке не независим?

Удобная консоль ошибок, которая показывает также CSS-ошибки

в firebug по умолчанию выключено, так как есть встроенная консоль ошибок. чтобы включить, options (на панели firebug) -> show css errors

Дебаг javascript - структурирует все функции, объекты, подсвечивае JS-синтаксис

что значит структурирует? подсветка синтаксиса есть и в firebug, ставится отдельно (правда пока в статусе experimental)

Дебаг CSS - разделение по файлам/втроенным стилям.

в firebug тоже
p.s. добавлю, что делать dragonfly в виде js-файла, внедрённого в страницу, считаю не очень правильным. во-первых, для его работы нужен включенный js (очень часто отключаю) и включенные картинки (у меня выключены). да и к тому же, opera довольно неплохо поддерживает стандарты, поэтому dragonfly может никогда не понадобиться

что бы Dragonfly не "притормаживал", расположите у себя на копутере

установил Opera 10.60 - перестал работать Dragonfly.. Что за фигня - идет вечная загрузка и всё.. Блин. Как решить проблему?

надо удалить драгонфлай из локального хранилища в настройках оперы, тогда он будет грузиться с сервера, но будет работать. впиньтюхать его обратно на локаль не проблема.

Читайте также: