Ошибка в коде js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript error! Как исправить ошибку в JavaScript коде?

Узнайте, как можно исправить ошибки JavaScript кода с помощью консоли браузера и не только. Будем учиться на примерах, как бороться с js error и другими проблемами. А также поделимся своей практикой борьбы с ошибками в комментариях.

Что мы сегодня узнаем?

Встречаем консоль!

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

Визуализация при исправлении ошибок

В случае с PHP, все проще. Ошибка останавливает работу скрипта и отображается номер строки и файл скрипта. Но с JS все по другому, хотя выход есть всегда. Короче, можно сделать отличную проверку ошибок javascript кода при загрузке страницы.

Консоль браузера, это объект, который может быть использован для вывода информации об ошибках во время загрузки страницы. Для примера: вы можете добраться к любому DOM элементу, например, картинке которая имеет не правильный URL. Для этого нужно навести на элемент (картинку) и нажать правую кнопку мыши. Найти «Проинспектировать элемент» или что-то подобное. В Opera это выглядит так:

Вот мы и в консоле. Почти, остальось выбрать вкладку «консоль».

Консоль, в отличии от «исходного кода», способна видеть текущие изменения на странице, которые вызваны JavaScript кодом.

А вот доступ к консоли в Chrome браузере:

Простые примеры выявления ошибок

Консоль поддерживает множество опций, но можно обойтись 3-4, этого достаточно для выявления и дальнейшего исправления ошибки. Из моего собственного опыта, функция log(), наиболее удобная. Она выводит новые сообщения, DOM элементы, переменные в консоль, где мы можем их видеть. Примеры ниже показывают применение функций, которые я использую.

В этом скрипте, консоль выводит разные результаты в зависимости значения переменной full_name (пустая или нет).

Для события jQuery click, консоль выведет информацию о нажатии элемента (трассировка):

Консоль это больше чем вывод сообщений, она также может принимать команды. Для примера, наберите «document» и нажмите Enter для получения информации о странице.

Как исправить ошибку без консоли?

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

Примеры выявления ошибок с помощью alert

Этот пример позволяет просто вывести значение переменной:

Также можно понять где значение, а где объект:

Еще одно применение – это определение в какой строке кода произошла ошибка. Для этого вам просто нужно вставить сообщения типа alert(‘Здесь ошибка’); через каждую строку кода. Например:

Держите страницу в чистоте!

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

Какими способами пользуетесь вы? Как вам удается исправлять ошибки в JS коде? Поделитесь своим опытом в комментариях.