CS111 Evidence: Debugging
Debug Evidence
🔹 Debugging: Console Diagnostics
- 📌 Requirement: Use console.log or console.error strategically within update or collision methods to track game states, variable flags, and operational method triggers.
- 📝 Assessment Method: Code review of strategic runtime evaluation logs inside core execution loops.
- What it is: Console debugging outputs real-time runtime variables directly into the browser's logging terminal without modifying user-facing interface elements.
- How it works: Strategic logging commands are placed within catch statements or block boundaries to capture values exactly when an exceptional event occurs.
- Why it helps: It stops silent tracking errors. Printing explicit text warnings into the DevTools terminal allows developers to capture exact logic faults instantly while maintaining a continuous visual canvas frame rate.
class RedRidingMusic {
async fetchPreviewUrl() {
try {
const response = await fetch(this.endpoint);
const data = await response.json();
const track = data.results.find(item => item.previewUrl);
if (!track) throw new Error('No track found');
return track.previewUrl;
} catch (error) {
console.error("iTunes API Error:", error);
return null;
}
}
}
🔹 Debugging: Hit Box Visualization
- 📌 Requirement: Draw and visualize collision boundaries/hitboxes to refine coordinate positioning and intersection detection accuracy.
- 📝 Assessment Method: Demo showing the ability to toggle hitbox displays and audit geometric collision rules in real time.
- What it is: Hitbox visualization renders invisible physics parameters as colored geometry on screen so developers can see collision lines.
- How it works: A conditional statement inside the rendering script checks a `debug` flag. If true, it paints shapes (like a bounding box or pathway loop) on top of the moving assets using translucent fill options.
- Why it helps: It maps physics coordinates directly to visual pixels. Instead of guessing why a player gets blocked or falls through boundaries, this allows developers to inspect alignment accuracy interactively during playtests.
class SplineBarrier {
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();
}
}
}
🔹 Debugging: Source-Level Breakpoints
- 📌 Requirement: Set active breakpoints within browser DevTools to pause code execution, inspect variable scopes, and step through calculations line-by-line.
- 📝 Assessment Method: Walkthrough demo utilizing the Sources tab interface to isolate script logic and audit frame parameters.
🛠️ Step-by-Step Diagnostic Walkthrough:
1. Open Developer Tools: Launch the live game portfolio page, right-click anywhere on the window interface, and select Inspect (or press F12). Switch directly to the Sources tab panel at the top.
2. Isolate the Target Asset File: Navigate the file directory tree on the left panel to locate your level script (e.g., SplineBarrier.js). Click to reveal the source text layout window.
3. Inject a Breakpoint: Locate the line number inside the getCatmullRomPoint calculation routine where the interpolation variable x or y is calculated. Click directly on the margin line number to set a blue breakpoint tag.
4. Trigger Execution Pause: Return to the active canvas container screen and move your player token across Level 2. The browser engine hits the breakpoint line and freezes the frame execution instantly.
5. Audit Local Variables & Scope: Look at the Scope pane on the right-hand side. While code execution is frozen in time, read the active values of t, localT, and your 4 control coordinate points (p0, p1, p2, p3) to verify that the math variables are calculating without precision drift.
class SplineBarrier {
getCatmullRomPoint(t, p0, p1, p2, p3) {
const t2 = t * t;
const t3 = t2 * t;
const x = 0.5 * ((2 * p1.x) +
(-p0.x + p2.x) * t +
(2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
(-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3);
const y = 0.5 * ((2 * p1.y) +
(-p0.y + p2.y) * t +
(2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
(-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3);
return { x: x, y: y };
}
}
🔹 Debugging: Network Streams & API Auditings
- 📌 Requirement: Examine the browser Network tab for asynchronous API calls, verify status response codes, and trace network payloads or CORS errors.
- 📝 Assessment Method: Walkthrough demo inspecting fetch requests, remote response data, and potential server-side error messages.
🛠️ Step-by-Step Diagnostic Walkthrough:
1. Access the Network Panel: Launch DevTools (F12) and switch directly to the Network tab panel at the top.
2. Trigger the Asynchronous Fetch Call: Click the interactive audio toggle button inside the game interface. This activates your background RedRidingMusic script, firing off an HTTP request to the external iTunes API endpoint.
3. Verify Status & Response Codes: Find the row named search?term=little+red+riding+hood... inside the Network log list. Check the Status column to ensure it reads a clean 200 OK. If a red entry appears, look for standard CORS clearance errors or 404/500 missing server response flags.
4. Audit the Data Payload Stream: Click directly on the API request row entry, and toggle over to the Response or Preview sub-tabs. Expand the JSON object collection list to track how the array passes properties back down into your game's data-parsing fields.
class RedRidingMusic {
constructor() {
this.endpoint = "https://itunes.apple.com/search?term=little+red+riding+hood&media=music&limit=5";
}
async fetchPreviewUrl() {
try {
const response = await fetch(this.endpoint);
const data = await response.json();
const track = data.results.find(item => item.previewUrl);
if (!track) throw new Error('No track found');
return track.previewUrl;
} catch (error) {
console.error("iTunes API Error:", error);
return null;
}
}
}
🔹 Debugging: Stored Application Data
- 📌 Requirement: Examine cookies, localStorage, and session data within browser tools to verify game state retention, configuration data persistence, or login credentials.
- 📝 Assessment Method: Walkthrough demo utilizing the Application tab container to audit saved data tables and clear cache values.
🛠️ Step-by-Step Diagnostic Walkthrough:
1. Navigate to the Application View: Open DevTools (F12) and choose the Application tab at the top options bar (you may need to click the double arrow '>>' if hidden).
2. Audit Local Storage Records: Expand the Local Storage option folder inside the left menu panel list and select your active game site domain URL.
3. Inspect Saved Key-Value Pairs: Look through the storage table records to locate game tracking parameters—such as high scores, unlocked level indices, or player settings profiles saved across sessions.
4. Verify Cache Actions & State Drops: Right-click a specific data key row entry to modify its value manually, or click the clear button to wipe storage values. This lets you confirm that your configuration data correctly falls back to baseline default parameters when no prior data values are found.
class GameState {
saveProgress(levelIndex, score) {
const saveData = {
level: levelIndex,
highestScore: score,
timestamp: Date.now()
};
localStorage.setItem('redRidingSave', JSON.stringify(saveData));
}
loadProgress() {
const savedString = localStorage.getItem('redRidingSave');
if (savedString) {
return JSON.parse(savedString);
} else {
return { level: 1, highestScore: 0 };
}
}
}
🔹 Debugging: Element Inspection & DOM Auditing
- 📌 Requirement: Use the DevTools Element Viewer to inspect the HTML structure, canvas dimensions, container elements, and cascading layout styles.
- 📝 Assessment Method: Walkthrough demo using the element selector tool to audit properties and game object bounding boxes.
🛠️ Step-by-Step Diagnostic Walkthrough:
1. Activate the Element Inspector: Open DevTools (F12) and jump to the Elements tab. In the absolute upper-left corner of the DevTools panel, click the Target Element Selector Tool (the icon shaped like a mouse pointer over a square box).
2. Isolate the Canvas Viewport: Hover your mouse directly over the active running game screen and left-click. This instantly snaps the DOM tree view highlight block directly onto your <canvas> HTML node tag.
3. Audit Box Sizing Dimensions: Review the properties inline on the selected tag to confirm that the assigned HTML rendering width and height dimensions match your gameEnv inner-boundary scaling definitions precisely.
4. Inspect CSS Layout Properties: Look down at the bottom Styles sidebar sub-pane. Use this container layout to observe margins, flexbox alignment directives, and positioning codes. This lets you debug why a game canvas might clip, offset on mobile screen layouts, or fail to center correctly on your Jekyll blog theme layout.
class GameEnv {
static initialize() {
this.canvas = document.getElementById("game-canvas");
this.ctx = this.canvas.getContext("2d");
this.innerWidth = 800;
this.innerHeight = 600;
this.canvas.width = this.innerWidth;
this.canvas.height = this.innerHeight;
this.canvas.style.width = "100%";
this.canvas.style.maxWidth = `${this.innerWidth}px`;
this.canvas.style.display = "block";
this.canvas.style.margin = "0 auto";
}
}