Custom DevTools - Production-Ready Browser Debugging

A comprehensive, production-ready debugging tool optimized for digital signage, kiosk applications, and web applications.

---

Features at a Glance

10 Comprehensive Tabs

1. Console - Real-time log capture & JavaScript execution
2. Elements - DOM tree inspector with live highlighting
3. Network - Request/response monitoring
4. Sources - File tree viewer for all assets
5. Storage - localStorage, sessionStorage, cookies, IndexedDB
6. Application - Service workers & cache management
7. Monitor - FPS, memory, performance metrics
8. System Info 🆕 - Complete device diagnostics
9. Quick Actions 🆕 - Emergency controls & auto-refresh
10. Script Runner - Custom JavaScript executor

Signage-Specific Features

• ⏱️ Uptime Tracking: Monitor display runtime
• 🔄 Auto-Refresh: Prevent memory leaks (scheduled + threshold-based)
• 📱 Remote Access: QR code for mobile debugging
• 🚨 Emergency Controls: Clear everything, stop media, force GC
• 📊 System Diagnostics: GPU, memory, network, orientation
• 📥 Export Debug Report: Comprehensive JSON report
• 🔍 Resource Checker: Find missing/failed assets
• 🖥️ Display Info: Resolution, orientation, fullscreen status

---

Design Philosophy

Neo-Brutalism Aesthetic

• White background with black borders (2-4px)
• Neon green (#00FF66) accents for active states
• Hard shadows (no blur): box-shadow: 4px 4px 0 #000
• Bold typography: Space Grotesk for UI, Courier New for code
• Micro-interactions: Buttons shift on hover, green pulse for active

---

Quick Start

React Integration

import DevTools from './components/DevTools';

function App() {
  return (
    <div>
      <YourApp />
      {/* Add DevTools */}
      <DevTools />
    </div>
  );
}

Toggle Button

• Fixed at bottom-right corner
• Click to slide DevTools up/down
• Green pulsing indicator when active
• Resizable panel (drag top edge)

---

🛠️ Tab Details

1. Console Tab

• Capture: console.log, warn, error, info
• Execute JavaScript commands
• Command history (↑/↓ keys)
• Filter by log type
• Export to JSON/CSV

2. Elements Tab

• Interactive DOM tree
• Expand/collapse nodes
• Hover to highlight elements on page
• View computed styles
• Element attributes
• Scroll to element

3. Network Tab

• Intercept fetch and XMLHttpRequest
• Request/response headers & body
• Duration & size tracking
• Status color coding
• Export to JSON/CSV

4. Sources Tab

• List scripts, stylesheets, images
• View source code
• Filter by type
• Inline vs external detection

5. Storage Tab

• localStorage: View, edit, delete
• sessionStorage: Full management
• Cookies: View & delete
• IndexedDB: List databases
• Export to JSON/CSV

6. Application Tab

• Service workers (state, scope, script URL)
• Cache storage (list, clear)
• App manifest viewer
• Unregister workers

7. Monitor Tab

• FPS: Real-time with 30s chart
• Memory: JS heap usage with chart
• Performance: Load time, DOM ready
• Resources: All loaded assets
• System Info: CPU, memory, connection

8. System Info Tab 🆕

• Status Cards: Connection, uptime, memory, resolution
• Device Info: Platform, CPU, memory, language
• Display: Resolution, orientation, pixel ratio, touch
• Graphics: GPU vendor/renderer, hardware acceleration
• Network: Connection type, speed, RTT, ping
• Storage: Used/quota/percentage
• Quick Actions: Fullscreen, orientation, copy info, reload

9. Quick Actions Panel 🆕

• ⚠️ Clear Everything: Storage + caches + reload
• ⏸ Stop All Media: Pause/reset all video/audio
• 🗑️ Force GC: Trigger garbage collection
• 🔄 Reset Videos: Reload video elements
• 📥 Export Report: Download debug report
• 📱 QR Code: Remote access
• 🔍 Check Resources: Find missing assets
• 📸 Screenshot: Capture view
• Auto-Refresh: Schedule + memory threshold

10. Script Runner Tab

• Code editor with monospace font
• Execute custom JavaScript
• Save/load scripts
• Example scripts library
• Export output to JSON/CSV

---

📊 Use Cases

Digital Signage

✓ 24/7 monitoring
✓ Auto-refresh every X hours
✓ Remote debugging via QR code
✓ Emergency controls for stuck displays
✓ Uptime tracking
✓ Memory leak detection

Kiosk Applications

✓ Public-facing terminal debugging
✓ Resource usage monitoring
✓ Quick actions for recovery
✓ Export debug reports
✓ Fullscreen management

Web Development

✓ Full console functionality
✓ Network inspection
✓ DOM manipulation
✓ Performance profiling
✓ Storage management

---

⚡ Performance

State	Memory	CPU
Closed	2-5 MB	<0.1%
Open	10-20 MB	1-2%
FPS Tracking	+2 MB	+0.5%

Network Overhead: <1ms per request

---

🔒 Security

Production Guidelines

// ✅ Only enable for admins
if (user.role === 'admin' || isDevelopment) {
  <DevTools />
}

// ❌ Never expose publicly
// ❌ Don't log sensitive data
// ❌ Don't execute untrusted scripts

---

🌐 Browser Support

Browser	Version	Features
Chrome	90+	✅ Full (incl. memory API)
Edge	90+	✅ Full
Firefox	88+	✅ (no memory API)
Safari	14+	⚠️ Limited IndexedDB

---

📝 Documentation

• OPEN_SPEC.md - Complete technical specification
• DEVTOOLS_INTEGRATION.md - Integration guide

---

🗺️ Roadmap

v1.1 (Q1 2025)

• Standalone script tag bundle
• NPM package
• Remote console (WebSocket)
• Dark mode

v2.0 (Q3 2025)

• AI debugging assistant
• Performance profiler
• Network throttling
• Device emulation

---

📄 License

MIT License

---

🌟 Key Highlights

✅ 10 tabs with comprehensive debugging tools
✅ Signage-optimized with auto-refresh & remote access
✅ Export everything to JSON/CSV
✅ Neo-brutalism design - clean, modern, visible
✅ Production-ready with security best practices
✅ No mock data - fully functional
✅ Open source - MIT License

---

Built for digital signage, kiosks, and production debugging

Version 1.0.0 | December 2024