Frontend debugging
with Codex
Reproduce the issue, inspect the browser, fix the cause, and verify the result.
Review the goal result
Read the summary, open the page, then inspect the diff.
Summary
See what Codex changed and what it says it verified.
Running page
Use the product before deciding whether the result is correct.
Diff
Review the implementation after checking the behavior.
Acceptance criteria
Tokyo layeringObjects pass behind the globe and return to the foreground.
Responsive compositionThe scene works on phone, tablet, and desktop.
Reverse scrollingThe motion remains correct in both directions.
Reduced motionThe alternative stays stable and readable.
Console outputThe interaction does not introduce new errors.
Debug the Tokyo issue
The objects move, but they stay behind the globe. In the other city scenes, they return to the foreground.
The objects remain behind the globe.
They pass behind it, then return to the foreground.
Can you take a look at the Tokyo section in A Year in a Day? The objects are moving, but they stay behind the globe the whole time. In the other cities, they come back in front as they move around it, which is what I want for Tokyo too.
Please reproduce it in the browser, figure out what’s different about Tokyo, and fix the actual issue without breaking the other cities. Check it on mobile, tablet, and desktop when you’re done.
Debugging loop
Start with observable behavior and finish by replaying the same steps against the fix.
Reproduce
Record the route, viewport, scroll position, visible failure, and expected result.
Inspect
Collect screenshots and inspect the DOM, computed styles, console, network, and page state.
Diagnose
Compare Tokyo with a working city scene and find an explanation that accounts for both.
Fix
Change the shared cause instead of adding a one-off offset that only hides the problem.
Verify
Replay the original steps, test both directions and every target width, then check for regressions.
Use the evidence that fits the problem
Screenshots
Capture the visible failure, scroll position, and working comparison.
DOM and styles
Inspect stacking contexts, transforms, masks, visibility, and computed layout.
Console and network
Check runtime errors, failed assets, and requests that did not complete.
CDP
Use deeper browser state and rendering information when it is available.
Verify the fix
A completed task is not proof. Run the same interaction again and check the surrounding behavior.
Replay Tokyo
Follow the original scroll path and confirm the layering failure no longer appears.
Test both directions
Make sure reverse scrolling produces the same correct depth order.
Check target widths
Run the interaction at 390, 768, and 1440 px.
Check for regressions
Review the other cities, reduced motion, console output, overflow, and the production build.