Skip to content

Releases: JimmyAWaern/lovable-ai-debugger

Version 1 - Lovable AI Debugger in Chrome Dev Tools

17 Apr 11:55
@JimmyAWaern JimmyAWaern
v1.0.0
b824076
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
Version 1 - Lovable AI Debugger in Chrome Dev Tools Latest
Latest

🎉 Version 1.0.0 - Initial Release of Lovable AI Debug Helper! 🎉

This is the first public release of the Lovable AI Debug Helper Chrome DevTools extension!

This tool aims to streamline the debugging process for web developers by integrating the power of Google's Gemini AI directly into the Chrome DevTools.

Key Features in this Release:

  • Dedicated DevTools Panel: Adds a "Lovable AI" panel for easy access.
  • Console Log Collection: Intercepts and collects recent console messages (logs, warnings, errors) generated after activation.
  • Network Activity Summary: Fetches HAR data to provide a summary of network requests, highlighting potential HTTP errors (4xx/5xx) and slow requests.
  • Gemini AI Analysis:
    • Generates a detailed prompt based on collected console and network data.
    • Sends the prompt to the configured Gemini API endpoint (defaults aimed at gemini-1.5-pro-latest).
    • Displays the AI's analysis, aiming to identify problems, suggest root causes, and propose actionable next steps or fixes.
  • API Key Management: Allows saving your Google Gemini API key securely using chrome.storage.local.
  • Copy Prompt: Easily copy the exact prompt sent to the AI for review or external use.

How to Install:

Since this is not on the Chrome Web Store yet:

  1. Download the lovable-ai-debugger.zip file attached below under "Assets".
  2. Unzip the file.
  3. Open Chrome, go to chrome://extensions/.
  4. Enable "Developer mode" (top-right toggle).
  5. Click "Load unpacked" and select the unzipped folder containing manifest.json.

Getting Started:

  1. Open DevTools on the page you want to debug.
  2. Select the "Lovable AI" panel.
  3. Enter and save your Google Gemini API Key (Get one from Google AI Studio).
  4. Use the "Collect..." buttons and interact with your page.
  5. Click "Generate Lovable Prompt".
  6. Click "Send to AI" to get the analysis.

Known Limitations:

  • Console log collection primarily captures logs that occur after the "Collect Console Logs" button is clicked, unless the more permission-heavy debugger API is manually added and enabled.
  • AI analysis quality depends heavily on the quality of the logs/network data provided and the current capabilities of the Gemini model.
  • Requires a valid Google Gemini API key with the appropriate model enabled (currently targets gemini-1.5-pro-latest).

This is the very first version, so feedback and bug reports are highly welcome! Please open an issue on the GitHub repository Issues page if you encounter problems or have suggestions.

Happy Debugging!

Assets 3
Loading