Отладка JavaScript кода

Типы ошибок

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

Ошибки делятся на два типа:

1. Синтаксические
2. Алгоритмические

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

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

Поиск синтаксических ошибок

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

Неправильно расставить кавычки вообще маловероятно, потому что в текстовых редакторах текст в кавычках обычно выделяется своим цветом.

Найти незакрытую скобку помогут текстовые редакторы для программирования. Соответсвующие скобки обычно выделяются определённым цветом. Это работает со всеми видами скобок.

Поиск алгоритмических ошибок

Искать алгоритмические ошибки намного сложнее, потому что они никак не проявляются. Чтобы найти такую ошибку, нужно выбрать значимое место скрипта. Это могут быть последние строки программы, отдельной функции или другая важная чать программы. Затем нужно ответить на два вопроса:

1. Доходит ли выполнение программы до этого места?
2. Какое значение имеют переменные, имеющие отношение к ошибке?

Ответы на оба вопроса вы получаете, если выводите на экран значения важных переменных в выбранном месте программы.

Выполнение программы может не дойти до определённого места из-за того, что не выполняется условие в операторе if. Поэтому нужно смотреть значения выражений в ближайшем операторе if. Если в нём сравниваются переменные, то нужно вывести на экран значения этих переменных перед оператором. А если сравниваются выражения, то вывести на экран значения этих выражений.

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

Средства отладки JavaScript кода

В браузерах есть средства отладки, которые помогают найти и исправить ошибки в JavaScript коде. Мы используем "Инструменты разработчика" браузера FireFox, которые уже рассматривались в теме про отладку CSS. Нам будут полезны две вкладки панели инструментов - "Консоль" и "Отладчик".

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

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

В консоль можно вывести данные из скрипта. Текст или значения переменных. Для этого в JavaScript есть метод console.log(). Пример:

let num = 10;
console.log('значение равно ', num);

Результат будет выглядеть так:

Справа указана строка, которая вывела эту информацию.

В консоль можно вывести не только переменные, но также массивы и объекты. Сначала они выводятся в свёрнутом виде. Их можно развернуть и посмотреть все данные, которые они содержат. Удобно отображаются DOM-объекты, то есть, элементы страницы. Пример:

var div = document.querySelector('div');
console.log(div);

В консоли DOM-объект выглядит так:

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

Кликните на нужном файле и в средней части вкладки отобразиться код файла. Строки кода пронумерованы. Можно кликнуть на номерах нужных строк и они будут выделены синим цветом. На этих строках выполнение скрипта будет приостанавливаться. Такие строки называются точки останова. Они перечислены также в правой части вкладки.

Когда вы выбрали нужные строки, запустите страницу заново. Скрипт остановится на первой выбранной строке и можно будет посмотреть, как выглядит страница в этот момент. Также можно узнать какие значения имеют переменные. В правой части вкладки нужно нажать "+", написать имя переменной и нажать Enter. Затем можно добавить другую переменную.

Когда Вы посмотрели всё, что нужно, переходите к следующей точке останова. Нажмите кнопку "Возобновить". Скрипт продолжит выполнение, дойдёт до следующей выбранной строки и вновь остановится.

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

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