Debugger ignores previous function call

问题

I have this bouncing/colliding balls animation and currently I'm debugging collision detection. To be more precise, I'm trying to prevent balls from intersecting during the collision.

I wanted to stop the animation the moment balls collide and I can do that, but if I also want to draw the collision of the balls before stopping the execution, I need to draw them first.

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

So, I draw them inside the collision function. At the end of the function, I draw the balls and then stop the execution with 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();
    }
};

But this doesn't work. Execution stops before the colliding balls are drawn.

I came across with Bart's answer and used his suggestion, called a function that doesn't exist (which caused ReferenceError and stopped the execution), instead of using debugger and it worked. The balls are drawn before the stopping of execution.

Why didn't debugger work? What am I missing?

来源：https://stackoverflow.com/questions/42037733/debugger-ignores-previous-function-call