Why Your AI Coding Assistant Is Fixing the Wrong Code

If you're using artificial intelligence (AI) to help you write code—often called "vibe coding"—you've likely hit a common snag. You ask your AI to build an app, like an online shopping cart. It delivers, and initially, it looks great.

But then, during testing, you find a small issue: clicking "Add to Cart" adds an item twice, or the "Proceed to Checkout" button doesn’t work. You tell your AI, “On the product details page, ‘Add to Cart’ adds two items.”

The AI immediately tries to fix it. The problem? It might not be sure which “Add to Cart” button you mean, especially in a complex UI. AI assistants often guess when information is vague, which is risky. These guesses can lead to wrong or unnecessary code changes. Even if you revert, stray code can build up, making your project messy.

This challenge mirrors a wider, long-standing issue in software development: vague bug reports that waste valuable time. Developers frequently receive unclear complaints like:

“The button doesn’t work”
“The search box is broken”
“That thing in the top right corner is missing”

Such ambiguity leads to endless back-and-forth communication, attempts at visual explanations, and general frustration. It’s inefficient, whether you’re working with a human team or an AI.

A lightweight JavaScript utility can provide a direct way to debug: activate debug mode by pressing a defined shortcut (F12), click any UI element, and the system captures its details for instant use with a developer.

This approach is based on the same principle as Chrome’s developer console "Inspect Element" tool, where you click an element to identify it. The major difference is that our hack automatically gathers and formats more information—ID, classes, selector, text, parent tag, and window context—so you don’t have to piece that together yourself.

For instance, if the “Add to Cart” button on a specific product page is the problem, you just press F12 and click it. The system identifies that exact button, copies its details, and you paste them into your bug report. Now, your AI (or human developer) knows exactly what you’re referring to—no more guessing, no more miscommunications.

How It Works

1. Press F12 to turn on debug mode.
2. Hover over elements to see them highlighted.
3. Click the element causing the problem.
4. Element information is copied silently to your clipboard.
5. Paste this information into your bug report.

You can see an example of it in action here
https://airabbit.blog/elementsnapper-demo/

Sample Output

Window: MyShoppingApp
Page: Product Details
Element: button#add-to-cart-btn.product-action.primary
ID: add-to-cart-btn
Classes: product-action primary
Selector: #add-to-cart-btn
Text: Add to Cart
Parent: div

• Window context (e.g., “MyShoppingApp”)
• Exact CSS selector for the element
• Element ID, CSS classes, and displayed text
• Parent element’s tag for context