Read the Project Editor

A generated project can feel like a wall of unfamiliar names. Do not begin by memorizing the framework. Ask which file starts the application, which files define user-facing pages or components, which code runs on the server, where data access lives, and which manifests describe dependencies and scripts. You are building a responsibility map, not studying every line.

Folders are conventions rather than magic. A file called package.json commonly describes a JavaScript project's scripts and dependencies; a pyproject.toml can serve a similar role in Python. Source folders, public assets, configuration files, migrations, and tests each answer different questions. Use Agent to explain them, then verify by opening the referenced paths.

The Shell is an interactive terminal. It can list files, inspect version control, install packages, run tests, and start programs. A command may finish immediately or launch a process that keeps running. The Run control usually invokes a configured command for you. Learn which command it runs and which network port the application listens on.

The Console shows output from the running application: startup messages, warnings, request logs, and crashes. The Shell shows output from commands you run yourself. If Preview is blank, look upstream: is the process running, did it bind to the expected host and port, did compilation fail, or is the page failing in the browser?

Long error output often contains one useful first cause followed by many consequences. Capture the exact action, timestamp, first error line, relevant stack frame, and affected URL or record. Ask Agent to explain the failure using those observations and point to the code path responsible. Avoid paraphrasing an error into 'it doesn't work.'

Separate compile errors, startup errors, server-request errors, browser-rendering errors, and wrong-business-result errors. They occur at different layers and require different evidence. A server can be healthy while a browser component crashes; a form can submit successfully while storing the wrong status.

Choose one action, such as submitting a request. Trace it from the visible control to validation, the request sent to the server, server-side authorization and logic, the database write, the response, and the refreshed interface. The exact framework changes, but these responsibilities persist across web apps.

Ask Agent for paths and function names, then open them. Add temporary, nonsensitive logs only when existing evidence is insufficient, and remove noisy debugging output afterward. A trace turns an opaque app into a chain of inspectable contracts.

Use the Visual Editor for a direct copy, color, image, or spacing correction when the change is truly visual. Use Agent when a change spans behavior, data, or hidden structure. Use the text editor when you understand the exact narrow edit and can verify it. The best tool is the one that produces the smallest correct diff with the clearest proof.

Before editing, record the current checkpoint and working behavior. After editing, inspect changed files, run the narrowest relevant check, and repeat the journey. Small changes build literacy because cause and effect remain visible.