Отладка Javascript : как найти и исправить ошибки

Неважно насколько скрупулезны вы при написании программ на языке Javascript (или любых других программ), вы наверняка допускали ошибки. Написание безошибочного кода все менее и менее вероятно с увеличением строк кода. Вот почему тестирование кода является столь важным.

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

Наибольшая проблема состоит в том, что программа не работает так, как от нее требовалось и невозможно сказать, что же является тому причиной. То, что вам нужно, так это программа-ищейка, которая поможет выявить, что же неправильно в скрипте.

Опции браузера

Тестирование Javascript в многочисленных браузерах даже более важно, чем тестирование HTML - кода, потому что браузеры существенно отличаются как раз тем, как они обрабатывают Javascript -код и менее отличаются в том, как обрабатывают HTML - код. Также, браузеры содержат дополнительные опции помогающие отладить код.

В первую очередь, тестирование кода происходит в Internet Explorer, не только потому что это прадедушка всех браузеров, но и потому, что в Internet Explorer есть очень много удобных опций для отладки кода, показывающих, где же именно находится ошибка.

Чтобы убедиться, что опция включена, выберите путь: Панель управления/Свойства обозревателя/Свойства:Интернет.

Затем, на вкладке «Дополнительно», используя полосу прокрутки, найдите «Обзор» и проверьте, чтобы галочка напротив «Отключить отладку скриптов (Internet Explorer)» была снята.

При тестировании Javascript – кода, вы будете получать сообщения об ошибках с указанием точного места. Даже, если вы отключите эту опцию, вы все равно сможете узнавать об ошибках, если дважды щелкните на сообщении слева в строке состояния: «Выполнено, но с ошибками».

Netscape и Mozilla содержат две опции, помогающие вам произвести отладку Javascript и тестирование Javascript-кода. Это Javascript Console и Javascript Debugger. Вы найдете их, если откроете панель инструментов и инструменты разработчика. Firefox также содержит Javascript консоль, доступную прямо из панели инструментов.

В браузере Opera консоль Javascript доступна через Инструменты/Дополнительно.

Использование Alert box

Наибольшая проблема с этим инструментом состоит в том, что, хотя и всплывающие окна предупреждают нас об ошибке, но не очень-то помогают нам, когда код работает не так, как было задумано. То, что нам нужно, так это отследить каким образом код действует и какое из значений переменных он выбирает.

Функция alert() в этом деле – наш лучший друг и товарищ. Если вы в коде расставите alert('a'), alert('b'), то вскоре сможете проследить путь из всплывающих сообщений, тогда вы точно будете знать какое сообщение высветилось на экране. Когда вы идентифицируете проблему, сможете легко удалить alert() из кода.

Вы также можете проверить значения переменных при заданных точках в коде, указав имя переменной вместо статической символьной строки в функции alert().

При всем удобстве использования функции alert(), нельзя слишком часто расставлять ее в коде, так как увеличится время прохождения через код. Рациональнее было бы начать с того, чтобы определить общую площадь локализации проблемы и затем переместить алерты ближе друг к другу, чтобы сузить проблемную область. Не забывайте всегда комментировать уведомления, которые вы добавляете для тестирования, чтобы понимать потом, какие алерты нужно удалить после отладки кода.

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

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

Закладки(Bookmarklets)

Закладки также могут быть очень полезными в вашей работе. Это маленькие кусочки кода Javascripts, которые могут быть запущены из чаще всего используемого вами меню. Кроме того, закладка «View Source» (показать источник), показывает, как будет выглядеть страница после того, как к ней применен любой Javascript-код.