Дебагінг
Часто чую такі діалоги:
— В мене не працює.
— Що працює?
— Скрипт.
— Чому не працює.
— Не знаю. В тебе хотів спитати.
— В консолі яку помилку видає?
— В консолі пусто, просто не працює.
І такий варіант:
— Помилку видає, не можу зрозуміти що не так.
— В якій строчці? Яка помилка?
— Токен невірний, хз в якій строчці, я в jsFiddle роблю.
Консоль - ваш друг і помічник. Нехай є у нас скрипт:
var button = document.getElementById('butt'),
a = [5, 7, 9, 12, 16, 20];
button.onclick = function(){
for (var i = 0; i < a.length; i++) {
if (a[i] % 2 === 0) {
mySuperFunction(a[i]);
a[i] /= 2;
} else {
a[i] *= 2;
}
}
}
В цьому коді багато де можуть ховатися помилки.
В разі проблем в консоль потрібно виводити значення змінних і дії скрипта.
Особливу увагу потрібно приділити подіям, вони можуть не виконуватися взагалі з певних причин.
Максимальний лог нашого скрипта буде виглядати так:
(не лякайтеся, це той самий скрипт, просто між його строками добавлено багато console.log)
<button id="butt">кнопка</button>
console.log('скрипт стартує');
var button = document.getElementById('butt'),
a = [5, 7, 9, 12, 16, 20];
console.log('чи знайдена кнопка? кнопка:');
console.dir(button);
console.log('масив:');
console.dir(a);
console.log('створюємо обробник події кліка по кнопці.');
button.onclick = function(){
console.log('КЛІК!!! Виникла подія кліка по кнопці.');
console.log('запускаємо цикл - перебір всіх елементів a (довжина масива - ' + a.length + ').');
for (var i = 0; i < a.length; i++) {
console.log('###### ітерація i=' + i + ', до кінця залишилося ' + (a.length - i - 1) + ' ітерацій.' );
console.log('значення поточного елемента масива a[i] =', a[i]);
console.log('перевірка умови a[i] % 2 === 0 :');
if (a[i] % 2 === 0) {
console.log('пішли по гілці true.');
console.log('запускаємо нашу супер-функцію з аргументом a[i] = ', a[i]);
mySuperFunction(a[i]);
console.log('супер-функція виконалася успішно.');
console.log('гілка true вимагає поділити поточне значення елемента масива на два: a[i] /= 2');
console.log('поточне значення a[i] =', a[i]);
a[i] /= 2;
console.log('нове значення a[i] =', a[i]);
} else {
console.log('пішли по гілці false.');
console.log('гілка false вимагає помножити поточне значення елемента масива на два: a[i] *= 2');
console.log('поточне значення a[i] =', a[i]);
a[i] *= 2;
console.log('нове значення a[i] =', a[i]);
}
console.log('кінець ітерації №', i);
}
console.log('кінець обробника події кліка.');
}
console.log('======== кінець скрипта.');
function mySuperFunction(n) { console.log('--- дія функції, аргумент:', n); };
Приблизно так виглядає повна телеметрія нашого скрипта. По цьому логу ми будемо абсолютно точно бачити всі дії і де можуть бути помилки.