Debugging

Debugging is the loop of finding a bug, working out where it lives, and fixing it. Across Gem.js, Guard.js, heistMusic.js, and the Heist.exe level files, six different debugging techniques were used to track problems down.

Debug Techniques

Click any technique to see how it was used.

Bug Found

DevTools

Console

Hitbox

Source

Network

App

Element

Pick a technique above to see where it was applied.

The Six Techniques

Console Debugging. Scattered console.log calls across Gem.js, Guard.js, and heistMusic.js make runtime behavior visible. Gem.js logs gem creation and collection. Guard.js logs velocity every time the guard bounces off a wall. heistMusic.js logs the active track and warns when a fetch fails.
```
console.log('Gem created:', this.spriteData?.id, 'at position', this.position);
console.log(this.velocity.y); // Guard bounce
console.warn('Background music: failed to start', error);
```
Hitbox Visualization. In HeistL1.js and HeistL3.js, every Barrier object is set with visible: true and a green semi-transparent color. The collision zones get drawn directly on top of the map so you can literally see where the walls and edges live.
```
const border_top = {
  color: 'rgba(0, 255, 136, 0.5)',
  visible: true,
  hitbox: { widthPercentage: 1.0, heightPercentage: 1.0 }
};
```
Source-Level Debugging. Guard.js and Gem.js have console.log calls placed at meaningful execution points — collisions, velocity flips, gem collection — making it easy to set DevTools breakpoints right where the bug happens and step through frame by frame.
```
// Guard.js — set a breakpoint here to inspect collision state
console.log('Collision has occurred, player has been destroyed.');

// Gem.js — breakpoint here to check permanentlyCollected state
if (this.permanentlyCollected) return;
```
Network Debugging. heistMusic.js fetches from the iTunes Search API. It checks response.ok before parsing and throws a descriptive error on failure, so problems show up clearly in the Network tab.
```
const response = await fetch(this.endpoint);
if (!response.ok) {
  throw new Error('API request failed (' + response.status + ')');
}
const data = await response.json();
```

Application Debugging. Gem totals live on gameEnv.stats.coinsCollected. Boolean flags like permanentlyCollected and isPlaying track game state at runtime — all inspectable in the Application tab.

// Gem.js — state stored on gameEnv
this.gameEnv.stats.coinsCollected = (this.gameEnv.stats.coinsCollected || 0) + this.value;

// heistMusic.js — runtime flags
this.started = true;
this.isPlaying = true;

Element Inspection. heistMusic.js builds a toggle button at runtime and appends it to document.body. Gem.js hides its canvas after collection by setting canvas.style.display. Both changes show up live in the Elements tab.
```
// heistMusic.js — button added to DOM
document.body.appendChild(btn);

// Gem.js — canvas hidden after collection
if (this.canvas) this.canvas.style.display = 'none';
```

The Six Techniques — Tabbed View

Click a technique to switch tabs.

Console Debugging — Gem.js · Guard.js · heistMusic.js

Print whatever needs to be visible right now.

console.log('Gem created:', this.spriteData?.id, 'at position', this.position);
console.log(this.velocity.y); // logs every time Guard bounces
console.warn('Background music: failed to start', error);

Hitbox Visualization — HeistL1.js · HeistL3.js

Render collision zones as semi-transparent green overlays so you can see where walls actually are.

const border_top = {
  color: 'rgba(0, 255, 136, 0.5)',
  visible: true,
  hitbox: { widthPercentage: 1.0, heightPercentage: 1.0 }
};

Source-Level Debugging — Guard.js · Gem.js

Strategic log calls double as breakpoint targets in DevTools.

if (this.permanentlyCollected) return;           // Gem.js
console.log("Collision has occurred...");         // Guard.js

Network Debugging — heistMusic.js

Check the response and throw a descriptive error when a fetch fails.

const response = await fetch(this.endpoint);
if (!response.ok) throw new Error('API request failed (' + response.status + ')');
const data = await response.json();

Application Debugging — Gem.js · heistMusic.js

State stored on gameEnv and runtime flags — all inspectable in DevTools.

this.gameEnv.stats.coinsCollected += this.value; // Gem.js
this.started = true;                              // heistMusic.js

Element Inspection — heistMusic.js · Gem.js

Runtime DOM changes you can inspect in the Elements tab.

document.body.appendChild(btn);             // heistMusic.js
this.canvas.style.display = 'none';         // Gem.js

Quick Reference

Technique

File

DevTools Tab

Console Debugging

Gem.js, Guard.js, heistMusic.js

Console

Hitbox Visualization

HeistL1.js, HeistL3.js

Canvas overlay

Source-Level Debugging

Guard.js, Gem.js

Sources

Network Debugging

heistMusic.js

Network

Application Debugging

Gem.js, heistMusic.js

Application

Element Inspection

heistMusic.js, Gem.js

Elements

Key Things to Remember

Start with console.log to narrow down where the bug lives, then switch to a more specific DevTools tab to dig in.
Use console.warn or console.error when something is actually wrong — they stand out from regular logs.
Hitbox visualization is invaluable for collision bugs. You can't fix what you can't see.
Match the DevTools tab to the bug: network failures go to Network, saved state goes to Application, DOM issues go to Elements.