Как правильно отлаживать JS?

Question

[SimpleShadow]

Здравствуйте. Давно работаю с JS, но так и не научился правильно его отлаживать. Как узнать, в каком месте вылезла ошибка? Если с php все просто - он сам выводит ошибки на экран и записывает их в логи, то как быть с JS. Если мне надо посмотреть, правильное ли значение приняла переменная, то каждый раз выводить ее в консоль с помощью console.error? А если неправильно указан DOM-элемент, как это узнать?

Answer 1

[Алексей Уколов]

Как узнать, в каком месте вылезла ошибка?

console.error выводит полный стек вызовов со ссылками на конкретные строки конкретных скриптов.
Еще очень удобно включить режим "Pause on exceptions", в нем при выпадении ошибки автоматически включается дебагер. Но для этого Developer Tools должны быть открыты (хотя, если вы веб-разработчик, то они в принципе никогда не закрываются).
Ну а все остальные проблемы легко решаются при помощи дебагера. Там и значения переменных и стек вызовов и логику можно пошагово посмотреть.

Comments

[SimpleShadow]

Все-равно не ясно, вот например у меня есть такой код

$('#content').on('click' ,'#singleclick', function () {
var product = $(this).parents('.product-block');
$('#product_name').val(product.find('.product-action .name a').text());
$('#product_price').val(product.find('.product-action .price').text());
$('#singleclick_title').text(product.find('.product-action .name a').text());
});
Как мне понять, правильно ли присваиваются значения в блоки: #product_name, #product_price, #singleclick_title?

[Алексей Уколов]

SimpleShadow: вам же Денис Инешин прямо пример привел, все расписал. Вы хоть немного пытались вникнуть самостоятельно в то, что мы вам тут ответили? Что такое Developer Tools и дебагер вы понимаете? Если не понимаете, почему бы не загуглить?

Answer 2

[Денис Инешин]

Chrome Developer Tools обладают всем необходимым набором инструментов для отладки.
Если вы хотите останавливать выполнение кода в каком-то конкретном месте и смотреть весь стек, то проще всего использовать ключевое слово debugger:

function foo (bar) {
    var a = 1;
    // some code...
    debugger;
    // some code...
}

Comments

[SimpleShadow]

Все-равно не ясно, вот например у меня есть такой код

$('#content').on('click' ,'#singleclick', function () {
var product = $(this).parents('.product-block');
$('#product_name').val(product.find('.product-action .name a').text());
$('#product_price').val(product.find('.product-action .price').text());
$('#singleclick_title').text(product.find('.product-action .name a').text());
});
Как мне понять, правильно ли присваиваются значения в блоки: #product_name, #product_price, #singleclick_title?

Answer 3

[Dmitriy Mozgovoy]

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

если неправильно указан DOM-элемент, как это узнать

$('#content').on('click' ,'#singleclick', function () {
debugger;
var product = $(this).parents('.product-block');
$('#product_name').val(product.find('.product-action .name a').text());
$('#product_price').val(product.find('.product-action .price').text());
$('#singleclick_title').text(product.find('.product-action .name a').text());
});

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