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

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

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

Визуализация ошибок в JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

if (full_name != ""){  
    console.log('The name \"' + full_name + '\" was entered');  
}else{  
    console.error('No name was entered');  
}  

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

$('.trace').click(function(){  
    //Запустить трассировку при событии onclick
    console.trace();  
    return false;  
}); 

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

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

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

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

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

var e= 123;

alert(e); // выведет 123

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

var e = document.getElementById(id_elementa);

alert(e); // выведет сообщение, что выбран объект

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

alert('Hello');
var e = document.getElementByIds('id_elementa');
alert('Hello 2');

В этом случае выведется только сообщение Hello. Потому-что на второй строке ошибка! Если ошибки не будет, выведутся 2 сообщения. Метод тупой, но срабатывает. Главное без использования консоли, скопировал -> вставил и определил где идет ошибка в коде. Если не надо, закомментировал.

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

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

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

Дальше: Правила дизайна сайта