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

​
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: 
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

Common Issues

Solutions to frequent problems

Getting Help

Find support resources