К сожалению не всегда наш код работает сразу после его написания. То где-то кавычку забудешь, то что-то не учтешь. Код не работает так как хотелось. Приходится искать причину. Бывает, что быстро найдешь. Бывает придется повозиться. При отладке разработчикам помогают различные инструменты, обычно именуемые “Отладчики”. Программисты, которые недавно пришли в web, конечно нуждаются в таких инструментах. Без этих инструментов отладка превращается в ад. Если вы только совсем недавно начали делать первые шаги на JavaScript или только собираетесь их делать, то это статья для вас. В ней будет обзор некоторых средств отладки Javascript, которые, по моему мнению, заслуживают внимания.Самым первым инструментом, который верно служит мне в отладке JavaScript уже долгое время является расширение для FireFox FireBug . Он умеет массу полезного (не только помогать в отладке JavaScript). Но Сейчас пойдет речь о тех средствах, которые есть у него для отладки JS.

Первое чем он вас порадует после того как будет активирован это то, что он в строке состояния (statusbar) браузера показывает зеленую галочку, если ошибок JavaScript не было. Если они были в процессе работы со страницей или ее загрузке, то вместо галочки будет красный кружок с крестиком и количеством ошибок. Если вы щелкните по нему (по галочке зеленой так же можно щелкнуть), то в окне браузера откроется секция FireBug.

В этой секции будут вкладки Console (консоль ошибок и сообщений), HTML (дерево страницы), CSS (файлы стилей), Script (файлы JavaScript с возможностью установки точек останова и выполнения скрипта по шагам), DOM (просмотр структуры элементов DOM), Net (Просмотр всех http-запросов, которые были сделаны для страницы).

Функционал FireBug можно расширить, если установить FireCookies, YSlow и FirePHP.

Как можно было догадаться, нас пока больше всего и интересуют две вкладки - Console и Script. Именно во вкладку Console вы перенесетесь, когда кликните по красному кружку, сигнализирующему об ошибке. Там вы увидите подробное сообщение об ошибке и нажав по плюсику возле него сможете даже увидеть короткую последовательность вызовов функций, которая произошла до появления ошибки. А нажав на строку с цитататой кода с ошибкой вы перенесетесь на вкладку Script к файлу и строке в которых возникла ошибочная ситуация.

Но на этом возможность консоли на заканчиваются. Когда у вас установлен FireBug, то вам в JS доступен объект console, который имеет ряд полезных методов. Среди них первый, о котором хочется сказать это метод log(). А пользоваться им очень просто. В удобном для вас месте кода вы можете написать console.log(myVariable), где myVariable это имя переменной из вашего кода. И тогда в консоли вы увидите ссылку или текст, который поможет вам увидеть что внутри переменной. Если это сложная структура, то вы сможете пройтись по ее свойствам на произвольный уровень. Если переменная содержала html-элемент, то нажав по его интерпретации в консоли вы перенесетесь на вкладку HTML к месту данного элемента в дереве документа. Еще этот метод поддерживает символы форматирования

console.log("The %s jumped over %d tall buildings", animal, count);
Ах... Ностальгия по Си...

Метод console.debug() создает в консоли ссылку на строку кода, в которой он содержится. Методы console.info(), console.warn(), and console.error() это вариации метода debug(), которые в дополнение выводят в консоль так же характерные для их названий значки. Советую вам ознакомиться с документацией объекта console, потому что он может выводить структуру DOM объектов, группировать вывод в секции, определять участки для  профайлинга (вы можете выбрать код, для которого получите распечатку статистики вызовов функций с указанием времени и числа вызовов), смотреть backtrace (порядок в котором были вызваны функции до данного места).

На вкладке Console есть так же кнопка Profile, которая помогает в профайлинге.

Вкладка Script, это типичный отладчик. Здесь вы можете установить точки останова (щелчком по левому полю напротив желаемой строки) и выполнить скрипт по шагам. При желании вы можете заходит в вызываемые функции или выполнять их без вхождения. Справа вы будете видеть панель со списком доступных переменных и их значениями. Вы можете менять значения переменных, удалять точки останова, когда не нужны. Функционал будет вам очень знаком, если вы пользовались отладчиками для других языков (платформ, технологий).

