Обновление Firefox Developer Tools

    Вместе со свежей версией Firefox Aurora представлены новые инструменты разработчика Firefox Developer Tools, в которых реализован ряд очень интересных нововведений. Например, в редакторе кода появилась возможность множественного выделения (удерживая Ctrl/Cmd).



    Это позволяет одновременно редактировать несколько строк кода. Кроме того, теперь можно выделять произвольный прямоугольник (Alt), отменять и возвращать отменённые выделения (Ctrl-U/Cmd-U и Alt-U/Shift-Cmd-U).

    Блоковая модель в Инспекторе позволяет изменять значения габаритов, просто щёлкнув по ним и введя нужное значение. Или можно смотреть, как масштабируется элемент на экране, нажимая кнопку «вверх» или «вниз» (шаг 1), удерживая Alt (шаг 0,1) или Shift (шаг 10).



    В том же Инспекторе появился новый инструмент Eyedropper для определения цвета любого пиксела на экране. Кнопками «вверх» и «вниз» передвигаемся к соседним пикселям. Удерживая Shift — по 10 пикселей.



    Логи Консоли console.error, console.exception и console.assert теперь сохраняют полный стек вызовов при трассировке. Для всех сетевых логов возможна постоянная запись, которая не прекращается на новых вкладках и после перезагрузки браузера.



    В Мониторе сети повторная отправка запросов стала удобнее с помощью команды “Copy as cURL”.



    В экспериментальном режиме пока работает новый дебаггер для отладки отдельных кадров анимации (WebGL и 2d canvas).



    Появился и отдельный дебаггер для расширений к Firefox.



    Нынешняя Aurora дорастёт до стабильного релиза к июлю 2014 года и выйдет как Firefox 31, но скачать её можно уже сейчас.
    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 38

      +5
      Удобная штука «Copy as cURL». Не знал о ее существовании до прочтения этого поста :)
        +2
        FireBug, к слову, тоже так умеет, причём, очень давно.
          +2
          В хроме этой фиче уже ~год :)
            0
            Вот я в Хроме и нахожу новые фишки, когда лезу посмотреть есть ли уже в нем будущие новинки FF.
          +6
          — И что, теперь FireBug можно не юзать?
          — Нет.
            +2
            Firebug one love.
              +6
              решил на днях перейти на родной инспектор, отключив файрбаг, поведясь на море функционала. После нескольких дней использования выяснил, что функционала море, а вот удобных мелочей, которыми я пользовался в файрбаге, нет.
                +6
                А можно подробнее? Что за мелочи?
                  0
                  ну вот навскидку что сразу вспомнилось: в закладке Network нигде не нашел ip сайта, а в файрбаге он отображается на видном месте. Я часто туда заглядываю для проверки ip, чтобы не лезть в консоль ОС. Еще например для отладки аякс-запросов полезна фича Persist — допустим у вас аякс-запрос, который вызывает редирект: в файрбаге с помощью persist можно сохранять историю запросов, а в DevTools после перезагрузки страницы история очищается, и невозможно посомтреть результат аякс-запроса.
                    0
                    а в DevTools после перезагрузки страницы история очищается, и невозможно посомтреть результат аякс-запроса.
                    В настройках консоли DevTools есть опция «Enable persistent logs» которая сохраняет результат даже после перезагрузки страницы. А вот про IP сайта — кажется Вы правы.
                      +1
                      эта опция для консоли, а не сетевых запросов.
                        0
                        Извините, неправильно понял Ваш комментарий. Дело в том, что в консоли также можно посмотреть сетевые запросы и я ошибочно предполагал что это именно то что Вам нужно.
              0
              Жаль что firebug просто адово тормозной при рефрешах.
              +1
              Styled console logs

              (инфа в оригинале)
              Кому что, а мне хочется сказать: «ну наконец-то можно будет и в фоксе издеваться над консолью!»

                +3
                Когда же все во всех инструментах разработки браузеров появится многострочная консоль с подсветкой синтаксиса. Это единственное что удерживает меня на firefox+firebug+acebug. Удобнее для написания алгоритмов может быть только инструментарий, показанный на этом видео.
                  0
                  В ИЕ не помню с какой версии, наверное с той, что впервые появилась с DevTools есть многострочная консоль. Правда без подсветки.
                    0
                    В Firefox'е еще есть Scratchpad с подсветкой синтаксиса.
                      0
                      Но Scratchpad'а нету в консоли
                    –1
                    Если честно, мне не нравится когда браузер превращают в среду разработки. Этот те функциональности, которые не нужны 95% пользователей. Так зачем же им всем это давать? Сделали бы в виде дополнения или вообще отдельного продукта.
                      +1
                      Затем, чтобы когда заказчик говорит «а у меня на компьютере ничего не работает», можно было бы прямо у него ткнуть Ctrl+Shift+K и начать выяснять причину — может быть, даже и выяснить её тотчас же.
                        0
                        Тут палка о двух концах. Все таки рядовому пользователю это действительно не к чему, но опять же очень удобно, когда с любого браузера в любом месте можешь посмотреть, почему сломалось (а иногда выпилить особо назойливую рекламу, кто ж так не делал. Я про тот случай, когда не стоит адблок).

                        Мне кажется, что оптимальным решением было бы что-то типа vim. Т.е. легковестная, одинаковая и доступная у всех консоль, при этом с большим количеством возможностей. Если не хватает возможностей — можешь доставить их расширениями. Но вот в плане браузера, какой можно придумать аналог вима — мне, пока, не очень понятно.
                          +1
                          Ага, как пятое колесо, тифу, запаска в машине :D
                            0
                            Я жену научил изменять параметр maxlength в форме одного сайта которым она часто пользуется.

                            И если не запускать отладчик, то его как будто бы и нет вовсе, память не расходует, проц не нагружает.
                              0
                              Вот ты извращенец. Написал бы три строчки кода UserScript'а — нервы сэкономил бы и время себе и жене.
                          0
                          Встроенный инспектор все лучше и лучше становится, но кто-нибудь может объяснить как по-человечески ставить брейкпоинты на DOM-элементах? В Chrome это легко делается правым кликом по любому тегу.
                            0
                            А в инспекторе при выборе объекта раньше можно было прямо с его подписи скопировать ID а теперь нельзя :(
                            А вообще было удобно, когда часть dev tools была вертикальная, а часть горизонтальная.
                              +1
                              А еще вышел основанный на нем firebug 2, пока бета.
                                0
                                отменять и возвращать отменённые выделения (Ctrl-U/Cmd-U и Alt-U/Shift-Cmd-U)

                                Я понимаю, что в консольных редакторах типа MC используются U, но все таки почему не классический Ctrl-Z/Ctrl-Y?
                                  +1
                                  Видимо потому, что U — undo
                                    0
                                    Очевидно, это разные функции — Ctrl+Z отменяет редактирование кода, а Ctrl+U — работу с выделением, в текстовых редакторах и IDE такая практика присутствует (в Sublime вроде как раз Ctrl+U отменяет выделение).
                                    +5
                                    Мода пошла на множественное выделение. Удобно, молодёжно, но так ни разу и не пользовался на практике :)
                                      0
                                      Вы либо не проводите рефакторинг, либо не работаете со статическими сайтами аля Landing page?
                                        +1
                                        А когда весь код страниц собирается на сервере из уймы классов, как быть? Рефакторить в браузере ?)))
                                          +2
                                          Мне вот тоже до конца не понятно необходимость такого функционала внутри браузерной консоли. Тот же Шторм все это давно умеет.
                                            0
                                            даже это не получается использовать, банально нет времени ознакомиться, использую рефакторинг. А где не помогает рефакторинг —
                                            комманд+шифт+F (Поиск по проекту).
                                              0
                                              PhPStorm, кстати, пока в релизной версии, делать это не научился, в 8-й версии добавят, сейчас только EAP, да и WebStorm 8-й с поддержкой этой фичи только недавно вышел.

                                              А вещь вообще удобная, ускоряет многие мелкие правки кода. Рефакторить лучше в IDE с помощью специальных операций, а вот поменять у 10 ссылок «javascript:void(0);» на "/" (мало ли что бывает) — по-моему, самый быстрый способ в Саблайме выделить первый случай и давить Ctrl+D.
                                              0
                                              Ну инструменты разработчика в Firefox, как и в любом другом браузере чаще используют разработчики интерфейсов. Поэтому печально, если ваш интерфейс собирается из кучи классов на сервере, вместо какого-нибудь шаблонизатора.
                                          0
                                          Не могу почему-то я их использовать вместо фаербага…

                                          Only users with full accounts can post comments. Log in, please.