Welcome to the CDN Integration Demo

This page shows how simple it is to add element inspection capabilities to any website using just a single script tag.

Integration is as simple as: 
<script src="../src/index.js"></script>
<button id="analyzeToggle">Enable Analyze Mode</button>

Features Demonstrated

  • Hover highlighting with red borders
  • Click-to-inspect any element
  • View HTML structure and hierarchy
  • Analyze CSS styles (applied and computed)
  • Element path display
  • Responsive popup interface

Try These Elements

Enable analyze mode and try clicking on:

  • This paragraph text
  • The navigation sidebar
  • Any of the buttons
  • The header navbar
  • Individual list items
  • The cards themselves

Nested Content Example

This content is nested within a dashed border container. Try inspecting it to see the element hierarchy!

Inline styled element