DarnlyYour site is up, someone sends you a message, and something's wrong. Don't panic and don't start editing on the host's dashboard. Vibe coding debugging on a live site works best in a calm order. The fix happens in your project, the same way you built it. Here it is.
1. Capture the bug while you can see it
Write down the address, what you clicked, and what you expected. Take a screenshot and mark the broken part. Open the browser console (Cmd+Option+J on a Mac, Ctrl+Shift+J on Windows), redo the action and copy any red errors. The guide on copying console errors walks through it.
Also note the device. A bug on a phone may not show on a laptop. What browser am I using? copies your browser, screen size and settings in one go.
2. Check it's not the host
Some live-only bugs aren't in your code at all:
- The whole site is down or shows an error page? Look up the status code in the HTTP status code explainer.
- Domain not loading? The domain checker looks at DNS, https and redirects.
- Security warning in the browser? Check the certificate with the SSL checker.
- Images or links broken? The broken link checker finds every dead link and missing image.
3. Try it on localhost
Start your app on your computer and repeat the steps. Two outcomes:
- It happens on localhost too. Good news. That's a normal code bug. Give your agent the report and let it fix it there.
- It only happens live. Tell your agent exactly that. It points at things like a missing environment variable on the host, an API address that still says localhost, a different database, or caching. Ask the agent to check those, and compare your host's environment variables with your
.envfile.
4. Fix, check, deploy
- Have the agent fix the code. Ask it to say in one line what it changed.
- Check it on localhost yourself, with the same steps.
- Commit and push, or deploy the way your host expects.
- Open the live page in a fresh window and try again. A hard reload (Cmd+Shift+R or Ctrl+Shift+R) skips the old cached files.
If the fix made things worse, git can take you back. The Git undo helper shows the right command for what went wrong.
Capture it in one key with Darnly
Step 1 is the bit that's easy to skip when you're in a hurry. Darnly is a free Chrome extension that does it in one move on any page, live or local. Press Option+Shift+B (Windows is coming soon), click the broken part, type what you expected.
On a live site, click Record errors on this site once. From then on Darnly keeps that site's console errors and failed requests from the last 60 seconds, ready for the next capture. Without that, it still includes failed requests the browser already lists for the page.
The report goes into .darnly/inbox/ in your local project, with the live address in it, so your agent works on the code on your computer. If your project lives in the cloud, copy the picture and details into your agent's chat instead, or use Darnly's optional cloud inbox.
One limit to know: on localhost Darnly can sometimes name the component and file that drew an element. On a live, built site it can't, because that information is gone after the build. The selector, text, styles and errors still help the agent find it.