← Back to Portfolio

🐛 Debugging

Element Inspection

Project Evidence Required

Use Element viewer to inspect canvas, DOM elements, styles.

Assessment Method

Demo: Inspect element properties and game object state

What it is

The Elements panel shows the live DOM tree of your page. You can hover any node to highlight it on screen, click to inspect its computed styles, and edit HTML or CSS live to test changes without reloading.

Why it matters

Some bugs aren’t in your JS — they’re in the HTML/CSS surrounding the canvas. Maybe a parent container is squishing the canvas at certain viewport widths; maybe a HUD overlay is positioned wrong. The Elements tab is where those layout bugs become visible.

How GateGame implements it

Inspected the <canvas> element to confirm its intrinsic size matched the rendered size — caught a CSS rule on the parent that was scaling it down at narrow viewports. Also verified HUD overlay divs were positioned correctly relative to the canvas using the computed-styles pane.

Code Example

<!-- The canvas element under inspection: -->
<canvas id="game" width="1280" height="720"
        style="width: 100%; max-width: 1280px;"></canvas>

<!-- Elements tab → Computed shows the actual rendered size -->

Key Takeaway

If the game looks wrong but the JS values are right, the bug is in the DOM or CSS. Elements tab is where you find it.

---