Advanced DevTools 🛠️

A powerful, customizable JavaScript development tools library with real-time error capture, deep code analysis, and beautiful themes.

✨ Features

🔍 Intelligent Error Analysis

• Real-time error capture with automatic source code extraction
• Deep code inspection that identifies error patterns and root causes
• Smart suggestions with copy-to-clipboard fix recommendations
• Error categorization by type, severity, and potential impact
• Related error detection to identify recurring issues

🎨 Beautiful Themes & Layouts

• 5 Built-in themes: Default Dark, Matrix, Cyberpunk, Retro Terminal, Light Mode
• 4 Layout modes: Floating Windows, Sidebar Dock, Bottom Panel, Grid Layout
• Custom theme creation with live preview and color picker
• Theme import/export for sharing configurations
• Pixelated retro styling with smooth animations

🔗 External Service Integration

• Pre-built connectors for Sentry, Bugsnag, Rollbar, Slack, Discord
• Automatic error forwarding to monitoring services
• Webhook system for real-time notifications
• Service status dashboard with connection monitoring

🖥️ Advanced UI Features

• Draggable windows constrained to browser boundaries
• Interactive error tables with sorting and filtering
• Expandable code snippets with syntax highlighting
• Tabbed settings interface for easy configuration
• Responsive design that works on all screen sizes

🚀 Quick Start

Installation

npm install advanced-devtools

Basic Usage

import DevTools from 'advanced-devtools';

// Initialize with default settings
const devtools = new DevTools();
devtools.init();

// Or with custom configuration
const devtools = new DevTools({
  theme: 'matrix',
  layout: 'sidebar',
  autoCapture: true,
  pixelatedText: true
});
devtools.init();

CDN Usage

<script src="https://unpkg.com/advanced-devtools/dist/devtools.js"></script>
<script>
  const devtools = new DevTools();
  devtools.init();
</script>

📖 API Reference

Core Methods

// Initialize the dev tools
devtools.init();

// Destroy and cleanup
devtools.destroy();

Global API (DevToolsAPI)

// Window Management
DevToolsAPI.createWindow(config);
DevToolsAPI.closeWindow(id);
DevToolsAPI.showErrorTable();
DevToolsAPI.showSettings();

// Theme & Layout Control
DevToolsAPI.setTheme('cyberpunk');
DevToolsAPI.setLayout('grid');
DevToolsAPI.getThemes();
DevToolsAPI.getLayouts();

// Service Integration
DevToolsAPI.connectService('sentry', { apiKey: 'your-key' });
DevToolsAPI.sendToService('slack', errorData);

// Plugin System
DevToolsAPI.registerPlugin('myPlugin', pluginObject);
DevToolsAPI.addHook('error:captured', callback);
DevToolsAPI.triggerHook('custom:event', data);

// Utilities
DevToolsAPI.log('Custom message', data);
DevToolsAPI.captureSnapshot();

🎨 Themes

Built-in Themes

| Theme | Description | Preview | |-------|-------------|---------| | default | Classic dark theme with green accents | | | matrix | Matrix-inspired green-on-black | | | cyberpunk | Neon pink and cyan colors | | | retro | Vintage terminal styling | | | light | Clean light mode theme | |

Custom Themes

// Create a custom theme
const customTheme = {
  name: 'My Theme',
  colors: {
    primary: '#ff6b6b',
    background: 'rgba(20, 20, 20, 0.95)',
    text: '#ffffff',
    error: '#ff4757',
    warning: '#ffa502',
    success: '#2ed573'
  },
  fonts: {
    primary: "'Fira Code', monospace",
    size: '14px',
    pixelated: false
  }
};

DevToolsAPI.registerTheme('custom', customTheme);
DevToolsAPI.setTheme('custom');

🔗 Service Integrations

Sentry Integration

DevToolsAPI.connectService('sentry', {
  apiKey: 'your-sentry-auth-token',
  projectId: 'your-project-id',
  endpoint: 'https://sentry.io/api/0'
});

Slack Notifications

DevToolsAPI.connectService('slack', {
  webhookUrl: 'https://hooks.slack.com/services/YOUR/WEBHOOK/URL',
  channel: '#dev-errors'
});

Custom Service

DevToolsAPI.registerService('custom', {
  endpoint: 'https://your-api.com',
  headers: { 'Authorization': 'Bearer token' },
  formatter: (errorData) => ({
    message: errorData.message,
    timestamp: errorData.timestamp,
    severity: errorData.analysis?.severity?.level
  })
});

🔌 Plugin Development

const myPlugin = {
  name: 'Performance Monitor',
  
  init(devtools) {
    // Plugin initialization
    this.devtools = devtools;
    this.startMonitoring();
  },
  
  startMonitoring() {
    // Add performance monitoring logic
    setInterval(() => {
      const memory = performance.memory;
      DevToolsAPI.log('Memory Usage', {
        used: memory.usedJSHeapSize,
        total: memory.totalJSHeapSize
      });
    }, 5000);
  },
  
  destroy() {
    // Cleanup when plugin is removed
  }
};

DevToolsAPI.registerPlugin('performance', myPlugin);

⚙️ Configuration Options

const devtools = new DevTools({
  // Theme settings
  theme: 'default',           // Initial theme
  layout: 'floating',         // Window layout mode
  pixelatedText: true,        // Retro pixel rendering
  
  // Behavior settings
  autoCapture: true,          // Auto-capture errors
  realTimeUpdates: true,      // Live error updates
  maxErrors: 100,             // Error history limit
  
  // UI settings
  windowOpacity: 0.9,         // Window transparency
  autoStart: false,           // Auto-initialize
  
  // Service settings
  services: {
    sentry: { enabled: false },
    slack: { enabled: false }
  }
});

🛠️ Development

Building from Source

# Clone the repository
git clone https://github.com/yourusername/advanced-devtools.git
cd advanced-devtools

# Install dependencies
npm install

# Build for development
npm run build:dev

# Build for production
npm run build

# Start development server
npm run server

Testing

# Start the test server
npm run server

# Open http://localhost:9351 in your browser
# Use the test buttons to trigger various error scenarios

📝 Examples

Error Handling Example

// The devtools will automatically capture this error
function triggerError() {
  const userData = null;
  console.log(userData.name); // TypeError: Cannot read property 'name' of null
}

// Custom error with additional context
try {
  riskyOperation();
} catch (error) {
  DevToolsAPI.log('Operation failed', {
    operation: 'riskyOperation',
    context: { userId: 123, timestamp: Date.now() },
    error: error.message
  });
  throw error; // Re-throw to trigger analysis
}

Theme Switching Example

// Cycle through themes
const themes = ['default', 'matrix', 'cyberpunk', 'retro', 'light'];
let currentIndex = 0;

document.getElementById('theme-btn').addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % themes.length;
  DevToolsAPI.setTheme(themes[currentIndex]);
});

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by browser developer tools and modern error tracking services
• Built with vanilla JavaScript for maximum compatibility
• Webpack for bundling and optimization

📊 Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

🔮 Roadmap

• [ ] Performance monitoring dashboard
• [ ] Network request interceptor
• [ ] Memory leak detection
• [ ] TypeScript definitions
• [ ] React/Vue component inspector
• [ ] GraphQL query analyzer
• [ ] WebSocket message monitor
• [ ] Local storage browser

Made with ❤️ for developers who love beautiful, functional tools.