Как найти ошибку в JavaScript
Мне частенько присылают 50-100 строк кода JavaScript (или даже больше) и задают 1 вопрос: "Где здесь ошибка?" или "Почему не работает?". Когда мне то же самое присылают по PHP, то у меня есть статья: основной инструмент при поиске ошибок в коде, и он подходит для всех языков, но у JavaScript есть одна маленькая особенность при поиске ошибок. Вот о том, как найти ошибку в JavaScript, я и расскажу.
Вы должны знать, что есть синтаксические ошибки, а есть алгоритмические. Вот второй тип ошибок при помощи статьи, ссылку на которую я указал, без проблем решается. Только вместо echo надо использовать alert(). Но вот с синтаксическими ошибками возникают проблемы. Если другие языки сразу же показывают текст ошибок, то JavaScript не делает вообще ничего, как будто никакого скрипта и в помине нет.
В Firebug есть возможность поиска ошибок в JavaScript, есть всякие расширения и для других браузеров. И их можно использовать, однако, не всегда они под рукой, поэтому я предлагаю следующий универсальный метод поиска синтаксических ошибок в JavaScript:
- Комментируется весь код, оставляя лишь 1 верхнюю строчку.
- Вызывается alert() с любой строкой.
- Если alert() не появляется, значит, ошибка в верхней строчке.
- Если alert() появляется, надо расскоментировать ещё одну строчку и далее к пункту 2.
- И так до тех пор, пока не будет найдена ошибка.
Давайте разберём его на практике, допустим, надо найти ошибку в этом коде, который вообще никак не запускается:
var a = 15;
var b == 18;
alert(a + b);
Мы хотим увидеть 33, однако, не видим вообще ничего. Значит, где-то имеется синтаксическая ошибка. Следуем по моей инструкции, комментируя все строчки, кроме самой первой. И сразу после неё вызываем alert():
var a = 15;
alert("ABC");
/*var b == 18;
alert(a + b);*/
Запустив код, у нас сработает alert(), значит, в 1-й строчке ошибок нет. Двигаемся дальше, расскоментировав ещё одну строку, после которой вызываем alert():
var a = 15;
var b == 18;
alert("ABC");
/*alert(a + b);*/
После запуска обнаруживаем, что никакого alert() не сработало, значит, ошибка во 2-й строке. Приглядевшись, мы видим, что зачем-то использовали знак сравнения вместо знака присваивания. Исправив ошибку и расскоментировав весь код:
var a = 15;
var b = 18;
alert(a + b);
Мы получаем долгожданные 33. Надеюсь, Вы поняли методику. Безусловно, я долго описывал, на практике же это делается в течение максимум минуты в коде строк на 50.
Вот таким образом можно достаточно легко найти ошибку в коде JavaScript.
-
Создано 10.04.2013 11:33:50
-
Михаил Русаков
Комментарии (13):
Я правильно понимаю, нужно поместить весь код в комментарии, кроме одной строчки и вызвать alert() не важно с каким параметром, и так до тех пор, пока alert() перестанет работать, значит нужно искать ошибку в именно в этой строчке. ?
Ответить
Да, всё правильно.
Ответить
Спасибо как раз не давно искал ошибку)))
Ответить
Супер, просто и со вкусом! А нельзя ли поподробнее об этих расширениях из Firebug, которые эти синтаксические ошибки видят?
Ответить
Спасибо тебе за статью!!)
Ответить
Консоль в файербаге не только показывает ошибку, но и объясняет в чём она заключается. alert хорошо использовать в процессе написания кода чтоб посмотреть как скрипт работает.
Ответить
Михаил! А можно ли использовать ваш метод поиска ошибок, если скрипт написан для jquery. Чтобы не просто посмотреть, работает скрипт или нет, но и чтоб найти ошибку в конкретном месте. Я попробовал вставить alert("ABC"); в между строк кода, но не работает. Firebug ошибки показывает.
Ответить
Можно использовать, и alert() там будет работать.
Ответить
А почему у меня не срабатывает alert("ABC"); - ошибка в коде в строке с идентификатором $("#leto") - нет "точки" перед CSS. function pokaz1() { $("#zima").css("z-index","2"); $("#vesna").css("z-index","1"); alert("ABC"); $("#leto")css("z-index","1"); $("#ocen").css("z-index","1"); }
Ответить
Поставьте выше alert(), а всё остальное вообще закомментируйте.
Ответить
Большое спасибо! С Вашей помощью разобрался, теперь работает - до строки с ошибкой в коде aleft() работает, а после ошибки alert() не работает.
Ответить
Могу поделиться простеньким приемом. Он помогал мне раньше еще в прошлом тысячелетии. Во всех сомнительных местах расставляете отладочный вывод, где обычно проверяется содержимое переменных. Использовать лучше document.write. После проверки такой вывод комментируется, или переносится ниже по ходу программы, или просто удаляется. Программа всегда замолкает, если используемая переменная не определена, т.е. ей еще не присваивалось никакого значения. Чаще это связано с ошибками в идентификаторах. Не согласен с Русаковым, синтаксические ошибки рано или поздно обнаруживаются и легко исправляются. Другое дело ошибки логические, и совсем плохо, если ошибка в алгоритме задачи. И, наконец, главное при обнаружении ошибок - терпение, терпение и еще раз терпение.
Ответить
Простейший способ журналирования JS-ошибок - использовать сервисы аля http://t.onthe.io/js/errors/, http://trackjs.com, http://jslogger.com. Они в режиме реального времени покажут ошибки всех ваших посетителей, со срезами по браузерам. При этом нужно скопировать и вставить всего 1 строчку кода. Лично я использую первый сервис в виду его бесплатности.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.