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.

    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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
                        Огненная сумка =)?
                    • +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. Надеюсь теперь он не будет так часто перезагружаться.
                                • +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'е в самом конце написано: Томица Кораћ. Это я так понимаю проблемы перевода.
                                                              • +10
                                                                ⌘ + ⌥ + I


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

                                                                • +4
                                                                  маководы не понимают вашего удивления
                                                                • 0
                                                                  Проблема такая же, как у вебкитовского веб-инспектора – недостаток горячих клавиш. А в остальном все зачетно.
                                                                  • +1
                                                                    Вы уверены, что побывали в Настройках DFL > Клавиатурные сокращения?
                                                                    • +3
                                                                      Хотя беру слова обратно – в новой версии заметил вкладку «Клавиатурные сокращения».
                                                                    • 0
                                                                      бага с кешированием картинок так и осталась…
                                                                    • 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.

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