Skip to content
beginner2 min readFree guide

Browser DevTools: inspect the request, layout and actual error

InterviewSolutionHub learning library · Updated

On this page

A browser error is not always a JavaScript bug. Use the console, network panel and element inspector to separate a failed request, an incorrect response and a layout problem.

Start with the user-visible failure

Record the action and what failed. In the console, read the first relevant error and its context rather than clearing it immediately. A later error can be a consequence of an earlier failure. Keep a reproducible sequence and avoid changing several settings before you know which observation matters.

Inspect the network exchange

Check the request URL, method, status, content type and response body. A successful-looking page can still make a failing background request. A 200 response can contain the wrong content, such as an HTML login page where JSON was expected. Be careful when sharing exported network data because it can contain cookies or private payloads.

Use the element inspector for layout evidence

Inspect the actual element dimensions, applied CSS and inherited styles. Toggle one rule at a time to test a hypothesis. Device emulation helps inspect narrow layouts, but it is not identical to testing every physical device. Include keyboard focus, zoom and long content when evaluating the complete task.

Worked example

A fictional card grid overflows on a narrow screen. The element inspector reveals a fixed-width child. Temporarily changing that one rule confirms the source of the overflow; the permanent fix still belongs in the project source and needs a fresh page check.

Check your understanding

Try each question before opening its explanation. These are free practice prompts; they do not use game chances.

Does an HTTP 200 prove the response is useful to the client?

No. Check the content type and body against what the caller expects. A successful status with an unexpected representation can still break the workflow.

Are inspector changes automatically saved to the project?

Ordinary temporary changes are not a substitute for editing the source. Use them to investigate, then implement and verify the actual change in the codebase.

What would you inspect before blaming an API JSON parser?

Inspect the network response itself. A redirect, HTML error page, empty body or invalid content type may explain the parser failure.

Sources and further reading

These original examples explain foundational concepts. Use the official references for complete, current details and version-specific behaviour.

About this guide: AI-assisted educational content with original examples and linked primary references. Found an issue? Tell us what to improve.

Keep exploring Developer tools

All subtopics →