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

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 коде? Поделитесь своим опытом в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript – Обработка ошибок и исключений

Добавить в избранное

Ошибки синтаксиса

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

Например, следующая строка вызывает ошибку синтаксиса, поскольку отсутствует закрывающая скобка.

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

Ошибки времени выполнения

Ошибки времени выполнения, называемые также исключениями, происходят во время выполнения (после компиляции/интерпретации).

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

Исключения также влияют на поток, в котором они происходят, позволяя другие потоки JavaScript, продолжить нормальное выполнение.

Логические ошибки

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

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

Заявление try…catch…finally

В последних версиях JavaScript добавлены возможности обработки исключений. JavaScript реализует try…catch…finally, а также оператор throw для обработки исключений.

Можно перехватить исключения, созданные программистом, и исключения среды выполнения, но нельзя перехватить ошибки синтаксиса JavaScript.

Вот блок синтаксиса try…catch…finally:

За блоком try должен следовать либо ровно один блок catch, либо один блок finally (или один из обоих). При возникновении исключения в блоке try исключение помещается в e и выполняется блок catch. Необязательный блок finally выполняется безоговорочно после try/catch.

Примеры

Вот пример, где мы пытаемся вызвать несуществующую функцию, которая, в свою очередь поднимает исключение. Давайте посмотрим, как ведет себя без Try … Catch:

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

Вы можете использовать блок finally, который всегда будет выполняться безоговорочно после try/catch. Вот пример:

Заявление throw

Вы можете использовать заявление throw чтобы поднять встроенные исключения или настроенные исключения. Позже эти исключения могут быть захвачены и вы можете принять соответствующие меры.

Пример

В следующем примере показано, как использовать заявление throw.

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

Метод OnError()

Обработчик событий onerror был первой функцией, облегчающей обработку ошибок в JavaScript. Событие ошибки возникает на объекте окна всякий раз, когда на странице возникает исключение.

Обработчик событий OnError содержит три части информации, чтобы определить точный характер ошибки:

Вот пример, чтобы показать, как извлечь эту информацию.

Пример

Вы можете отобразить извлеченную информацию любым способом, какой лучше.

Вы можете использовать метод OnError, как показано ниже, чтобы отобразить сообщение об ошибке в случае, если есть какие – либо проблемы при загрузке изображения.

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.