Как проверить код на ошибки js

От автора: знаете ли вы, что в JavaScript встроен отладчик? Отладчик полезен, когда дело доходит до поиска ошибок и обхода вложенных обратных вызовов, promise и т. д. Этот отладчик работает как с отрисованным кодом на стороне клиента, так и на стороне сервера.

Синтаксис

Объявление debugger позволяет остановить выполнение кода и проверить любые переменные, значения и т. д. По сути, он выступает в качестве ключевого слова return и останавливает выполнение функции.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Когда мы выполним код выше, вот, что мы должны увидеть. Обратите внимание на текст «paused in debugger» и кнопки resume и loop-over справа. В левой панели мы видим вкладку «источники» и функцию debugThis со значениями, которые мы передали. Если вы навете курсор на переменные a и b — вы увидите их значения.

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

Для возобновления выполнения в обычном режиме нажмите кнопку «resume»

Объявление debugger вызывает весь доступный функционал для отладки, такой как установка точек прерывания. Если функции отладки недоступны, оператор не даст никакого эффекта.

Несколько отладчиков

Отладчики на самом деле работают, когда у нас есть более одного объявления debugger и множество обратных вызовов или promise. Рассмотрим пример, когда у нас есть функция замыкания. Мы берем значение внешней функции a и передаем его внутренней функции:

Отладчик дает нам гибкий способ проверки всех значений функции. Внутри замыкания, мы можем проверить значения аргументов a, b и c. Наведите указатель мыши на аргументы функции и убедитесь сами.

Отладчик внутри замыкания

Теперь, когда мы освоили debugger, давайте перейдем к более сложному примеру. Сначала мы проверяем, передаем ли мы аргумент name функции createPerson. Если нет, мы прекращаем выполнение всего кода и выдаем предупреждение на консоль. Если есть name, создаем объект person с переданными ему аргументами.

После того, как мы вызовем функцию createPerson с заданными аргументами, должен появиться отладчик. Давайте посмотрим, что это говорит нам.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Запуск первого отладчика

Первый debugger действительно срабатывает и дает нам доступ для проверки аргументов createPerson. Можете ли вы сказать, что произойдет, если мы осмотрим объект person?

Объект person не определен

Не определено? Почему не person определено? Просто — потому что мы еще не выполнили эту часть кода. Мы остановили выполнение кода в первой строке функции. У нас нет доступа к объекту person, так как он не существует.

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

Второй отладчик отключается

Теперь мы внутри функции hasName — эта функция быстро проверяет, передано ли name функции person или нет. Не имеет особого смысла размещать его в отдельной функции, поскольку мы можем проверить одно свойство внутри createPerson — но для демонстрационных целей отладчика это поможет получить представление о том, как применить отладчик практически. Наш объект person все еще undefined, так как мы выполняем функцию hasName, и не достигли той части, где мы создаем объект person.

Наконец, нажмите кнопку возобновления и запустите третий отладчик:

Запуск третьего отладчика

Вуаля! Мы должны иметь возможность видеть все значения переменных и объектов, поскольку мы достигли конца исполнения кода. Что произойдет, если мы не передадим name в функцию createPerson?

Что произойдет, если мы не передадим имя функции createPerson

Появилось предупреждение о том, что мы забыли передать name в функцию. В person не может быть никакого name — если только никто не является person (по крайней мере, в «Игре престолов»).

В следующий раз, прежде чем писать console. log, попытайтесь найти основания для использования отладчика. На бумаге вы можете настроить свой веб-упаковщик, например, webpack или parcel, для удаления операторов debugger в производстве по умолчанию. Отладчик также работает в среде Node.

Заключение

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

Автор: Indrek Lasn

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

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

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

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

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

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

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

Найти незакрытую скобку также помогут текстовые редакторы для программирования. В Notepad++ если поставить курсор после открывающей скобки, то она и соответствующая ей закрывающая скобка будут выделены красным цветом. Это работает со всеми видами скобок.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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