Skip to main content

Advanced Debugging Techniques

Advanced debugging techniques for O2VEND development.

Debugging Tools​

1. Browser DevTools​

  • Console for JavaScript errors
  • Network tab for API requests
  • Elements tab for DOM inspection
  • Performance tab for profiling

2. Liquid Debugging​

<!-- Debug output -->
<pre>{{ variable | json }}</pre>

<!-- Debug with context -->
{% comment %}
  Debug: {{ variable }}
  Type: {{ variable | type }}
{% endcomment %}

3. API Debugging​

// Log API requests
console.log('API Request:', {
  url: endpoint,
  method: method,
  data: requestData
});

// Log API responses
console.log('API Response:', response);

Common Debugging Scenarios​

Template Not Rendering​

  1. Check for syntax errors
  2. Verify variables exist
  3. Check browser console
  4. Use debug output

Widget Not Showing​

  1. Check widget exists in section
  2. Verify widget template
  3. Check widget settings
  4. Inspect widget data

API Errors​

  1. Check request format
  2. Verify authentication
  3. Check response status
  4. Inspect error messages