const ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    size: 10,
    speed: 4,
    dx: 4,
    dy: -4
}

// draw ball on canvas 
function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.xize, 0, Math.PI * 2);
    ctx.fillStyle = '#0095dd';
    ctx.fill();
    ctx.closePath();
}

I'm trying to draw a ball using canvas.

ctx.arc(ball.x, ball.y, ball.xize, 0, Math.PI * 2);

This line calls arc() and tries to read ball.size by access ball.xize. It's a typo.
In languages I'm familiar with, typos like this result in error messages that can help quickly identify the cause. There is none with javascript. What is the canonical way to debug javascript in such cases? Do we have to read and verify each and every line like what I did here?