Пользователь
0,0
рейтинг
5 мая 2011 в 13:46

Разработка → Opera Dragonfly 1.0



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



Основные инструменты, со ссылками на документацию





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

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


Локализация


Мы постарались перевести Opera Dragonfly на русский язык как можно ближе к тому, как говорят разработчики. Но есть ещё куда двигаться: если вы нашли какие-то неточности, непереведённые места или знаете как сформулировать перевод удачнее — пишите мне на pepelsbey@opera.com.

Обзор возможностей


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

Вадим Макеев @pepelsbey
карма
229,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (99)

  • +4
    Круто, не ожидал такое увидеть.
  • +10
    Из того, что в глаза бросилось — скорость работы (а особенно загрузки) значительно возросла. Да и функционал весьма неплох, для решения «из коробки». Большое спасибо за релиз.
    • +2
      Скорость работы просто молча радует. А вот в глаза бросаются бледнючие цвета, словно краски пожалели. Неужели поярче чуть-чуть нельзя было сделать? Нечитабельно ведь.
      • 0
        Задача была сделать неброский интерфейс, который одинаково смотрится под любой платформой. А что касается бледности — то самое важное выделено, а вторичное уведено на периферию.
        • +1
          Гм. Так интерфейс получился слишком уж «неброский. В DOM глаза сломаешь, пока прочитаешь значения атрибутов. Или это посчитали вторичным?
          • +4
            А по-моему рыжий (#A54) на белом — это достаточно ярко.
            • +3
              Это ярко?!
              image

              Вот ярко:
              image
              • +9
                Ярко, но слишком уж как-то вырвиглазно.
                • +1
                  Это рядом, когда можно сравнить. А вот попробуйте поработать с каждым интерфейсом в отдельности. От вырвиглазно-яркого не так сильно устаешь, т.к. читать мелкий текст намного легче. Я не говорю, что цвета файрбага так уж хороши, их в самом деле стоило бы сделать чуть бледнее, но не настолько, как это сделано в dragonfly. Или нужно вообще какое-никакое соломонов решение: например, подключаемые стили подсветки синтаксиса, чтоб каждый мог настроить себе вмеру вырвиглазный вариант.
              • +9
                У всех свои любимые фломастеры — для меня Firebug адово ярок, а это в самый раз:

                • 0
                  А то у вас за шрифт стоит? И как его сменить? Мб со сменой шрифта читабельность повысится. Кстати, одна из причин плохой читаемости — ноутбучный жк. Цвета внизу экрана выглядят напорядок бледнее, чем есть.
                  • 0
                    Шрифт у меня Menlo, который по умолчанию идёт для Mac OS.
                  • 0
                    Его можно менять в настройках: Settings / General / Monospace Font
                    • 0
                      ЧЯДНТ? Выставляю в настройках шрифт, но ничего не изменяется. Ни обычный, ни моноширный. Как я выставлял когда-то давно Tahoma и Console, так они и работают. Выставил Calibri и Lucida Console, но ничего не поменялось. Перезагруз браузера не помогает =\
                      • 0
                        У меня всё работает — выбираю шрифт и он тут же меняется.
                        • 0
                          Фигня какая-то pix.am/FC9h.png
                          Кстати, у меня еще после сохранения настроек всегда на всех открытых вкладках вылезает панель поиска по странице. Судя по всему, опера глючит где-то.
                          • +1
                            А вы не там это делаете. Вам нужны настройки не содержимого страниц браузера, а настройки DFL: Основные > Моноширинный шрифт

                            • 0
                              Тьфу, я балда :) Совсем сегодня крыша едет. Спасибо.
                • 0
                  Почему бы не дать возможность базовой настройки цветов? Я вот очень люблю темную систему и с удовольствием поставил бы темный фон и светлые буквы.
  • +3
    когда увидел все эти полупрозрачные консоли поверх основной панели и прочие плюшки, невольно подумал
    опять что нибудь в опере да не заработает
    надо отучаться :)
  • –6
    Как-то сильно уж похоже на хромовский.
    • +1
      А «хромовский» вам FireBag ничем не напоминает?
      • 0
        Всё удачное рано или поздно копируют :)
      • +21
        Огненная сумка =)?
        • +3
          Шутка про медведя.
    • +7
      Сходство есть, да и функционал схож (что не удивительно так как задачи то одни) — но чисто субъективно, оперовский гораздо удобнее
    • +1
      В Опере правая кнопка заработала =). Надеюсь, в хроме тоже скоро заработает.
      • 0
        c 10.50 же работает, не?
      • 0
        Куда-то не в ту сторону заработала. Теперь копировать, например, значения атрибутов можно только хоткеями.
  • 0
    А в Опере 11.1 по умолчанию какой?
    • 0
      У всех одинаковый, если настроек не трогали.
      • 0
        Сорри, я имел ввиду — какая версия была в момент выхода 11.1? Я просто в тот момент заметил приличное увеличение скорости.
        • 0
          В момент выхода 11.10 была старая версия с зелёными кнопками и совсем уж базовым функционалом.
  • +3
    Уже научили его показывать тела запроса/ответа у AJAX запросов?
    • +3
      Проверил — показываются. Я рад. Как у братьев стало все.
    • 0
      вообще любых запросов!
    • +7
      И можно самому слать запросы прямо из драгонфлая. Очень крутой релиз.
  • +1
    Хорошо, что теперь можно его оффлайн открывать. Доставало, что каждый раз он загружался. Качаю Оперу.
    • 0
      Он и раньше работал оффлайн, просто были некоторые проблемы с AppCache, из-за чего кеширование срабатывало не всегда.
      • 0
        А мне еще кажется, что он каждый раз загружался, потому что версия была не стабильная и все время обновлялась. Я сидел на experimental. Надеюсь теперь он не будет так часто перезагружаться.
        • 0
          Думаю поэтому тоже.
  • +2
    Я побаиваюсь запускать стрекозу. При запуске панель внизу появляется всегда, а сам драгонфлай иногда подтупливает и перестаёт загружаться, а если он не загрузился, то и кнопки закрыть драгонфлай тоже нет. И получается, что для того чтобы убрать эту белую панельку снизу, надо перезапустить браузер. Возможно, есть другой способ её перезагрузить в случае фейла, но интуитивно я ничего не нашёл.
    • +2
      Угу, препротивнейшая вещь была. Выключалась следующим образом: Меню -> Страница -> Средства разработки -> Opera Dragonfly. Собственно, именно сейчас вам и стоит попробовать стрекозу, ибо запускается ооочень быстро. Да и скорость работы хороша.
      • +1
        Зачем ходить так далеко: Ctrl+Shift+I или «Проинспектировать…»
        • 0
          Не «включалась», а именно «выключалась» :) Если при запуске стрекоза не прогружалась, то никаких кнопок для закрытия у нее не появлялось, вот и надо было по менюхам искать.
          • +3
            По-моему, этим сочетанием она и закрывается, даже если не прогрузилась.
            • +1
              Не исключено, у меня это сочетание вообще не работает. Наверное, какое-то другое приложение его заняло, но при нажатии ничего не происходит.
              • +1
                +1, аналогично, пришлось кнопку выносить на тулбар.
                смотрю шорткарты:
                Platform Windows-Unix-MCE, i ctrl shift
                Open Developer Tools Window | Close Developer Tools Window
              • 0
                заюзал утилиту HotKeys Explorer, показала то, что почему-то миранда повесила свои глобальные хоткеи.
          • 0
            Жестом можно закрыть
          • +1
            Ctrl+W срабатывает при фокусе на стрекозе.
            • 0
              Ага, вот только почему-то срабатывало 50/50. Какая-то фигня с фокусом, просто не ставится на dragonfly, хотя закликайся, и вместо нее закрывается страница. Так что я приловчился через меню ее закрывать. Да, собсно, какая к черту разница, новая стрекоза пока ни разу не затупила :)
    • +1
      У меня для вас три хороших новости:

      1. Стрекозу можно закрыть при помощи Ctrl+Shift+I (так же, как вы её открыли)
      2. Теперь при загрузке эта штука будет тормозить значительно реже, особенно если перейти на стабильный канал
      3. На сплеш-скрине с летящей стрекозой появились кнопки «Обновить» и «Закрыть»
    • +1
      Жестом закрывается отлично, как и любой другой окно в Опере. Или ctrl+w еще.
  • 0
    Порадовала возможность менять хедеры, недавно очень была нужна эта фича.
    • 0
      Да, отличная штука. Планируется добавить много других пресетов, кроме тех, что уже есть.
  • 0
    еще не очень удобно то, что отдельно узлы DOM-дерева нельзя сохранять, только целиком, да и то, будет сохранена только развернутая часть.
    • +4
      А можно так: выделяете нужный узел дерева, правой кнопкой «Редактировать разметку» и вот вам код.
      • 0
        спасибо, прикольно, не догадался сам :)
      • 0
        Даблклик!
    • 0
      находите там этот <div и даблкликом в «div». вот и все :)
  • +4
    А тело POST-запроса так и не видно. Или не могу найти, как смотреть?
    • +2
      Я тоже не нашёл как его посмотреть. А мне отладчик практически только для этого и нужен. :(
      • 0
        Никак. Где-то попадался топик с вопросом. Ответили что-то вроде «Этого пока не умеет Scope, как только, так сразу».
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Консоль есть, кнопка в верхнем правом углу, там же где «закрыть»/etc.

      Правило можно добавить еще так: двойной клик на существующем правиле, end, enter. Но согласен, не очень удобно.
    • 0
      Раздел DOM есть, консоль есть. Что в них не так?

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

      В файрбаге и вебките у вас нет возможности менять поведение подсветки. Вы просто её используете. Но иногда бывает, что все эти рамочки сильно мешают разобраться в свойствах какого-нибудь мелкого элемента или просто мельтешат и отвлекают. Здесь у вас есть выбор: настроили как удобно — и вперёд.
      • НЛО прилетело и опубликовало эту надпись здесь
  • +1
    1) Поподробнее бы информацию в network log: сколько ждали ответа, сколько грузили (а то, как я понял, оно сейчас суммарно)
    2) Из консоли ошибок нельзя перейти к тому файлу и месту где эта ошибка находится. (причем к самому файлу перейти можно, но только развернув ошибку и кликнув на имени файла в теле)
    3) Кнопка «Expand all» в консоли ошибок вовсе не разворачивает все, а просто инвертирует. Т.е. если у меня три ошибки и я развернул первую, то при нажатии на «Expand all» первая свернется, а остальные две развернутся.
  • 0
    А почему вывод console.log() появляется 2 раза, как во вкладке Erorrs, так и в самой консоле?
  • +3
    О боже, в нетворк-инспекторе можно смотреть боди резолва! Как же я этого ждал. Спасибо!
  • 0
    В about'е в самом конце написано: Томица Кораћ. Это я так понимаю проблемы перевода.
    • +2
      Не обижайте сербов: Томица Кораћ
      • 0
        Во время отпуска я...:
        Sleep and have sex

        Нормально отдыхают сербы :)
        • +2
          ещё он не любит albanians
  • +10
    ⌘ + ⌥ + I


    только у меня такие ассоциации?

    • +4
      маководы не понимают вашего удивления
  • 0
    Проблема такая же, как у вебкитовского веб-инспектора – недостаток горячих клавиш. А в остальном все зачетно.
    • +1
      Вы уверены, что побывали в Настройках DFL > Клавиатурные сокращения?
    • +3
      Хотя беру слова обратно – в новой версии заметил вкладку «Клавиатурные сокращения».
  • 0
    бага с кешированием картинок так и осталась…
    • 0
      И как его воспроизвести?
      Может просто конфликт с предыдущей версией и стоит почистить кэш (Tools / Delete Private Data / Delete entire cache) + переоткрыть Dragonfly?
  • 0
    Отлаживаю сегодня какой-то скрипт, нажимаю в очередной раз «Проинспектировать элемент», опа, а dragonfly не так выглядит, смотрю — версия стала 1.0 %)
  • +2
    Единственное, что огорчает в Dragonfly — это катастрофические тормоза на странице Network в процессе загрузки страницы. Это просто жесть нереальная. Приходится во время загрузки переключаться на другую вкладку dragonfly, иначе на тяжёлых страницах начинает тормозить вообще всё.
    • +2
      А еще оттуда убрали кнопочку «clear log». Неприятно.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    А можно как-нибудь сохранять изменения непосредственно на сервере сайта?
    • 0
      Может вам какой-нибудь редактор посоветовать удобный? Это отладчик, у него другие задачи.
      • 0
        Нет, спасибо. Я тогда по старинке блокнотиком и ftp :)
    • 0
      для фаербага было такое дополнение, шло вместе со скриптиком на пхп для сервера.
  • 0
    Было бы совсем здорово добавить бьютифаер (анти-обфускатор) в просмотрщик и дебаггер скриптов.
    • 0
      Одно дело бьютифаер — который просто разворачивает по некоторой схеме, а другое антиобфускатор — я даже не уверен, что это возможно. Но фичериквест принят.
  • +6
    Шикарный релиз!
    Правда очень не хватает инлайнового автодополнения в стилях, как в фаербаге, чтоб не нужно было каждый раз нажимать стрелку. И чтобы при добавлении нового свойства после написания названия свойства по табу переходило к значению, а не сбрасывало все написанное и прыгало на следующее свойство. Вобщем в этом плане хочется полный аналог фаербага.
    d → Tab → n = display:none;
    li → Tab → n = list-style:none;
    и т.п.
    Ну ведь удобно же до ужаса. Почему бы не сделать так же.

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

    Также очень не хватает работы с динамикой, как в фаербаге — подсвечивать изменения, разворачивать изменения, прокручивать к изменениям.

    Еще не хватает отображения строки, на которой находится css-свойство и, естественно, перехода на эту строку.

    Еще ооочень не хватает отображения всех свойств, а не только тех, которые опера смогла интерпретировать. Хочу как в хромом видеть все -moz, -webkit и т.п. Для удобства можно было бы сделать их отображение отключаемым.

    А еще почему-то драгонфлай так и не научился нормально работать с цветом CSS3 теней — он упорно не хочет показывать значение цвета.

    Еще стрекоза часто неадекватно ведет себя, когда переписываешь какое-либо свойство на другое.
    К примеру, мы хотим переписать у заголовка поста на хабре padding-right:30px; на margin-right:30px; — результат получается, мягко говоря, очень странный. Мало того, что в стилях по-прежнему будет отображаться padding-right:30px; (хотя его на самом деле нет и при повторном клике на элементе переписанное свойство исчезает), так драгонфлай еще и почему-то понял наш margin-right:30px; как margin:30px;. Очень досадный баг.

    Вобщем еще есть куда расти, а пока в целом очень доволен. Очень большой рывок по сравнению с предыдущей версией.
    • +1
      Спасибо за багрепорт, будет что рассказать разработчикам.
  • 0
    Все очень радостно, но единственное печалит, что эти горячие клавиши меняют работе дефолтных хоткеев на открытие полученного сообщения в QIP Infium.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.