Как находить ошибки в коде?

#javascript #отладка

Как находить ошибки в коде JavaScript?
Например, написал я скрипт, а он не работает. Если взять, например, Pascal, то там
есть трассировка: жмёшь на пробел, и код построчно выполняется. Видно когда в цикл
заходит, сколько раз там пробегается, когда из него выходит и другие вещи.
    

Ответы

Ответ 1

Моё имхо - Chrome Dev Tools это все что нужно. Ссылка. Конкретно про дебаг JS - тут


Ответ 2

Линтеры

На раннем этапе, ещё до запуска приложения, очень помогают статические анализаторы
кода, вот несколько из самых популярных:


JSLint от дедушки Крокфорда, создателя JSON. Попахивает валерьянкой, но вполне работает,
не считая того, что настроек с гулькин нос.
JSHint отличный линтер с гибкими настройками, 6к звед на гитхабе.
ESLint, и слитый с ним JSCS пожалуй самая крутая штука, если нужно написать свои
плагины для каких то специфических проверок.


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

Немного про типизацию

JavaScript не имеет (пока?) возможности указывать типы для аргументов функций, но
можно воспользоваться, например, JSDoc. Пишите что-то вроде этого (обратите внимание
на формат комментария):

/**
 * Creates a new Circle from a diameter.
 *
 * @param {number} d The desired diameter of the circle.
 * @return {Circle} The new Circle object.
 */
Circle.fromDiameter = function (d) {
    return new Circle(d / 2);
};


И теперь если где-то fromDiameter вызывается к примеру со строкой, то jsdoc в несложных
случаях сможет это определить до запуска программы. В добавок к этому jsdoc дает ещё
много разных плюшек, не считая основного предназначения - генерировать документацию
по вашим комментариям.

Более брутальный вариант для настоящих бородатых гуру (например из команды AngularJS)
взять и переписать все на TypeScript, который как JavaScript, но позволяет использовать
(по желанию!) типы для переменных. И тогда, например, вы сразу увидите (по ошибке компилятора),
что вызываете функцию, ожидающую строку, передав ей число.

Отладка

Здесь старый добрый Console.log('Ohh, shitt!') никто не отменял. Но конечно же не
стоит отказывать себе в удовольствии использовать продвинутые отладчики. Тот же WebStorm
имеет вполне современные возможности по отладке, но и все мажорные браузеры имеют ту
или иную "панель разработки", с отладчиком, профилировщиком и другими вкусностями.
Ставите точки останова (и не простые, а с определенным хитрым условием, например чтобы
остановилось только на второй раз, при спадающей луне), смотрите стек вызовов, значения
переменных (меняете их налету по желанию) и т.п. Для быстрого старта в хроме - жмите
F12, дальше разберетесь.


Ответ 3

Если я правильно Вас понял:

Вам нужно использовать IDE для написания и редактирования кода.
Популярные IDE на данный момент разрабатывает компания JetBrains.

Конкретно под JavaScript можете использовать WebStorm

При этом, в нём присутствует дебаггер, где можно настроить построчное выполнение кода.


Ответ 4

Лично я использую бесплатную кроссплатформенную Visual Studio Code. В ней есть отличный
"пошаговый" дебаггер и всё необходимое.


Ответ 5

Есть несколько вариантов:


Использовать IDE (WebStorm, к примеру)
Возможности браузеров (chrome dev dools, firebug, и т.д.)
Дебаг с помощью console.log (так себе способ).