🐛 Debugging

Application Debugging

Project Evidence Required

Examine cookies, localStorage, session data for login/state.

Assessment Method

Demo: Application tab inspection of stored data

What it is

The Application panel in DevTools inspects all client-side storage: cookies, localStorage, sessionStorage, IndexedDB, service workers, and cached resources. Each entry is shown as a key-value table you can edit live.

Why it matters

Bugs involving persistent state (login sessions, saved settings, cached scores) require looking at the actual stored values. The Application tab lets you confirm or invalidate hypotheses about what’s stored where.

How GateGame implements it

Used the Application tab to verify the OCS session cookie was set after login, confirm the leaderboard’s local-cache entry was being updated after each score submission, and clear stale localStorage entries while testing edge cases.

Code Example

// Code that writes to localStorage (verified in Application tab):
localStorage.setItem('lastScore', JSON.stringify({
  player: 'aarav',
  score: 4200,
  ts: Date.now()
}));

// Application tab → Local Storage → your-domain shows the entry

Key Takeaway

When state seems wrong, look at the state. The Application tab is the truth source for everything client-stored.