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

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

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

10 распространенных ошибок в JavaScript

Перевод статьи nixus “10 Famous Bugs in JavaScript”.

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

В настоящее время JavaScript используется практически в каждом современном веб-приложении и лидирует в количестве активных проектов на GitHub.

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

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

Здесь перечислены 10 распространенных ошибок, которые допускают большинство JavaScript-разработчиков.

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

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

2. Неверный оператор сравнения

Иногда использование оператора равенства вызывает затруднения, и многие новички совершают ошибку при объявлении и сравнении двух значений. Порой разработчики используют одинарный оператор равенства “=” вместо двойного “==”, что создает неопределенность в коде, и результат также будет неопределенным.

Это происходит потому, что двойной знак равенства “==” выполняет сравнение, а одинарный “=” — присваивает значение.

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

3. Неправильное использование присваивания

В JavaScript одинарный знак равенства присваивает значение операнду справа налево, например:

Как вы видите, здесь оператор присваивания присваивает значение 5 операнду х. Неопытные разработчики часто совершают ошибку, используя одинарный оператор присваивания при объявлении If-предложения, как в примере ниже:

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

4. Несовпадающие скобки

Синтаксическая ошибка проявляется, когда мы пропускаем фигурную скобку. Это случается главным образом тогда, когда код усложняется, особенно, если вы работаете со сложными объектами JavaScript.

5. Несовпадающие пары кавычек

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

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

6. Пропущенная точка с запятой

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

Такое случается главным образом когда вы помещаете весь свой JavaScript-код в одну строчку и не используете точку с запятой для разделения синтаксиса.

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

7. Ошибка отсылки

Шаблон и синтаксис программирования на JavaScript действительно сложные.

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

8. Ошибка диапазона

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

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

Этот код будет бесконечно вызывать сам себя и никогда не остановится.

9. Ошибки области видимости

В JavaScript есть два вида области видимости — уровня функции и глобальная. Переменная будет глобальной, если ее объявить без использования ключевого слова var. Такую переменную можно использовать в любом месте вашей программы.

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

10. Лишние запятые

Многие неопытные разработчики JavaScript совершают ошибку, используя запятую в конце последнего свойства в определении объекта JavaScript. В результате они получают ошибку. Последнее свойство в определении объекта JavaScript никогда не должно заканчиваться запятой — это приводит к ошибке.