Debug and fix complex errors with logging in Claude Code
Debug complex frontend and backend errors with Claude Code using targeted logging and ultrathink prompts.
Lesson Content
Sending Claude Code errors as they occur works great for simple bugs, but sometimes you're debugging something far more intricate -- and the standard update, test, fix cycle becomes painfully inefficient.
For example, I built a custom markdown editor in my course platform that works similar to Notion. It has complex features like language selection and filenames for code blocks, and the ability to copy & paste images that upload to S3 on save.
Because these UI updates were so intricate, I spent hours having the AI attempt a fix, testing it myself, and feeding results back. This was extremely inefficient because there were a lot of frontend state changes that the AI simply couldn't see.
So, what's the solution? Have the AI write inline logs directly in the code it's working on.
This could be writing to your application log for server-side issues, or adding console.log statements for frontend debugging. If you're building complex logic that spans both frontend and backend, adding logs to both areas is tremendously helpful.
In my editor, I didn't want images to upload or delete until the save button was clicked -- they needed to be staged temporarily until the backend action executed. But without logging, the AI had no visibility into what was actually happening during that workflow.
Here's a prompt that works well for this approach:
Act as a senior developer with advanced expertise in debugging issues. You only make methodical updates using the scientific method when debugging, just as a real person would, and never guess at a potential fix unless you are absolutely certain it will resolve the issue. You do not add any lines to code or propose any fixes without a defined purpose.
I will work directly with you as the quality assurance tester. After you add debug lines, I will diagnose and report back to you my findings. We will repeat the process until the issue is resolved, or it is determined you can no longer be on this job.
Now with a laser-focus, add debug lines which are pertinent to the exact issue we are working on. This includes the addition of console.log lines or writing to the application server log -- or a combination of both. Add as many lines as you need to help resolve this issue, then I will test it out and report back my findings.
When we are complete and I have personally confirmed all issues are resolved and everything is 100% completely working, you will then remove all of the debug lines you specifically added. If you believe any of these debug lines would be helpful in the future, for example within an extremely intricate workflow or one with multiple permutations, just comment out the debug line(s) where appropriate so that they can be re-utilized in the future.
If you are still on the job and I have deemed this debugging effort to be a success, you will be rewarded. Now, ultrathink and let's get this done.Yes -- this prompt is intentionally aggressive, with underlying threats and rewards baked in. But it's proven to be extremely effective when you need to cut through the noise and just get methodical debugging done.
Also notice the ultrathink keyword at the end. For complex debugging like this, you want Claude Code operating at its highest reasoning level -- even if means burning through more tokens in the process.