# How Real Developers Solve Impossible Errors Source: https://www.youtube.com/watch?v=-LNozRLU9QA Recap page: https://rapidrecap.app/video/-LNozRLU9QA Generated: 2025-11-27T15:33:06.248+00:00 --- ## Quick Overview The developer solves a bug causing duplicate template application outputs by implementing specific console logging rules within the AI development environment, which allowed for immediate verification that the issue was fixed by observing only one expected log entry upon template selection. **Key Points:** - The developer encountered a bug where clicking a template twice resulted in two outputs (messages and versions) instead of one, indicating a duplicate call to `handleTemplateApply`. - The solution involved setting up custom debugging console logs using a specific rule (`debug.mdc`) to track execution flow within the `TemplateLibrary.tsx` file. - The logs successfully confirmed the double-call issue by showing sequential call numbers (1 and 2) for `handleTemplateApply` when the template was clicked twice. - The fix involved removing one of the duplicate `handleTemplateApply` calls within the `if (isPending)` block around line 666 in `TemplateLibrary.tsx`. - The developer demonstrated the fix by showing that after implementing the logs and refreshing, a single click now correctly produces only one corresponding log entry, confirming the bug resolution. - This process highlights the effectiveness of using context-aware AI rules (like the 'debug' rule) to rapidly diagnose and fix complex, non-obvious bugs in front-end code without extensive manual debugging. ![Screenshot at 00:54: The developer is shown the initial state of the debugging process where a double click on a template in the Thumio editor results in two entries in the Edit History panel, which is the visual manifestation of the bug being investigated.](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-00-54.png) **Context:** The video demonstrates a software debugging session using an AI coding assistant (Cursor/Agent) within a development environment (Thumio, an AI YouTube Thumbnail Editor). The specific problem is a React front-end bug where selecting a template twice triggers a duplicate action, leading to erroneous duplicate messages and versions being created. The developer utilizes the AI coding assistant to establish custom debugging protocols (rules) to trace the execution flow and pinpoint the exact line causing the repeated function call. ## Detailed Analysis The video details a debugging workflow where the developer uses an AI agent to solve a bug causing duplicate template applications in a React application. The core issue is that clicking a template twice executes the `handleTemplateApply` function twice, confirmed by inspecting the Edit History panel which shows two sequential versions created from one user action. The developer first sets up a specific AI rule, `debug.mdc`, which dictates how the AI should log information during debugging: be specific, use clear labels, and avoid generic console checks. After applying this rule, the developer forces the bug by clicking the Fortnite template twice (00:54:28). The resulting logs, specifically in `TemplateLibrary.tsx` around line 666, show sequential call numbers (1 and 2) for `handleTemplateApply`, proving the issue. The AI then suggests the fix: removing the redundant call within the pending state check. After implementing the fix and performing a hard reload (6:18), re-testing the template click produces only a single log entry, confirming the fix. The developer concludes by praising this approach as a powerful, fast way to debug complex state management issues without relying on older, less efficient debugging methods. ### Bug Identification and Setup - Duplicate template application when clicked twice (0:05) - Developer sets up custom AI debugging rules via `.cursor/rules/debug.mdc` (1:50) - Tests the bug by clicking the 'Fortnite' template in Thumio (0:53) ### AI Diagnosis and Evidence - AI identifies the issue is in `TemplateLibrary.tsx` around line 666 (4:38) - Logs confirm two sequential calls to `handleTemplateApply` with call numbers 1 and 2 (6:07) ### The Fix Implementation - AI suggests removing one of the duplicate `handleTemplateApply` calls guarded by `if (isPending)` (5:05) - Developer implements the fix and performs a hard reload (6:18) ### Verification and Conclusion - Re-testing shows only one log entry (call number 1) (7:44) - The developer confirms the fix works instantly, validating the power of AI-guided debugging workflows (8:51) ![Screenshot at 00:00: Developer speaking directly to the camera while code editor output showing numerous errors is visible in the background \(0:00\)](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-00-00.png) ![Screenshot at 00:48: The AI agent displays the 'Template Library' dialog within the Thumio application interface, showing various game templates available \(0:48\)](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-00-48.png) ![Screenshot at 01:48: The file explorer pane highlights the .cursor/rules directory, showing the custom rule files \(debug.mdc, senior-rule.mdc\) used to guide the AI agent's behavior \(1:48\)](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-01-48.png) ![Screenshot at 02:25: The content of debug.mdc is displayed, detailing explicit instructions for the AI on how to log information when debugging console logs \(2:25\)](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-02-25.png) ![Screenshot at 03:50: The AI agent displays a detailed plan in the chat interface, outlining the steps to add console logging to TemplateLibrary.tsx to trace the duplicate template application bug \(3:50\)](https://ss.rapidrecap.app/screens/-LNozRLU9QA/00-03-50.png)