Новый инспектор страниц в Firefox 10

Как мы уже писали, после выхода финала Firefox 8 активно разрабатываться будущие версии браузера. Одной из новинок Firefox 10 станет улучшенный инструмент для разработчиков.

Упомянутая выше десятая версия, находится сейчас в Aurora-ветке разработки. Все желающие могут опробовать ее уже сейчас, по отзывам самих разработчиков, она довольно стабильна в работе. А также может работать параллельно с финальной версией.

Вернемся к инструменту для разработчиков. Благодаря встроенному инструменту можно заглянуть в структуру страницы. Для вызова функции существует несколько путей:

Идем в Меню — Веб-разработка — Инспектор
Нажать на клавиатуре сочетание клавиш CTRL+SHIFT+I (CMD+SHIFT+I на Mac)
Кликнуть правой кнопкой по странице и выбрать пункт «Исследовать элемент»

После проведения любого из этих действий откроется встроенный в Firefox инспектор. Выглядеть в Firefox 10 он будет так:

При активации объект, который подвергся инспектированию будет выделен маркером, над которым будет заголовок с указанием имени объекта). Внизу расположен блок управления.
Первая кнопка слева позволяет отключить инспектирование и вернуться к нормальному просмотру страницы. Повторное название включает его вновь. переключать также можно с клавиатуры, нажатием на клавишу ESC.

Далее на панели слева направо расположена структура элементов. Сделана она в виде т.н. «хлебных крошек» (breadcrumbs). Здесь представлены все элементы, которые ведут к тому, который в данный момент инспектируется. Если вся ветвь не влезает на экран — по бокам появляются кнопки для прокрутки. Конечно же, можно выбирать переход на любой элемент щелчком мыши.

И теперь элементы справа. Здесь имеются две кнопки — «HTML» и «Стиль». Нажатие на первую из них приведет к открытию внизу всего HTML кода текущего документы.

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

Нажатие на кнопку «Стиль» приведет к открытию сбоку панели со стилями.

Панель разделена на два столбца: Правила и Свойства. В первом указан элемент, в каком файле прописаны для него стили. Во втором — непосредственно, сами стили для данного элемента.
Естественно, все можно здесь редактировать. Здесь же присутствует строка для быстрого поиска необходимых стилей.

Финальную версию Firefox 10 с новым инструментом для инспектирования планируется выпустить в самом конце января.

Метки:Инструменты

7 комментариев Комментировать

vladimirsluckovsky 19.11.2011 в 18:26

Интересно смотрится. Mozilla озаботилась отсутствием встроенного отладчика.

Ответить
Анхель 16.02.2012 в 13:43

А после того, как закончил редактирование, как сохранить результат?

Ответить
- admin 16.02.2012 в 17:31
  
  Анхель, возможность сохранения, вроде бы, пока не предусмотрена.
  
  Ответить
Станислав 25.02.2012 в 19:32

Просто обалденно! Спасибо Mozila! Ты лучшая!

Ответить
мистер 14.04.2012 в 19:09

ну и нахера она нужна когда есть веб девелопер. игрушка для дибилов вобшем

Ответить
- Alex 27.04.2012 в 18:05
  
  Всегда находиться какой-то «мистер» умник дебил, который считает себя умнее всех!
  
  Ответить
Alex 27.04.2012 в 18:07

Очень полезная вещь, спасибо разработчикам за это дополнение!!!

Ответить