Firebug

dimonzi аватар

Не так давно я открыл для себя превосходный плагин к Firefox'у для облегчения процесса верстки — Firebug.
Это инструмент, с помощью которого можно собрать максимальную информацию о верстаемой странице, и прямо на лету менять стили, html, js и.т.д., и без "рефреша" наблюдать результаты!
С помощью него можно отлаживать javascript'ы, просматривать DOM и многое-многое другое.

Для начала посмотрим на главное окно firebug:

Вверху мы видим, собственно, меню, дополнительную панель с поиском по файлам, главные вкладки — Console, HTML, CSS, Script, DOM, NET и подвкладки(в данном скрине — Style, Layout и DOM)

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

На следующей вкладке HTML мы видим дерево элементов. Прямо в нем мы можем добавлять тегам новые аттрибуты, а также, если навести на какой-нибудь элемент, нам подсветят этот объект, покажут маргины, паддинги и прочие бордеры. Если же вы щелкнете по этому элементу и начнете наводить на «квадратики» в подвкладке Layout, вам покажут даже рулеры и пиксельные линейки(как у меня на скриншоте). В подвкладке Style вы можете изменить стиль данного элемента, и прямо тут же вам покажут изменения. Это очень удобно, когда подгоняшь элемент или пробуешь цвет — гораздо удобнее, чем по десять раз переключаться между рабочими столами.

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

Главные вкладки CSS и DOM являются, фактически, идентичными тому, о чем я только что расказывал, разве что «говорят обо всех». А вот во вкладке Script ​мы можем дебажить наши любимые джаваскрипты. Самое то для того, что бы dimonzi, наконец, серьезно занался джаваскриптами :)

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

Сказать мне лично больше нечего, но уверен, что, например, мне сей плагин весьма необходим — действительно удобная вещь при верстке html-страничек. Всем вебкодерам просто обязательно качать этот плагин в своих файерфоксах.

MT аватар

Я без этого плагина вообще работать не могу :)

P.S. если серьёзно заниматься веб-разработкой, без IE не обойтись, а для него есть похожий плагин: IE Developer Toolbar.

Да, прога кульная!

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".