Original fictional case. All request logs and file listings below are supplied examples. This page does not inspect your files, browser settings or network traffic. Progress stays in this page’s memory.

Read the complete case

The evidence and explanations are also available without JavaScript. Open a step to read its solution.

Step 1: Where is the most useful next check?
Supplied evidence · EXAMPLE
Source CSS: --accent: #ff7700;
Online page: still violet.
You do not yet know which CSS file the page received.

Inspect the loaded stylesheet URL and response

Yes. Find the actual response used by the page.

Step 2: What does this evidence establish?
Supplied evidence · EXAMPLE
Simulated Network entry after a fresh request:
/assets/style.css → 200
Response includes --accent: #7656d8;
The local generated dist/assets/style.css contains the same violet value.

The generated output is still old

Yes. Rebuild the output before uploading it. A cache purge cannot create missing new content.

Step 3: What should you investigate now?
Supplied evidence · EXAMPLE
After rebuilding and deploying, the received CSS contains #ff7700. The element still appears violet. The Styles panel shows a later rule setting its colour.

The winning CSS rule and cascade

Correct. The problem has moved from delivery to styling. Inspect the winning declaration and change the intended rule.

Apply the method

Write down the symptom, collect the exact address or rule, change one cause and verify the result. A successful request does not by itself prove that the right content was returned.

Read the companion lesson · All debugging trails · Short debugging exercises