> ## Documentation Index > Fetch the complete documentation index at: https://docs.helloleo.dev/llms.txt > Use this file to discover all available pages before exploring further. # Debugging Tips > Techniques for debugging your HelloLeo projects Learn effective debugging techniques to identify and fix issues in your HelloLeo projects. ## Using the Network Monitor The Network Monitor is one of your most powerful debugging tools. It shows all API calls made by your application. ### Accessing the Network Monitor 1. Open your project in HelloLeo 2. Click on the **Network Monitor** icon in the sidebar 3. View all API requests and responses in real-time ### What to Look For * **Failed requests** - Red indicators show failed API calls * **Response codes** - Check for 4xx (client errors) or 5xx (server errors) * **Request payloads** - Verify the data being sent * **Response data** - Check what the API is returning * **Timing** - Identify slow API calls ### Common Issues Found * **401 Unauthorized** - Invalid or expired API keys * **403 Forbidden** - Insufficient permissions * **404 Not Found** - Wrong endpoint or resource doesn't exist * **500 Server Error** - Integration API issues ## Preview Showing Old Version (Cache) If your preview still shows an old version after Leo makes changes, it's a browser cache issue. ### Quick Fix Open the preview URL directly in a new tab and do a hard reload: 1. Click the **external link** icon next to the preview URL to open it in a new tab 2. Press **Ctrl+Shift+R** (Windows/Linux) or **Cmd+Shift+R** (Mac) to hard reload ### Why This Happens Your browser caches the project's JavaScript files. A hard reload of the HelloLeo app itself doesn't always clear the cache for the preview iframe — opening the preview URL directly and hard reloading it does. ### Still Not Working? Try opening the preview in a **private/incognito window** — this always starts with a clean cache. ## Browser Developer Tools Use browser developer tools to debug frontend issues. ### Console Tab Check for JavaScript errors: 1. Open browser DevTools (F12 or right-click → Inspect) 2. Go to the **Console** tab 3. Look for red error messages 4. Click on errors to see stack traces ### Network Tab Monitor network requests: 1. Open the **Network** tab in DevTools 2. Reload your page 3. Filter by type (XHR, Fetch, etc.) 4. Click on requests to see details 5. Check request/response headers and bodies ### Elements Tab Inspect DOM structure: 1. Use the **Elements** tab to inspect HTML 2. Check if components are rendering correctly 3. Verify CSS classes and styles 4. Test changes in real-time ## Debugging Integration Issues ### Test Integration Connection Always test your integration connection first: 1. Go to **Project Settings** → **Project Integrations** 2. Click **Test Connection** for your integration 3. Review any error messages 4. Verify credentials are correct ### Check Integration Logs Many integrations provide logs: 1. Check your integration's dashboard for logs 2. Look for API call logs 3. Review error messages 4. Check rate limit status ### Verify API Endpoints Ensure you're using correct endpoints: 1. Review integration documentation 2. Check endpoint URLs in Network Monitor 3. Verify request methods (GET, POST, etc.) 4. Confirm required headers are included ## Debugging Code Issues ### Share Errors with Leo Use the "Share with Leo" feature: 1. Copy the error message 2. Click **Share with Leo** button 3. Leo will analyze the error 4. Follow Leo's suggestions ### Check Code Syntax Look for common syntax errors: * Missing brackets or parentheses * Unclosed strings * Incorrect imports * Type mismatches ### Review Recent Changes If something broke: 1. Check what you changed recently 2. Review git history if available 3. Test reverting changes 4. Identify the specific change that caused the issue ## Debugging Performance Issues ### Identify Slow Operations 1. Use Network Monitor to find slow API calls 2. Check browser DevTools Performance tab 3. Look for long-running JavaScript 4. Identify bottlenecks ### Optimize API Calls * **Reduce requests** - Combine multiple requests when possible * **Use pagination** - Don't fetch all data at once * **Cache data** - Store frequently accessed data * **Debounce searches** - Limit search API calls ### Check Build Times Monitor build performance: 1. Check build logs for timing information 2. Identify slow build steps 3. Review dependencies 4. Consider optimizing build configuration ## Common Debugging Patterns ### Integration Not Working 1. ✅ Test connection 2. ✅ Check Network Monitor for API calls 3. ✅ Verify credentials 4. ✅ Review integration documentation 5. ✅ Check API rate limits ### Data Not Displaying 1. ✅ Check Network Monitor for API responses 2. ✅ Verify data exists in integration 3. ✅ Review filters/search criteria 4. ✅ Check field names match 5. ✅ Verify permissions ### Code Not Working 1. ✅ Check browser console for errors 2. ✅ Review code syntax 3. ✅ Verify imports and dependencies 4. ✅ Test in isolation 5. ✅ Share error with Leo ## Best Practices ### Keep Error Messages Visible * Don't hide error messages * Display user-friendly error messages * Log errors for debugging * Provide actionable error messages ### Use Logging Add console logs for debugging: ```javascript theme={null} console.log('Debug info:', data); console.error('Error:', error); ``` ### Test Incrementally * Test after each change * Don't make multiple changes at once * Verify each feature works * Build up complexity gradually ### Document Issues When reporting issues: * Include error messages * Provide steps to reproduce * Share relevant code snippets * Include Network Monitor screenshots ## Getting More Help If debugging doesn't solve your issue: 1. **Share with Leo** - Get AI-powered debugging help 2. **Network Monitor** - Capture and share API call details 3. **Error Messages** - Copy full error messages 4. **Support Channels** - Reach out to our community Solutions to frequent problems Find support resources