Debugging

Table of Contents


Console Debugging 

if (this.debugMode) {
  window.addEventListener('mousedown', (e) => {
    // Calculate percentage based on screen click
    const xRatio = (e.clientX / window.innerWidth).toFixed(3);
    const yRatio = (e.clientY / window.innerHeight).toFixed(3);
    console.log(`{ x: width * ${xRatio}, y: height * ${yRatio} },`);
  });
}

Used console.log() statements inside our Level 2 code, to continuously output data. By capturing screen-click coordinates, these custom logs print formatted code directly to the browser console.



Hitbox Visualization

When debugMode is enabled, the code runs a loop over our custome Catmull-Rom spline array to draw and color a semi-transparent green overlay, showing exact boundaries of the path.

draw(debug = false) {
  if (debug && this.polygon.length > 0) {
      this.ctx.fillStyle = "rgba(0, 255, 0, 0.3)";
      this.ctx.beginPath();
      this.ctx.moveTo(this.polygon[0].x, this.polygon[0].y);
      for (let i = 1; i < this.polygon.length; i++) {
          this.ctx.lineTo(this.polygon[i].x, this.polygon[i].y);
      }
      this.ctx.closePath();
      this.ctx.fill();
  }
}


this.debugMode = true; // Set to true to see the green path and enable click logging



Source-Level Debugging

Demonstrated source-level debugging by setting conditional breakpoints inside the Chrome Sources panel. Allows to freeze the execution at source code level and inspect

// The execution target for our DevTools breakpoint
if (player && wolf && this.checkPlayerWolfCollision(player, wolf)) {
  player.position.x = this.redStartPosition.x; // <-- Setting a breakpoint here
  player.position.y = this.redStartPosition.y;
  player.velocity.x = 0;
  player.velocity.y = 0;
}



Network Debugging

Used the browser’s Network tab to watch data travel between the game and the database server in real time.

this.leaderboard.submitScore(name, parseFloat(timeTaken), "RedRidingHood")
    .then(() => {
        this.successElement.querySelector('#inputArea').style.display = 'none';
        finalBtn.disabled = false; finalBtn.style.background = "#28a745"; 
        finalBtn.innerHTML = "GO TO LEVEL 2 →";
    })



Application Debugging

Used the browser’s Application tab to audit how the game stores data in the browser’s memory.

// The data object tracked inside browser memory
this.gameEnv.stats = { coinsCollected: 0 };
// ...
const currentScore = this.gameEnv.stats?.coinsCollected || 0;



Element Inspection

Opened the DevTools elements panel to check items created inside our JavaScript modules. I can track elements like our successElement, to make sure everything maps perfectly on screen

this.successElement = document.createElement('div');
this.successElement.style = "position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,0,0,0.95); padding:50px; border:4px solid red; border-radius:15px; text-align:center; display:none; z-index:999999;";
document.body.appendChild(this.successElement);