Полезности для Интернет/Веб программирования. Часть 1: FireBug Mozilla Plugin

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

1. FireBug Firefox Plugin
Это поистине наш инструмент номер 1 для отладки HTML, CSS и JavaScript кода. Этот плагин имеет очень много функций, информацию можно найти в Гугле, но основные вкусности я перечислю:

 - Вкладка Net(Network) позволяет видеть все запросы посылаемые страницей к серверу и обратно в браузер. Т.е. проще говоря, можно видет что и откуда(картинки, скрипты, данные с других серверов и всякие другие ресурсы) страничка грузит во время загрузки в браузер. Это позволяет видеть и оценить время загрузки всей страницы и отдельных ресурсов, увидеть что тормозит. Также возможно увидеть если страничка посылает запросы не туда куда надо(в случае взлома сервера, например, можно увидеть куда лезет вредоносный код или вообше увидеть подозрительные запросы). Каждый запрос можно раскрыть кликом и посмотреть какие параметры были посланы(например при сабмите формы) и какой пришел ответ(очень полезно при отладке AJAX запросов)

- Вкладка Consol(Консоль) - позволяет видеть все POST и GET запросы со страницы(как и во вкладке Net), плюс видеть вывод сообщений на консоль. В коде вашего JavaScript вы можете встраивать вывод специальных отладочных сообщений: простой пример

var a = 1;

var b = 2;

var c = a+b;

console.log("value of c:", c);

В окне консоли при загрузке вашего кода на странице вы увидите сообщение: value of c: 3

Это простейший пример использования, весь синтакс и применение можно посмотреть здесь: http://getfirebug.com/logging

Мы используем также всё это для выдачи сообшений о загрузке отдельных модулей программы что важно при работе с асинхронным кодом для проверки последовательности загрузки..

- Ну и самая классная возможность FireBug это Component Inspector: кликнув на стрелочку слева, возле символа жука, и указав на любой елемент страницы, можно увидеть все что касается этого элемента - его HTML код, стили CSS. Причём можно не только видеть всю информацию, но и тут же менять ее на лету для отладки. Т.е. можно менять стиль элемента, позицию на экране, добавлять новые свойства, и после отладки, добавить отлаженные данные в ваш код. Очень полезно если вы изменили что-то на странице и ваш layout вдруг разлетелся, страница разлезлась, перестала выглядеть как положено.. 

Подобные инструменты (Web/Component Inspector) есть сейчас почти во всех браузерах, в Интернет Эксплорере только он (Development Bar) очень неудобный, ну а я просто привык работать в FireFox. 

Также важная особенность этого инструмента: при выборе через Component Inspector елемента страницы, справа появляется CSS код, релевантный для этого элемента, из каких CSS файлов и в какой последовательности он грузится, свойства материнских(parent) элементов влияющих на его стиль, ну и во вкладке "Computed Style" сведены итоговые данные стиля. Это важно если вы описали стиль елемента, а он появляется всё равно не в том виде что надо, т.е. на его стиль влияют другие элементы, все это можно здесь увидеть..

FireBug имеет очень много функций, и обо всём просто не рассказать, но кто-нибудь из вас, кто не знаком с ним, хотя бы получит представление о нём и это поможет облегчить ему жизнь в отладке интернет страниц..

полная инфа на английском и сам плагин: http://getfirebug.com/logging

в следущей части будет о ещё нескольких полезных плагинах для FireFox

До встречи!