Web Debugging

Common front-end symptoms and the first checks that usually narrow the problem.

Term / Syntax	Name	Description	Example
CSS not applying	Stylesheet/selectors	Check the stylesheet path, selector match, spelling, cascade, specificity, and DevTools Styles panel.	Inspect the element → Styles → verify the rule is loaded and not overridden.
Image not loading	Asset path	Check the requested URL, filename/case, extension, Network panel, and relative path.	Open DevTools → Network → filter Img → inspect the failed request.
Layout overflowing	Sizing/box model	Inspect computed widths, min-width, white-space, intrinsic content, and overflow.	Temporarily add * { outline: 1px solid red; }
Flex alignment wrong	Axis/context	Confirm display:flex is on the parent and identify main/cross axis from flex-direction.	Check flex-direction before changing justify-content or align-items.
Grid item misplaced	Tracks/placement	Inspect explicit tracks, line numbers, named areas, and item placement.	DevTools Grid overlay can expose tracks and line numbers.

Checks for runtime errors, state, execution order, and DOM assumptions.

Term / Syntax	Name	Description	Example
Script not running	Loading/execution	Check the Console, script URL, type/module settings, and the first thrown error.	DevTools → Console; fix the first error before later symptoms.
null element	DOM selection	Verify the selector and whether the element exists when the query runs.	console.log(document.querySelector(".target"));
wrong value	State/data flow	Log or inspect the value at the point it changes rather than only at the final symptom.	console.log({ before, input, result });
event not firing	Listener/event path	Check listener registration, event name, target element, disabled state, and propagation.	console.log("listener attached", button);
async failure	Promise/network error	Inspect rejected promises, HTTP response status, and exception handling.	try { await loadData(); } catch (error) { console.error(error); }

A sequence for separating client code, network, HTTP, and server-response problems.

Term / Syntax	Name	Description	Example
request missing	Network initiation	If no request appears, the client likely never issued it or execution stopped first.	DevTools → Network → preserve log → trigger the action.
404 response	URL/resource	Check path, base URL, route parameters, spelling, and server route configuration.	Inspect Request URL and compare it with the API route.
401 / 403	Authentication/authorization	Check whether credentials are present and whether the authenticated user has permission.	Inspect Authorization/cookies without exposing secrets.
CORS error	Browser cross-origin policy	Check the server response headers and whether the requested origin/method/header is permitted.	Inspect the preflight/request response headers in Network.
unexpected JSON	Response contract	Inspect the raw response body and Content-Type before assuming the client parser is wrong.	Network → Response/Preview

A repeatable workflow for reducing uncertainty.

Term / Syntax	Name	Description	Example
reproduce	Make it repeatable	Define the exact steps and conditions that consistently produce the problem.	Write the smallest repeatable sequence.
observe	Collect evidence	Use DevTools, logs, status codes, computed styles, and state inspection.	Record expected vs actual behavior.
isolate	Reduce scope	Remove unrelated code or create the smallest case that still fails.	Comment out half the path, then narrow again.
test assumption	One variable at a time	Change one relevant assumption and observe the result.	Verify selector → verify element → verify event → verify callback.
confirm fix	Check regression	Repeat the original steps and test nearby behavior after the change.	Re-run the original reproduction and related cases.