open-web-inspector
Advanced tools
The open source web element inspector - AI-controllable DOM inspection with live CSS editing, hover highlighting, and developer tools integration
The open source AI-controllable web element inspector!
A revolutionary, lightweight, embeddable JavaScript library that enables DOM element inspection with hover highlighting, detailed CSS/HTML analysis, and external API control. Perfect for AI landing pages, chatbots, developer tools, and any website that needs intelligent element inspection capabilities.
🚀 Automatically updated via GitHub Actions CI/CD pipeline!
<!-- ✅ Production (minified, ~79KB) -->
<script src="https://unpkg.com/open-web-inspector@latest/dist/open-web-inspector.min.js"></script>
<!-- 🔧 Development (unminified, ~134KB) -->
<script src="https://unpkg.com/open-web-inspector@latest/dist/open-web-inspector.js"></script>
<!-- 🌍 Alternative CDN (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/open-web-inspector@latest/dist/open-web-inspector.min.js"></script>
<!-- 📌 Specific version (recommended for production) -->
<script src="https://unpkg.com/open-web-inspector@1.0.1/dist/open-web-inspector.min.js"></script>
🎯 Quick Enable:
<script>
// Auto-enable on page load
window.addEventListener("DOMContentLoaded", () => {
OpenWebInspector.enable();
});
</script>
🤖 AI-Controllable:
<script>
// Perfect for AI landing pages!
OpenWebInspector.enable();
// AI can call this to select specific elements
OpenWebInspector.selectElement(".my-component");
</script>
<script src="open-web-inspector.js"></script>
<script>
// Access the OpenWebInspector instance
const selector = window.OpenWebInspector;
// You can also manually toggle analyze mode
// selector.toggleAnalyzeMode();
</script>
The world's first AI-controllable web element inspector! Perfect for AI landing pages, chatbots, and automated workflows.
// Enable analyze mode (AI: "Let me inspect that for you")
OpenWebInspector.enable();
// Disable analyze mode (AI: "Analysis complete")
OpenWebInspector.disable();
// Toggle analyze mode
OpenWebInspector.toggle();
// Check if currently active
OpenWebInspector.isActive(); // returns true/false
// Auto-select specific element (AI: "Let me check that button's CSS")
OpenWebInspector.selectElement(".my-button");
// Get version info
OpenWebInspector.getVersion(); // returns "2.0.0"
// Your AI assistant can write and execute this:
OpenWebInspector.enable();
// User clicks element they want to inspect
// AI can then read the CSS data and provide suggestions
setTimeout(() => OpenWebInspector.disable(), 10000);
OpenWebInspector.enable(); // Perfect for AI assistants
Ctrl+Shift+E - Toggle analyze modeEscape - Disable analyze mode// For complex integrations
document.dispatchEvent(new CustomEvent("open-web-inspector-enable"));
document.dispatchEvent(new CustomEvent("open-web-inspector-disable"));
document.dispatchEvent(
new CustomEvent("open-web-inspector-select", {
detail: { selector: ".my-element" },
}),
);
https://yoursite.com?open-web-inspector=true // Auto-enable
https://yoursite.com?inspect=.my-button // Auto-select element
Your AI can now:
Ctrl+Shift+E - Toggle analyze mode on/offEscape - Disable analyze mode and close inspectoropen-web-inspector/
├── open-web-inspector.js # Main library file
├── index.html # Demo page
└── README.md # This file
The library automatically initializes and provides a comprehensive external API:
// 🤖 AI-Friendly Global API
OpenWebInspector.enable(); // Enable analyze mode
OpenWebInspector.disable(); // Disable analyze mode
OpenWebInspector.toggle(); // Toggle analyze mode
OpenWebInspector.isActive(); // Check if active (returns boolean)
OpenWebInspector.selectElement(".btn"); // Auto-select element
OpenWebInspector.getVersion(); // Get version info
// 📡 DOM Events (Advanced Integrations)
document.dispatchEvent(new CustomEvent("open-web-inspector-enable"));
document.dispatchEvent(new CustomEvent("open-web-inspector-disable"));
document.dispatchEvent(
new CustomEvent("open-web-inspector-select", {
detail: { selector: ".my-element" },
}),
);
// 🔗 URL Parameters (Auto-Enable)
// ?open-web-inspector=true - Auto-enable on page load
// ?inspect=.my-button - Auto-select specific element
// ⌨️ Keyboard Events (Built-in)
// Ctrl+Shift+E - Toggle analyze mode
// Escape - Disable analyze mode
The library provides helpful console messages:
🚀 OpenWebInspector Global API Ready!
📘 Available methods:
• OpenWebInspector.enable()
• OpenWebInspector.disable()
• OpenWebInspector.toggle()
• OpenWebInspector.isActive()
• OpenWebInspector.selectElement(selector)
• OpenWebInspector.getVersion()
⌨️ Keyboard shortcuts active:
• Ctrl+Shift+E = Toggle analyze mode
• Escape = Disable analyze mode
📡 DOM events listening:
• open-web-inspector-enable
• open-web-inspector-disable
• open-web-inspector-toggle
• open-web-inspector-select (with detail.selector)
🔗 URL parameters supported:
• ?open-web-inspector=true (auto-enable)
• ?inspect=.selector (auto-select element)
The library uses CSS classes with the open-web-inspector- prefix to avoid
conflicts:
.open-web-inspector-highlight - Applied to hovered elements.open-web-inspector-popup - Main popup container.open-web-inspector-overlay - Background overlay.open-web-inspector-analyze-cursor - Applied to body when in analyze modeYou can override the default styles by adding your own CSS after including the library:
.open-web-inspector-highlight {
outline-color: blue !important; /* Change highlight color */
}
.open-web-inspector-popup {
max-width: 600px !important; /* Adjust popup size */
}
This project features fully automated deployment via GitHub Actions!
Every release automatically:
Option 1: GitHub Release (Recommended)
# Create a new release on GitHub
# Actions automatically build & publish to npm + CDN
Option 2: Manual Trigger
# Use GitHub Actions workflow dispatch
# Go to Actions → Release & Publish → Run workflow
Option 3: Local Development
npm run version:patch # 1.0.0 → 1.0.1
npm run version:minor # 1.0.1 → 1.1.0
npm run version:major # 1.1.0 → 2.0.0
git push origin main --tags
Trigger → Build → Test → Optimize → Publish → CDN Update
↓ ↓ ↓ ↓ ↓ ↓
GitHub Terser Smoke 79KB NPM Auto-Live
Action Build Test Bundle Publish on CDN!
After each release, your package is instantly available on:
| CDN | URL Template | Update Time |
|---|---|---|
| unpkg | https://unpkg.com/open-web-inspector@{version}/ | ~1 minute |
| jsDelivr | https://cdn.jsdelivr.net/npm/open-web-inspector@{version}/ | ~2 minutes |
# Clone and setup
git clone <your-repo>
cd open-web-inspector
npm install
# Start development
npm run dev # Start server on :8002
npm run build # Build both dev + production
npm run size # Check bundle sizes
# Test examples
open http://localhost:8002/examples/
MIT License - feel free to use in any project!
Open index.html in your browser to see the library in action with a full demo
page showcasing various elements and styling scenarios.
FAQs
The open source web element inspector - AI-controllable DOM inspection with live CSS editing, hover highlighting, and developer tools integration
The npm package open-web-inspector receives a total of 1 weekly downloads. As such, open-web-inspector popularity was classified as not popular.
We found that open-web-inspector demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.