@SimpleShadow

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

Здравствуйте. Давно работаю с JS, но так и не научился правильно его отлаживать. Как узнать, в каком месте вылезла ошибка? Если с php все просто - он сам выводит ошибки на экран и записывает их в логи, то как быть с JS. Если мне надо посмотреть, правильное ли значение приняла переменная, то каждый раз выводить ее в консоль с помощью console.error? А если неправильно указан DOM-элемент, как это узнать?
  • Вопрос задан
  • 274 просмотра
Пригласить эксперта
Ответы на вопрос 3
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Как узнать, в каком месте вылезла ошибка?
console.error выводит полный стек вызовов со ссылками на конкретные строки конкретных скриптов.
Еще очень удобно включить режим "Pause on exceptions", в нем при выпадении ошибки автоматически включается дебагер. Но для этого Developer Tools должны быть открыты (хотя, если вы веб-разработчик, то они в принципе никогда не закрываются).
Ну а все остальные проблемы легко решаются при помощи дебагера. Там и значения переменных и стек вызовов и логику можно пошагово посмотреть.
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Chrome Developer Tools обладают всем необходимым набором инструментов для отладки.
Если вы хотите останавливать выполнение кода в каком-то конкретном месте и смотреть весь стек, то проще всего использовать ключевое слово debugger:
function foo (bar) {
    var a = 1;
    // some code...
    debugger;
    // some code...
}
Ответ написан
DIITHiTech
@DIITHiTech
Fullstack javascript developer
Не знаю как Вы можете давно работать с 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 смотреть что будет находится в массиве выборки элементов - не пустой ли массив например, значит селектор не отработал или что еще.
Вообщем, нужно сначала почитать статьи, благо их хватает на эту тему, а потом уже разбираться с конкретным случаем.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы