Пользователь
0,2
рейтинг
21 июля 2012 в 20:47

Разработка → Firebug 1.10 — новые возможности перевод

13 июля, одновременно с выходом новой версии Firefox, было объявлено о новой версии Firebug (установить) — наиболее продвинутого и признанного отладчика фронтенда. Вместе с тимлидом разработки Jan 'Honza' Odvarko (его блог и прочие статьи о Firebug, где немало интересного) рассмотрим его новые возможности. Это тем более интересно, потому что сам браузер потихоньку набирает силы в отладке, и куда деваться — конкурент Хром подгоняет и обгоняет, и теперь даже вполне достаточно штатных средств отладки — показ и хождение по DOM, например, в 10-й версии уже такое, что для исследования багов аддон Firebug ставить не обязательно, а в 15-й версии обещается отладчик JS, быстрый и не влияющий на производительность страницы, со средствами удалённой отладки (важно для мобильных устройств). По тому же пути идёт Опера. (--прим. перев.).

Позвольте рассказать о новых возможностях вышедшего релиза Firebug 1.10.

В первую очередь, уточним, к каким версиям Firefox относятся последние версии Firebug:
Firefox 5.0 – 13.0 работает с Firebug 1.9,
Firefox 13.0 – 16.0 работает с Firebug 1.10.

Firebug 1.10 — настоящий коллективный продукт, поэтому позвольте представить всех разработчиков:
Jan Odvarko, Sebastian Zartner, Simon Lindholm и другие...
Jan Odvarko         Farshid Beheshti
Sebastian Zartner         Leon Sorokin
Simon Lindholm         Florent Fayolle
Harutyun Amirjanyan     Vladimir Zhuravlev
Steven Roussey         Hector Zhao
Joe Walker             Bharath Thiruveedula
Stampolidis Anastasios         Nathan Mische
Heather Arthur


НОВЫЕ ВОЗМОЖНОСТИ (кратко)
Инсталляция без перезагрузки браузера
Задержанная загрузка аддона
Управление куками
Подсветка синтаксиса в многострочной консоли ввода
Автозавершение переменных
Трассировка стилей
Консольная команда help
Ссылка на описание веб-шрифтов в CSS
Поддержка запросов @ import
Варианты показов Entities
Отображение формата цвета
Подсказки к элементам меню
Поддержка псевдокласса CSS ":focus"
HTTP запросы из BFCache
Удаление правил CSS Delete CSS Rule
        Подробнее:

Инсталляция без перезагрузки браузера


Установили, нажали F12 — и он готов к работе.
При обновлении с версии 1.9 браузер, всё же, придётся перезапустить.

Задержанная загрузка аддона


Теперь Firebug не тормозит браузер при запуске! Он включается, если только пользователь будет в нём нуждаться. Теперь его запускают только кнопка старта и команды меню.

Управление куками


(Раньше это делали многочисленные плагины самого Firebug и независимые --прим.перев.) Вы можете запретить куки для конкретных сайтов, редактировать, фильтровать, переключаться в отладчик, когда некоторые куки меняют значение (чтобы увидеть, что их изменило), и многое другое!

См. полный список функций, относящихся к кукам (англ.).

Подсветка синтаксиса в многострочной консоли ввода


Её ещё называют «командный редактор» (Command editor) — теперь и там есть подсветка синтаксиса.


Автозавершение переменных


Автозавершение в Firebug ещё никогда не было таким продвинутым. Оно работает при редактировании CSS, при поиске переменных в Watch при трассировке, при поиске точек останова — любые числа, цвета, шрифты и т.д.. Попробуйте просто изменить вашу страницу через Firebug, и всё увидите сами.

На рисунке — при вводе символов в панель Watch автозавершение предлагает доступные переменные из текущего окружения Javascript (scope).

Трассировка стилей


Посмотрите на все места в вычисленных стилях, на которые повлияло определённое правило CSS, через меню HTML -> Computed на правой части панели. Она теперь содержит также подсказки цветов, рисунков и шрифтов.

Видите 3 места, в которых правило пытается установить размер шрифта? В одном месте это ему удалось. Синий текст справа — кликабелен, ведёт на описания правил. См. подробное описание (англ.). (Аплодисменты — информативность этой панели возрастает --прим.перев.)

Консольная команда help


Чтобы показать описания встроенных в командную строку команд Firebug (да-да, есть такие, пара десятков, рекомендую посмотреть --прим. перев.), наберите в консоли "help". Появится список команд с кратким описанием.

Зелёные имена команд — это ссылки на вики Firebug с подробностями и примерами.

Ссылка на описание веб-шрифтов в CSS


Чтобы сделать быстрый переход к описанию кастомных, пользовательских шрифтов, нужно щёлкнуть правой кнопкой мыши по имени шрифта, выбрать Inspect Declaration, и вы попадаете в панель "CSS", аккуратно на объявление шрифта, как показано на рисунке.


Поддержка запросов @ import


Медиа-запросы CSS @ import отображаются в панели "CSS" и их можно редактировать. Работает, конечно, и автозавершение строки, и управление стрелками. Например, я нажал на «400px», когда делал скриншот, а затем клавишу — стрелку вверх; получилось «401px».


Варианты показов Entities


В меню "HTML" появились 3 пункта, чтобы изменять формат представления Entities (описаний специальных символов).

Поддерживаются также entities MathML.

Отображение формата цвета


В 3 меню: "CSS", HTML -> Style и HTML -> Computed меняем формат просмотра цвета (Hex, RGB, HSL):


Подсказки к элементам меню


Мелочь, но полезная для ориентирования: к каждой строке меню появились подсказки.


Поддержка псевдокласса CSS ":focus"


Кроме давно существовавших псевдоклассов :hover и :active, в меню HTML -> Style появился :focus. Это помогает увидеть результат действия стилей без самого действия: не надо наводить на элемент, чтобы увидеть все применяемые к нему правила :hover. Не надо фокусироваться, чтобы увидеть все стили :focus для этого элемента в правом блоке в разделе (панели) "HTML". Крайне полезно, если с фокусированием одновременно захотим скопировать отдельные правила — ведь, кликнув по панели Firebug, мы теряем фокус или наведение в окне браузера.


HTTP запросы из BFCache


Панель Firebug "Net" теперь отображает HTTP-запросы от специфического BFCache (Back-Forward Cache). Этот кеш в браузере обеспечивает быструю навигацию при хождении по истории (кнопки ВперёдНазад) и он не имеет общего с кешем браузера.

Как видно на рисунке, мы изменили фон для запросов из этого кеша, поэтому их легко отличить от настоящих серверных запросов. (На рисунке — только последний запрос идёт с сервера.)

Чтобы увидеть эти запросы, нужно, чтобы была установлена настройка Show BFCache Responses.

Удаление правил CSS Delete CSS Rule


Щелчок правой кнопкой мыши по правилу, ещё щелчок — и нет его… (А раньше надо было перещёлкивать по всем свойствам — прим. перев.)



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

