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


Инспектор Opera Dragonfly пополнился новыми возможностями

Вышла новая финальная версия инструмента для разработчиков в браузере Opera — Opera Dragonfly.

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

Сокращенные представления CSS

Ранее в инспекторе стилей всегда было развернутое представление всех свойств CSS. Так, например, запись 1px solid rgb (255, 0, 0); выглядела следующим образом:

Теперь по умолчанию все свойства представлены в сокращенной записи. Если вы желаете вернуться к старому варианту — достаточно в списке свойств кликнуть правой кнопкой мыши и поставить галочку напротив пункта Expand shorthands:

Вернуть назад настройку можно будет сняв галочку.

Отображение ошибок JavaScript

Теперь ошибки, возникающие при выполнении JavaScript показываются сразу в всплывающих элементах в закладке Скриптов, а не только в Панели ошибок, как это было раньше.

Улучшение списка выбора скриптов

Улучшен выпадающий список со скриптами, находящийся во вкладке «Скрипты»:

В качестве улучшений расширены возможности фильтрации и управления с клавиатуры. Когда открывается выпадающее меню — оно автоматически получает фокус клавиатуры и клавишами и можно выбирать необходимый скрипт.


С помощью клавиш SHIFT + ↑ \ ↓ — можно передвигаться по истории фильтрации поиска.

Выбор формата цвета

Настройка, которая часто запрашивалась пользователями — теперь доступна в стабильном релизе. Можно самому установить в каком формате отображать настройки цвета: Hex, RGB или HSL.

Для выбора идем в «Настройки» Opera Dragonfly (кнопка расположена в верхнем правом углу, вторая слева) -> далее переходим на вкладку «Документы» -> ищем подраздел «Стили»:

Здесь и можно выбирать нужный формат отображения цвета.

Стоит только добавить, что стабильной стала версия Opera Dragonfly 1.2012.03.15.2. Как вы помните, разработчики не так давно перешли на новую систему нумерации.

Чтобы запустить новую версию необходимо на странице нажать правой кнопкой мыши и выбрать пункт «Проинспектировать элемент». Или на клавиатуре нажать комбинацию CTRL+SHIFT+I. Если вы пользовались данным инструментом ранее, не забудьте удалить копию из локального хранилища браузера Opera.

Webtun.com — веб обозреватель

Opera Dragonfly 1.0 — вышла финальная версия отладчика от Opera

Opera Dragonfly — инструмент для веб-разработчиков. Работает на технологии javascript. Сегодня вышла финальная версия инструментов для разработчика Opera Dragonfly 1.0 , встроенных в браузер Opera. Открыть их проще простого: просто нажмите Ctrl + Shift + I или ⌘ + ⌥ + I, в зависимости от вашей системы, или выберите «Проинспектировать элемент» для любого блока на странице. Opera Dragonfly представляет собой HTML5-приложение, которое запускается в браузере и может работать как онлайн (поэтому у вас всегда будет актуальная версия), так и офлайн при помощи технологии AppCache из спецификации HTML5.

Илон Маск рекомендует:  Запуск внешнего приложения и ожидание его завершения

Раньше для того, чтобы попробовать новую версию, приходилось править opera:config и внимательно следить за экспериментальными ветками в блоге разработчиков, но сейчас новый Dragonfly переехал по умолчанию во все браузеры Opera. Убедиться в том, что вы используете стабильную ветку можно следующим образом:


Откройте Opera и перейдите по ссылке: opera:config#DeveloperTools|DeveloperToolsURL

Убедитесь в том, что там стоит значение по умолчанию: https://dragonfly.opera.com/app/ — для этого вы можете просто нажать кнопку «По умолчанию» и перезапустить браузер.

Просмотр DOM;
Просмотр и редактирование CSS;
Отладчик javascript;
Просмотр HTTP запросов;
Отлаживать страницы для мобильных устройств;
Удалённо подключаться к любым компьютерам и устройствам с установленным браузером Opera, поддерживающим данный инструмент, и осуществлять отладку веб-страниц;
Локализация на 37 языках[11].
Также в инструмент входят:
Консоль ошибок;
Командная строка.

И напоследок: небольшой скринкаст Брюса Лоусона, демонстрирующий работу с новым отладчиком Opera Dragonfly.

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

src : source code for dragonfly client

docs : documentation that is not auto-generated

tools : tools needed for building/distributing/testing

When working on the code base you should use the dragonkeeper tool. See dragonkeeper’s README for more information.

