Testing & Debugging

Before using the HTML to Image API in production, it’s important to test your HTML, CSS, and selectors to ensure they work as expected. This guide provides tools and techniques to help you test and debug your API requests.

Testing HTML & CSS

Chrome DevTools

The Chrome DevTools are essential for testing HTML and CSS:

1. Elements Panel

   • Press F12 or right-click and select “Inspect”
   • Test CSS changes in real-time
   • Copy the computed styles of elements
   • Verify HTML structure

2. Device Toolbar

   • Toggle device toolbar (Ctrl+Shift+M)
   • Test different viewport sizes
   • Match your API’s width and height parameters

Useful Chrome Extensions

1. VisBug

   • Visual debugging tools
   • Measure distances and alignment
   • Edit text and styles in place
   • Export CSS modifications

2. CSS Peeper

   • Extract CSS styles
   • Copy exact colors and measurements
   • Export complete style sheets

3. PerfectPixel

   • Overlay images for comparison
   • Verify screenshot accuracy
   • Test layout precision

Testing CSS Selectors

Chrome DevTools Console

Test selectors directly in the console:

// Test a selector
document.querySelector('.my-selector')

// Count matching elements
document.querySelectorAll('.my-selector').length

// Highlight matching elements
$$('.my-selector').forEach(el => el.style.outline = '2px solid red')

Useful Chrome Extensions

1. SelectorGadget

   • Point-and-click CSS selector generation
   • Verify selector uniqueness
   • Generate precise selectors

2. CSS Selector Tester

   • Test selectors in real-time
   • Highlight matching elements
   • Validate selector syntax

Testing Cookie Notice Removal

To test CSS for removing cookie notices and popups:

1. Clear Browser Data

   1. Open Chrome Settings
   2. Privacy and Security > Clear browsing data
   3. Clear cookies and site data

2. Test in Incognito Mode

   • Press Ctrl+Shift+N for a fresh session
   • Cookie notices will appear consistently
   • Test your CSS without cached preferences

3. Use the Network Tab

   • Monitor which scripts load cookie notices
   • Block specific domains if needed
   • Verify timing of popup appearance

Common Issues and Solutions

Hidden Elements

Some elements might be hidden using different techniques:

/* Test all these variations in your CSS */
.element {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: fixed !important;
    z-index: -1 !important;
}

Dynamic Content

For elements that load dynamically:

1. Use the Network tab to see when content loads
2. Test selectors after page load events
3. Consider using webhook callbacks for better timing

Responsive Design

Test your screenshots at different viewport sizes:

1. Use Chrome’s device toolbar
2. Test common breakpoints
3. Verify fixed elements behave correctly