Какие инструменты лучше всего подходят для отладки JavaScript в современных браузерах?

Ищу современные решения для отладки JS

В старых статьях часто упоминают Firebug как основной инструмент для отладки JavaScript. Но сейчас этот плагин устарел и больше не поддерживается.

Мне нужен совет по выбору актуального инструмента для отладки. Особенно интересует возможность:

  • Устанавливать точки останова в коде
  • Просматривать значения переменных во время выполнения
  • Пошагово выполнять код

Какие современные альтернативы вы используете? Буду благодарен за практические советы от опытных разработчиков.

function calculateTotal(items) {
    let sum = 0;
    for (let item of items) {
        // Хочу поставить breakpoint здесь
        sum += item.price * item.quantity;
    }
    return sum;
}

let products = [{price: 100, quantity: 2}, {price: 50, quantity: 3}];
let result = calculateTotal(products);
console.log(result);

Где лучше всего отлаживать такой код в 2024 году?

В VS Code ставь брейкпоинты и запускай дебаггер через расширение - не надо между окнами прыгать. Для твоего примера попробуй console.table(products) - покажет структуру данных нагляднее. Встроенный дебаггер Node.js уже пробовал?

Все современные браузеры отлично справляются с отладкой. В Chrome или Edge просто нажми F12, выбери вкладку Sources и щелкни по номеру строки для установки точки останова. Когда код остановится, просто наведись на переменные или посмотри их в Scope. Кнопки Step Over и Step Into очень удобно использовать, чтобы шагать по коду. Так ты сможешь видеть, как изменяется значение sum в каждой итерации.