* http://getfirebug.com/
* Firebug Weblog — все версии и нововведения (англ.).
* Для справки: Вся правда о Chrome (и не только) Web Inspector. Часть 1, @z6Dabrat, 14 мая 2012
Перевод: Jan Odvarko
spmbt @spmbt
карма
159,5
рейтинг 0,2
Реклама помогает поддерживать и развивать наши сервисы

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

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

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

  • –57
    Можете минусовать, но в хроме/сафари дебаггер куда удобнее этого вашего файрбага.
    • +44
      У дебагера Хрома при всех его достоинствах есть недостаток: он не работает в Firefox :).
      • –51
        Firefox не нужен.
        • +11
          (Надо же, на что тратят 1 свой голос в неделю знаменитые и редкие тролли.)
      • –2
        Фатальный недостаток :)
    • +12
      Я и сам пользуюсь Хромом т.к. на маке, как мне кажется, файрфокс ест слишком много памяти, но конкуренция — это хорошо. Пусть подстегивают друг друга, даже если вы и я не им пользуемся, нам все равно от этого косвенно лучше.

      КО
      • –29
        Меня смущает ещё тот факт, что файрфокс по внешнему виду (да и по функционалу) почти в точности повторяет кривой и косой дебаггер в IE7+.
        • 0
          Нет своего мнения — я уже года три живу на маке и не использую дебагер в файрфокс. Но, судя по всему, явно есть его поклонники, так что на вкус и цвет…
        • 0
          Ну то есть файрбаг, опечатка :)
        • +1
          Но ведь Firebug появился раньше IE7. И с тех пор интерфейс его не сильно изменился.
        • +4
          Говорить, что Хромовский дебагер лучше, это конечно холиварно, но ничего криминального. Но даже просто пытаться сравнивать фаербаг и отладчик в ИЕ(в 10ом не видел, может подтянулись)… Это просто некомпетентность.
          • +3
            По-мне так в лисе удобнее чуть-чуть чем в хроме. возможно просто привычнее.
            Но большой разницы нет. Про ИЕ молчу. Опера тоже не привычно, но вполне достойно.
            • +2
              Как браезером я пользуюсь хромом, а вот для отладки я запускаю файрфокс с файрбагом. Работа с сетью мне удобнее в файрбаге, да и как-то в целом приятнее.
              • 0
                а я по старинке httpfox использую для сети, и фик меня кто переубедит :)
                а файрбаг уже для всего остального.

                хром может кому-то и удобней, но я забил на него еще в давних версиях, в интервале 10-15, что ли, когда он просто напросто после установки не запускался и висел процессом, пока не убьешь, и так по кругу. лиса зато всегда работает и работала, пускай порой и есть 1.5 гб оперативки :)
              • 0
                тоже самое
    • +6
      И то, что в хроме дебагер лучше, совсем никак не связано с firebug'ом )
      • +1
        Это связано с тем, что в хроме DevTools разрабатывается вместе с браузером, а Firebug — плагин, который как не крути, имеет ограниченый доступ к API браузера.
    • +4
      Я тоже раньше был такого мнения, а вот недавно попробовал Opera Dragonfly и понял что для меня он удобнее чем Firebug и хромовский вместе взятые. Жаль что он только на опере идет…
    • +1
      Это субъективно очень. Мне, например, правкой верстки больше нравится заниматься в панели FireBug в FireFox, а отладкой JavaScript-кода в панели DevTools в Safari.

      Кстати, с выходом Safari 6 эта панель достаточно сильно изменилась, думаю не только внешним видом. Пока что ощущение, что стало хуже, вероятно попросту еще не привык.

      Стала выглядеть она вот так:

      Количество кнопок на панели выросло, они сами по себе стали маленькими, без подписей. Отделенная область поиска пропала, теперь стала одна кнопка общая. Панель навигации по дереву переместилась снизу вверх, появилось какое-то подобие вкладок. И все это на узенькой панели. Много спорных решений, в общем. Хотя что-то и стало лучше.
    • 0
      Видел я этот новый дебагер в сафари… Вот зачем они убрали на панели стилей номер строки каждого стиля?
  • +1
    У меня почему-то в файрбаге перестали отображаться русские буквы, например текст комментариев. Показываются вместо русских букв &rсy; вот такие штуки. Зато title=«Подчёркнутый» в свойствах тэга а – отображается нормально. FF 14.0.1, MacOS 10.7.4
    • +16
      вкладка HTML -> опции -> показывать сущности в виде символов и все ок будет ;)
      • 0
        Да, это хорошая опция, но как-то уж больно внезапно она поменяла отображение по умолчанию. Сначала был шок, потом — непонимание, что происходит, и только потом нашёл новую опцию.
        • 0
          Обещали убрать такой режим, устанавливаемый по умолчанию.
          Ну и ради справедливости, вот это (касающееся как раз упомянутой проблемы):
          В меню «HTML» появились 3 пункта, чтобы изменять формат представления Entities (описаний специальных символов).

          стоит читать не как «специальных символов», а как «non-ASCII символов».
          • 0
            Entity — это не всегда non-ASCII символы (", &). По смыслу текста — да, в Firebug Entities будут показываться только non-ASCII. Но в данном случае я перевёл формальное определение термина, посчитав, что замена на «как бы» русское слово «сущности» внесло бы больше неясности.
  • +1
    Приятное обновление. Firefox ощутимо быстрее стал загружаться. Но в новом Firebug уже успел споймать парочку багов:
    1. При выделении элемента радиокнопки состояние checked теряется
    2. Почему-то отображаются не все куки при открытии корня сайта / (в FireCookie было всё ок)
    Это только у меня так, или ещё у кого-то похожие проблемы? Если не только у меня, нужно будет багрепорт написать :)
    • 0
      У меня тоже куки не отображаются все для корня, приходится отключать фильтрацию по домену =(
    • 0
      С радиокнопками подтверждаю — они то теряются, то устанавливаются на первую. Причём только если клик по самой кнопке или выделение кнопки мышью. А вот клик по связанному лейбелу устанавливает кнопку нормально.
      • 0
        s/выделение кнопки мышью/выделение кнопки клавиатурой/
  • +2
    Перешел с ФФ на Хром, в плане разработки, так как ФФ стал жутко жрать комп. Не возможно быстро работать.

    ФаирБагу респект, мне тебя не хватает… хотя дебагер Хрома вытягивает, даже есть приятные плюшки, которых не было в ФайрБаге.

    верстальщик: 6 лет HTML+CSS(3)+JS(jq)+шаблонизаторы(>=3)
    // не то чтобы я крут :) есть и по круче я только в начале правильного пути…

    просто чтобы разработчики ФФ меня услышали и СДЕЛАЛИ что-нибудь со своим бегемотом!
  • +1
    У меня после этого обновления FF перестал запускаться — при старте сразу падает. Из дополнений стояли adblock plus и firebug.
    Для интереса откатился на FF12, поработал немного, обновился на 14 версию — история повторилась.
    Операционка Windows 7 professional 64 bit
    • 0
      ps: firebug тут ни при чем, падает именно сам firefox 14.01, даже после отключения/удаления всех дополнений. Пришлось пока отключить автоматическое обновление
      • 0
        Та же самая история на Ubuntu 12.04, но падает именно из-за firebug'а. Если его отключить, то падения прекращаются, но стоит включить вновь, как Firefox сразу же падает.
    • 0
      Win7 x64, все нормально работает с теми же расширениями (+ кучей иных). Попробуйте поставить с 0 (аль, правда сам сим не пользовался, попробуйте перезагрузить Firefox через «Справка / Информация для решения проблем») как в 14-ом Firefox'е, так и в 17.0a1-ом.
    • 0
      Я ставил 14.0 — (W7-64, WinXP) — он пока работает. Но приобрёл способность самоапгрейдиться не глядя на установки настроек. Есть опасность, что сам проапгрейдится до 14.0.1. Вообще — надо разобраться, где у него самоапгрейд отключается. С апгрейдом — и не протестируешь 13-ю версию, и залиться новое с несовместимостями и ошибками (как 14.0.1) может.
  • 0
    Больше всего в Фаербаге раздражает его привязка к URL-ам, а не вкладкам. Почему нельзя сделать как в Хроме?
  • 0
    да, мой любимый Firebug на моем не менее любимом Firefox в данный момент кушает ~ 600 мб, и это всего 3 вкладки. Сволочь. Но любимый ) Его бы рыжим котом лучше назвали за наглость
  • +1
    Хорошая штука, но до сих пор не знаю как отключить в нем автоматический переход на элемент, измененный скриптом. Не возможно работать, если на странице что-нибудь крутится. Кто-нибудь в курсе как это выключить?
    • +3
      «Стрелка вниз» возле заголовка вкладки HTML — там в выпадающем меню пункты «разворачивать», «прокручивать».
      • 0
        Огромное спасибо!

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