Мир возможно был бы чудесен, если бы все браузеры работали одинаково. Однако пока это не так жизнь web-разработчиков не так сладка. Есть разные источники оценки популярности браузеров. Для рунета неплохое представление дает статистика LiveInternet. На момент написания статьи Опера использовалась 18% пользователей рунета. Это достаточно солидное число, чтобы с ним считаться при разработке сайта.

До недавнего времени с отладкой JS в Opera было из рук вон плохо. Но затем появился DragonFly. Это некий аналог FireBug только для Оперы. Функционал еще совершенно не того уровня что FireBug, но план развития внушает трепет.

Для того, чтобы появилась внизу панель DragonFly вам необходимо выбрать в главном меню Оперы пункт Tools -> Advanced ->Developer Tools. Там будет вкладка Error Console, а вней вкладка JavaScript. Это и есть консоль ошибок.  Сюда же мы можем выводить и отладочную информацию из скрипта. Но, увы, объекта console нет. Однако есть opera.postError(). Это аналог console.log(). Для того, что в каждом месте не писать браузеро-зависимый код стоит создать отдельный файл, где у вас будет следующий код.

if (window.opera && !window.console) {
	window.console = {};
	function fn() { opera.postError(arguments); };
	['log', 'debug', 'info', 'warn', 'error', 'assert', 'dir', 'dirxml', 'group', 'groupEnd',
	'time', 'timeEnd', 'count', 'trace', 'profile', 'profileEnd'].forEach(function(name) {
		window.console[name] = fn;
	});
}

Этот код был найден на бескрайних просторах интернета и может быть модифицирован вами. Если вы добавите его в вашему html-документу, то вы можете использовать и в опере и в FireFox console.log();

Для отладки по шагам есть вкладка Scripts, а в ней одноименная подвкладка (Scripts). Там вы можете выбрать файл, после в подвкладке Source появится листинг скрипта со всеми теми возможностями, что  есть на вкладке Script FireBug’а.

Готов поспорить, что самым любимым браузером всех web-разработчиков является Internet Explorer. Потому что только он поддерживает все веб-стандарты и набирает в тесте ACID 3 более 20 очков (из 100). Если вы ценитель творчества Пикасо, то вам придется по душе то, как выглядят web-страницы в IE, которые были выполнены с использованием CSS 2.1 без учета Microsoft-понимания CSS.

Для того чтобы отлаживать JS-код под IE существует интересная бесплатная надстройка Companion.JS.
Его особенности

• Детальная информация о JS-ошибке (реальное имя файла, строка и вызовы функций до ошибки)
• FireBug-подобная API для консоли
• Консоль позволяет исследовать объекты
• Иконка на панели инструментов для вызова панели Companion.JS

Внимание! Для того чтобы использовать это расширение вам так же необходим Microsoft Script Debugger. И желательно прочитать инструкцию по установке.

API у консоли CompanionJS действительно такой же как у FireBug. Но не содержит некоторых вещей. Хотя спасибо и на этом.

Теперь консоль для IE у вас есть. А в Microsoft Script Debugger можно выполнять скрипт по шагам.

Конечно же и консоль в IE и Opera очень сильно уступают FireBug’у. Например если вы выведите в консоль FireBug’а объект, то сможете посмотреть из чего он состоит, пройтись по свойствам. В Опере и IE вы этого не можете. Я даже для этих целей пытался использовать метод console.dir(). Однако в консоли Companion.JS я получил сообщение о том, что данный функционал не реализован еще. Получается что FireBug like API для Companion.JS существует только в документации. Но что делать? Будем надеяться, что скоро эти продукты разовьются.

Конечно в России браузер Safari - это экзотика. Им пользуются единицы. Однако за рубежом, особенно среди пользователей MacOS X он имеет большее распространение. И вот оказывается для него тоже есть средства отладки. Drosera - это отладчик для Safari.

Однако выкладываю вам скрин, который взят с одного сайта. У меня не получилось прикрутить к Safari отладчик. Я пробовал руководствоваться этой инструкцией. Однако у меня в скаченной сборке WebKit небыло файла run-drosera.cmd. Все что мне удалось получить Это добавить пункт отладчика в главное меню браузера. Однако вызвать консоль и DOM-инспектор по клику на соответствующих пунктах не получалось. если верить документации, то Drosera так же имеет объект console и метод log(). Пожалуйста, напишите, если у кого получилось поднять Drosera у себя.

Вот пожалуй и все. Я надеюсь, что данная информация была для вас полезной. пишите о своем опыте. Мне и другим читателям это будет очень интересно.