Июн
14
2014

Состоялся выход Firebug 2.0 для браузера Firefox

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

Отладчик страниц  firebug

Выход первых версий отладчика Firebug в качестве расширения для Firefox состоялся очень давно. В некоторых браузерах тогда не было встроенных инструментов для разработчиков, а иных интернет-обозревателей не было как таковых. Это позволило ему получить заслуженную известность и долгое время, когда речь заходила про отладку веб-страниц в браузере, многие подразумевали именно данный инструмент как основной.

Однако, долгое время существовала одна проблема, которая не давала покоя многим пользователям. По многочисленным сообщениям в интернете, после установки первой версии расширения, сам Firefox начинал работать несколько медленнее. Советом было отключать Firebug, когда он не использовался. Дело, в том числе, было в используемом движке отладки JSD1 браузера. Начиная с Firefox 30, релиз, которого состоялся на днях, разработчики удалили поддержку JSD1, внедрив новый движок JSD2. Именно его поддерживает 2 версия сетевого инструмента. По замыслам, это должно решить и проблему производительности, возникавшую ранее. Список изменений обновления довольно большой, остановимся на некоторых моментах.

Подсветка синтаксиса

Одной из наиболее заметных функций является внедренная поддержка подсветки синтаксиса JavaScript. Помимо этого, подсветка синтаксиса добавлена и для HTML и CSS в режиме редактирования:
Подсветка кода

Улучшение читабельности кода

Функция Pretty Print позволяет организовать длинные и плохо понятные строки кода, например, JavaScript, в удобный для чтения код:
Улучшение читабельности кода

Инспектор DOM Events

Firebug 2 интегрирует расширение EventBug и вводит новую боковую панель Events в рамках существующей HTML-панели. Новая панель содержит список всех обработчиков событий на странице, где они сгруппированы по типу события для выбранного элемента DOM:
Группировка событий на странице

Поиск в HTML панели

Поиск в HTML-панели был улучшен. Теперь пользователи могут использовать CSS-селекторы или регулярные выражения, чтобы найти конкретные элементы:
Продвинутый поиск

Автозавершение кода

Была улучшена система автозавершения кода. Возможность доступна в Command Editor, где можно нажать на клавишу TAB и получить всплывающее окно с вариантами завершения:
Автозавершение кода

Автозавершение работает также в breakpoint-всплывающем диалоге.Еще автозавершение доступно при редактировании атрибутов HTML (включая, например, SVG), а также стилей:

Автозавершение атрибутов HTML

Инспектор выражений JavaScript

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

Выяснение значения выражений

Группировка логов консоли

В панели консоли добавлена новая опция, которая позволяет группировать сообщения консоли:
Группировка логов консоли

Инспектор возвращения значения из функции

Эта функция позволяет проверять и изменять значения, возвращаемые функцией JavaScript:
Возвращение функции JavaScript

Включение и отключение отображения панелей

Еще одним из изменений Firebug 2 является возможность отключать показ отдельных панелей. Изображение ниже показывает способ того, как это можно сделать:
Отключение и показ панелей

Выбор модели отображения цветов в CSS

Еще одним усовершенствованием является возможность выставления режима отображения цветов в CSS.
Выбор режима отображения цвета

Оставить комментарий

Цитировать