Отлаживаешь Javascript? Возьми FireBug!

То вам стоит живо поинтересоваться расширением FireBug для браузера FireFox. Ах, вы используете Internet Explorer? Так и это не проблема, Firefox может работать как ваш любимый IE с помощью другого своего расширения, IETab, позволяющего включать IE-рендерер html-страниц в любой вкладке FireFox одним кликом (и правым кликом по закладке открывать страницу в самом IE, а еще указать, для каких сайтов IE-рендерер нужно использовать по умолчанию, напр, для Windows Update etc.) Даже контекстное меню в нем будет от IE! Неубедительно? Тогда дальше не читайте, мне дорого ваше время. Дальше будет для тех, кому его время так же дорого, как оно дорого мне. Тем, кто FireBug уже знает, тоже может кое-что пригодиться из нижесказанного.

Что такое FireBug?

FireBug -- это расширение для для браузера FireFox, являющееся консолью, дебаггером, и DOM-инспектором Javascript / (D)HTML / CSS / XMLHTTPRequest в одной упаковке. Firebug показывает в консоли не только вызвавшую ошибку функцию, но стек (цепочку вызова) функций, вызвавших эту ошибочную гадюку. Он предупредит, что Javascript-метод/свойство и даже CSS-правило, которое вы пытаетесь использовать, не существует. FireBug при этом дотошнее всех валидаторов и самой встроенной консоли FireFox. Он даст вам ввести и выполнить Javascript прямо из своей консоли. А консоль эта находится всегда перед глазами, схлопывается и расхлопывается одним кликом и всем бы так жить, как живут теперь обладатели FireBug.

Говорить о том, что он стал любимым инструментом богов инета аяксовиков — просто лишнее. Он и запрос покажет, и адрес обработчика, и javascript разберет по косточкам, все задействованные функции покажет и выведет результат запроса — я пока лучше не скажу, так что цитирую.

Работа с консолью FireBug из Javascript

Cуществует возможность работы непосредственно с консолью FireBug из вашего Javascript с помощью таких команд:

• console.log(a); — вывести в консоль значение переменной а ;
• console.log("Значение переменной a равно %s а значение b равно %d",a ,b); — вывести в консоль значение строки a и числа b; здесь видно, что в консоль можно выводить сообщения, используя знакомый многим программистам синтаксис команды sprintf, где %s означает "string", а %d — "digit";
• console.info(a); — в консоль можно выводить также три вида информационных сообщений, это первый из них, просто информация;
• console.warn(b); — а это уже предупреждение;
• console.error(c); — и сообщение об ошибке.

Отладка Javascript при помощи FireBug: debugger;

Есть в FireBug и самый настоящий Javascript-отладчик, запуск которого изнутри ваших Javascript-ов включается простым влючением команды debugger; Вы просто пишете в коде debugger; и это вызывает пошаговый дебаггер. Продвинутый.

Измерение времени работы Javasrcript-функции с помощью FireBug

А еще в нем можно измерять время выполения функций: достаточно в начале функции написать нечто вроде console.time("do this");, а в конце — console.timeEnd("do time"); В результате после выполения функции в консоли появится сообщение о времени выполнения.

Нужны еще аргументы?

Просмотр и изменение DOM-структуры при помощи FireBug

А еще Firebug позволяет проводить интерактивное исследование и изменение структуры документа. Это делается в его закладке Inspector: там вся DOM структура отображается точно так, как видит ее в данный момент сам браузер (работает грамотный фолдинг). Водя мышкой по структуре документа в Инспекторе, вы увидите, как в самом документе соответствующий элемент выделяется красной рамкой. А теперь фича: здесь же, в Инспекторе, вы можете кликнуть по любому элементу и отредактировать любой его атрибут! Например, вы можете изменить строку типа div class="content" на div class="post". Вы можете посмотреть, как будет выглядеть эта же страница, но с другими стилями, просто изменив свойство href в строке типа <link href="style.css" ... /> на, например, "http://www.novemberain.com/blog/wp-content/themes/novemberain-flash/style.css" — да мало ли что вы захотите на лету изменить в вашем доке! (Кстати, я только что последнее сказанное проверил, и на проверку эту ушла минута.

Ссылки по упомянутым инструментам FireFox

• Расширение FireBug для Firefox;
• IETab для FireFox;
• FireFox;

Почитать о FireBug на русском:

• FireBug: мощная консоль для веб-разработчика;
• Firebug 0.4 - новые возможности;
• Firefox extension: FireBug;

Посмотреть о FireBug (отлично показана работа с дебаггером!):

• FireBug Javascript Debugging Screencast

А вообще, FireBug настолько прост в использовании, что и читать-то особо не о чем (хотя увидеть скринкаст-видео все же рекомендую даже закоренелым пользователям FireBug).

Вывод о FireBug

Ничего лучше для отладки Javascript, чем FireBug, не найти, и это точно. Проверьте и напишите сюда, и если вы убедите меня в обратном, я съем свою шляпу отдам вам свой собственный плакат "Flex 2 API Visual Reference" от RocketBoots => JabbyPanda (from Sonopia).

Товарищ, господин и братишка! Установи FireBug, пользуйся да радуйся, пока остальные жалуются на "этот невыносимый Javascript!" :-)