Отладчик игнорирует предыдущий вызов функции

У меня есть эта анимация отбойных/сталкивающихся шаров, и в настоящее время я отлаживаю обнаружение столкновений. Чтобы быть более точным, я стараюсь, чтобы шары не пересекались во время столкновения.

Я хотел остановить анимацию в момент столкновения шаров, и я могу это сделать, но если я также хочу нарисовать столкновение шаров, прежде чем остановить выполнение, мне нужно сначала нарисовать их.

firstBall.move();
secondBall.move();
Ball.detectCollisions(balls); // execution stops here before the balls are drawn
firstBall.draw();
secondBall.draw();

Итак, я рисую их внутри функции столкновения. В конце функции я рисую шары, а затем останавливаю выполнение с помощью debugger.

Ball.detectCollisions = function () {
    var debug = false;
    balls.forEach(function(ball) {
        ball.detectWallCollision();
    });
    for (var i = 0; i < balls.length; i++) {
        for (var j = i + 1; j < balls.length; j++) {
            if (balls[i].collidingWith(balls[j])) {
                // balls[i].resoveCollision(balls[j]);
                balls[i].xray = true;
                balls[j].xray = true;
                debug = true;
            }
        }
    }
    if (debug) {
        balls.forEach(function(ball) {
            ball.draw();
        });
        debugger;
        // haltGodDammit();
    }
};

Но это не работает. Выполнение останавливается, пока не нарисованы встречные шары.

Я столкнулся с ответом Барта и использовал его предложение, называемое функцией, которая не существует (которая вызвала ReferenceError и остановила выполнение) вместо использования debugger и это сработало. Шары рисуются до остановки выполнения.

Почему не работало debugger? Что мне не хватает?