Note: It is not necessary to build Dragonfly during development. See above.

Building is done using the df2 tool. For more information, see https://github.com/operasoftware/dragonfly-build-tools.


Running test builds of dragonfly

Open opera:config#DeveloperTools|DeveloperToolsURL and set the URL to the path to the Dragonfly build to use.

NOTE: While translated strings are placed in the src/ui-strings directory, that is not the authoritative location for translations. Strings are kept in Opera’s translation infrastructure, which uses .po files. These are not publicly available.

As a consequence, we can not integrate string fixes from volunteers by simply merging new versions of the JavaScript string files.

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

Поставил новую оперу, все было хорошо, часто использовал Opera Dragonfly для быстрой отладки и «откусывания» необходимых файлов через элемент Сеть. Обновление было выключено из соображений: «новое не всегда лучше». Все это время Dragonfly подгружался с https://dragonfly.opera.com/app/cutting-edge/, но со временем вышла куча обновлений как на оперу, так и на Developer Tools, что при вело к дополнительному окну несовместимости новой Dragonfly с Opera, был редирект на старую версию, и ничего такого бы ни было, если бы не это постоянно выскакивающее окно. Решил исправить, скачать оффлайн старую версию Dragonfly и вложить ее в Opera.
Для этого скачиваем с https://dragonfly.opera.com/app/zips/ свою версию ZIP архива, для меня это была https://dragonfly.opera.com/app/core-2-5/zips/2012.12.14.4d106476132f/client-ru.zip (можно посмотреть в версии своего Dragonfly).

Нас сразу кидает к разделу DeveloperTools, там есть форма ввода для пути, стандартно там https://dragonfly.opera.com/app/.

Вбиваем путь к файлу client-ru.xml , с архива, который мы распаковали, что-то наподобие: file://localhost/C:/Users/%USERNAME%/AppData/Roaming/Opera/client-ru.xml

Сохраняем, нам говорят что настойки сохранены, перезапускаем браузер.

Opera Dragonfly 1.1: улучшенный поиск и другие нововведения

Выпущена новая версия кросс-платформенной среды для отладки и разработки Opera Dragonfly 1.1. Этот инструмент интегрирован непосредственно в браузер и поддерживает отладку JavaScript, просмотра DOM, мониторинг сетевого трафика, предпросмотр ресурсов, редактирование цветов и т.д. Opera Dragonfly поддерживает и удаленную отладку, благодаря чему инструмент можно использовать при работе с мобильными телефонами, телевизорами и другими устройствами.


Среди особенностей релиза 1.1 можно выделить:

  • Новая панель поиска в DOM-инспекторе и в инспекторе ресурсов;
  • Улучшенные возможности поиска в отладчике JavaScript;
  • Поддержка POST и multipart POST в сетевом инспекторе;
  • Полностью переработанный лог ошибок;
  • Новая полноценная панель консоли;
  • Авто-подстановка встроенных объектов.
Илон Маск рекомендует:  all в CSS

Более подробно об изменениях можно узнать тут.

В помощь web-разработчику: Opera Dragonfly

На форумах web-разработчиков Интернет-проектов часто встречаешь один и тот же вопрос – есть ли аналогичное приложение FireBug(-у) в Opera?
Сегодня могу ответить на этот вопрос однозначно – да, есть и название этого приложения Dragonfly. Вот только остается загадкой, почему разработчики обозвали свое творение именно стрекозой (Dragonfly – в пер. с англ. «стрекоза»)?


Opera Dragonfly инструкция и ее возможности

Для более четкого восприятия возможностей инструмента Dragonfly вызовем ее. Чтобы это сделать, переходим в — Главное Меню — браузера, затем выбираем – Страница – Средства Разработки — Opera Dragonfly.
Вызвать инструмент можно при помощи сочетания клавиш Ctrl+Shift+I

Теперь возможности «стрекозы»
Просмотр DOM – Document Object Model (объектная модель документа). Это свойство позволяет просмотреть html-страницу из нутрии. Проанализировать иерархию страницы, расположение ее отдельных элементов.
Просмотр и редактирование CSS. С этой опцией можно легко просмотреть, отредактировать правила отображения отдельного элемента страницы. Эта возможность будет незаменимой при изменении цвета, расположении текста, блока, поскольку внесенные правки вступают в силу незамедлительно.
Отладчик JavaScript предоставляет информацию о присущих на странице JavaСкриптах. С помощью этой опции можно просмотреть не только наличие скриптов, но и детально их проанализировать.
Просмотр HTTP запросов предоставит информацию о скорости загрузки элементов страницы.
Разработчики «стрекозы» не забыли о мобильных телефонах, смартфонах и как не легко веб-мастеру настроить отображения сайта на этих устройствах. Чтобы хоть как-то облегчить эту задачу воспользуйтесь отладкой страницы для мобильных устройств.
Если честно, не пробовал и не тестировал удалённое подключение к удаленному ПК или устройствам с браузером Opera. Поэтому о этой возможности с радостью почитаю у Ваших комментариях.

И в завершении, несколько слов о том, как проверить наличие приложения в браузере и как его установить, если оно отсутствует.
Чтобы проверить наличие «стрекозы» в адресной строке Oper-ы набираем ссылку: opera:config#DeveloperTools|DeveloperToolsURL
В предоставленной статистике смотрим ссылку, она должна быть

если такова отсутствует, впишите ссылку официального сайта и перезапустите браузер.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
SunnyDay (блог) , 17 окт 2008 — 12:10
  • отладчик сценариев

Opera Dragonfly Debugger

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

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

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

  • Работа с каждым HTTP-запросом по отдельности.
  • Удобная консоль ошибок, которая показывает также CSS-ошибки
  • Дебаг javascript — структурирует все функции, объекты, подсвечивае JS-синтаксис
  • Дебаг CSS — разделение по файлам/втроенным стилям.

Более подробная информация и ссылка на скачивание тут: http://www.opera.com/products/dragonfly/

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

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

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

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


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

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

Работа с каждым HTTP-запросом по отдельности.

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

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

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

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

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

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

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

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


  1. Скачайте стабильные или еженедельные сорсцы Dragonfly
  2. Распакуйте.
  3. Вбейте URL до файла client.xml (например, c:\dragonfly\client.xml или file://home/Ti/.dragonfly/client.xml или http://localhost/dragonfly/client.xml) в opera:config#DeveloperTools|DeveloperToolsURL
  4. Сохраните и перезапустите бразуер. Вуаля!

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

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

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

Поставил новую оперу, все было хорошо, часто использовал Opera Dragonfly для быстрой отладки и «откусывания» необходимых файлов через элемент Сеть. Обновление было выключено из соображений: «новое не всегда лучше». Все это время Dragonfly подгружался с https://dragonfly.opera.com/app/cutting-edge/, но со временем вышла куча обновлений как на оперу, так и на Developer Tools, что при вело к дополнительному окну несовместимости новой Dragonfly с Opera, был редирект на старую версию, и ничего такого бы ни было, если бы не это постоянно выскакивающее окно. Решил исправить, скачать оффлайн старую версию Dragonfly и вложить ее в Opera.
Для этого скачиваем с https://dragonfly.opera.com/app/zips/ свою версию ZIP архива, для меня это была https://dragonfly.opera.com/app/core-2-5/zips/2012.12.14.4d106476132f/client-ru.zip (можно посмотреть в версии своего Dragonfly).

Нас сразу кидает к разделу DeveloperTools, там есть форма ввода для пути, стандартно там https://dragonfly.opera.com/app/.

Вбиваем путь к файлу client-ru.xml , с архива, который мы распаковали, что-то наподобие: file://localhost/C:/Users/%USERNAME%/AppData/Roaming/Opera/client-ru.xml

Сохраняем, нам говорят что настойки сохранены, перезапускаем браузер.

будет DragonFly и Extentions Opera по-прежнему существует в Webkit мире?

Я просто увидел , что Opera не будет использовать Presto , и переключается на WebKit, так будет DragonFly все еще существует, или это будет заменен на Chrome инспектор?


А как насчет расширения тоже!

Да, Opera Dragonfly будет существовать. В настоящее время бета-версия Opera 15 включает в себя веб-инспектор, однако, Opera портировании Opera Dragonfly на Blink. Он будет включен, когда будет готов.

Примечание: Я был формально продакт-менеджер Opera Dragonfly, перед переключением компаний.

Opera dragonfly

Автор: Vlad, 10 февраля 2011 в Флейм

Рекомендованные сообщения

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Войти

Уже зарегистрированы? Войдите здесь.

Статистика пользователей

Сейчас на странице 0 пользователей

Нет пользователей, просматривающих эту страницу.

Спрашивают сейчас

Автор: decode
Создана Суббота в 16:49

Автор: npofopr
Создана 18 октября

Автор: digenis
Создана 14 часов назад

Илон Маск рекомендует:  Opengl приложение a
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL