Download the PHP package bitbabit/magento2-dev-tools without Composer

BitBabit Developer Tools for Magento 2

Overview

BitBabit Developer Tools is a comprehensive development and debugging suite for Magento 2 that provides real-time performance monitoring, database query profiling, and advanced debugging capabilities. It features a modern, interactive web-based toolbar similar to Symfony's DebugBar or Laravel Debugbar.

Key Features

🔍 Database Query Profiling

• Real-time SQL query monitoring with execution times
• Slow query detection and highlighting
• Query parameter binding visualization
• Query type analysis (SELECT, INSERT, UPDATE, DELETE)
• Comprehensive query statistics

⚡ Performance Monitoring

• Application execution time tracking
• Memory usage monitoring (current, peak, real usage)
• Bootstrap time measurement
• Server load monitoring
• OPcache status and statistics

🛡️ Security & Authentication

• API key-based authentication system
• Secure header validation (X-Debug-Api-Key)
• Developer mode restrictions
• Cookie-based session management

🌐 Request Analysis

• HTTP request/response monitoring
• Header inspection
• Parameter analysis (GET, POST, FILES)
• Session data examination
• AJAX request interception

🖥️ Environment Information

• PHP version and configuration
• Server software details
• Operating system information
• PHP extensions listing
• Timezone and locale settings

🐛 Advanced Debugging

• Multi-level debug logging (info, warning, error, debug)
• Contextual debug messages
• Interactive JSON tree visualization
• Real-time message collection

📱 Interactive Web Interface

• Modern, responsive toolbar widget
• Real-time data updates
• Collapsible panels
• Multi-request tracking
• Mobile-friendly design

Installation

Via Composer (Recommended)

If the package is not yet published to Packagist, you can install with explicit version:

Manual Installation

1. Download the module files
2. Extract to app/code/BitBabit/DeveloperTools/
3. Run the following commands:

Quick Setup

After installation, follow these steps to get started:

Monolithic Frontend Widget Activation

To enable the profiler widget and save the API key to cookies for persistent profiling:

This will:

• Enable the profiler widget on your frontend
• Save the API key to cookies for automatic profiling on subsequent requests
• Allow you to see the profiler widget on all pages

Note: Boot time and memory management features are currently under development, so data may not be 100% accurate.

Configuration

Admin Configuration

Navigate to Stores → Configuration → BitBabit → Developer Tools

Basic Settings

• Enable Developer Tools: Master toggle for the entire module
• Profiler Header Key: HTTP header to trigger profiling (default: X-Debug-Mode)
• Enable HTML Output: Show profiler data for web requests
• Enable JSON Injection: Inject profiler data into API responses
• Developer Mode Only: Restrict profiling to developer mode
• Slow Query Threshold: Highlight queries exceeding this time (ms)
• Toolbar Widget: Enable/disable the floating toolbar
• Memory Limit: Auto-disable threshold to prevent memory issues

API Security Settings

• Enable API Key Validation: Require API key for access
• API Key: Plain-text storage in core_config_data (path bitbabit/dev_tools/api_key)

Console Commands

Enable/Disable Profiler

API Key Management

Usage

Basic Usage

1. Enable the module in admin configuration
2. Generate an API key using the console command
3. Configure your browser to send the debug header:
   • Header: X-Debug-Api-Key
   • Value: Your generated API key
4. Visit any frontend page to see the toolbar

Browser Extension Integration

The module is designed to work with browser extensions that can inject custom headers:

Programmatic Debug Logging

API Integration

For AJAX requests, profiler data is automatically injected into JSON responses:

Architecture

Core Components

Interfaces

• ProfilerConfigInterface: Main configuration contract defining all settings and validation methods

Models

• ProfilerConfig: Configuration implementation with scope integration
• DebugInfo: Singleton for collecting debug messages

Services

• ComprehensiveProfilerService: Main profiling engine collecting all data
• ApiKeyCookieManagerService: Secure API key management with cookie support

Console Commands

• EnableCommand: Enable profiler via CLI
• DisableCommand: Disable profiler via CLI
• StatusCommand: Show current profiler status
• GenerateApiKeyCommand: API key generation and management

Observers & Plugins

• ResponseObserver: Injects profiler data into responses
• HttpLaunchPlugin: Initializes profiling for each request

Frontend Components

• profiler-widget.js: Interactive JavaScript toolbar
• profiler-widget.css: Responsive styling

Data Flow

1. Request Initialization: HttpLaunchPlugin checks if profiling should be enabled
2. Data Collection: ComprehensiveProfilerService gathers metrics throughout request
3. Response Injection: ResponseObserver adds profiler data to output
4. Frontend Display: JavaScript widget renders interactive toolbar

Security Features

• API Key Authentication: Secure access control
• Timing-Safe Comparison: Prevents timing attacks
• Developer Mode Restriction: Production safety
• Cookie Security: Secure, HTTP-only cookie handling

Data Structure

Profiler Data Schema

Frontend Interface

Toolbar Panels

1. Database Queries: SQL query analysis with parameters and timing
2. Performance: Execution times, server load, OPcache status
3. Memory: Current, peak, and real memory usage statistics
4. Request: HTTP request details, headers, parameters, session
5. Environment: PHP info, server details, extensions
6. OPcache: Cache statistics and memory usage
7. Debug: Custom debug messages with context data

Interactive Features

• Collapsible panels for organized data viewing
• Multi-request tracking for AJAX monitoring
• Real-time updates without page refresh
• JSON tree visualization for complex data
• Responsive design for mobile debugging
• Request selector to switch between tracked requests

Browser Extension Support

Chrome Extension Integration

Performance Considerations

Memory Management

• Automatic profiler disable when memory limit exceeded
• Configurable memory thresholds
• Efficient data structure usage
• Storage cleanup on page refresh

Storage Options

• IndexedDB: Primary storage (highest capacity)
• localStorage: Fallback option
• Cookies: Minimal fallback for basic functionality

Query Optimization

• Minimal performance overhead
• Optional profiling activation
• Selective data collection
• Efficient query parameter handling

Security Considerations

API Key Security

• Cryptographically secure key generation
• Timing-safe string comparison
• Secure cookie attributes
• URL parameter cleanup

Access Control

• Developer mode restrictions
• API key authentication
• Request header validation

Data Privacy

• Limited sensitive data collection (session data capped at 10 items)
• Configurable data exposure levels
• Secure transmission headers
• Memory usage limits to prevent resource exhaustion

Troubleshooting

Common Issues

Toolbar Not Appearing

1. Check if module is enabled: bin/magento module:status BitBabit_DeveloperTools
2. Verify API key configuration
3. Ensure correct headers are sent
4. Check browser console for JavaScript errors

Performance Issues

1. Increase memory limits
2. Disable in production environments
3. Reduce slow query threshold
4. Monitor server resources

API Key Problems

1. Regenerate API key: bin/magento bitbabit:devtools:generate-api-key --regenerate
2. Clear browser storage
3. Verify header transmission
4. Check admin configuration

Debug Mode

Enable debug logging in the JavaScript widget:

Log Files

Check Magento logs for profiler-related issues:

• var/log/developer_tools.log
• var/log/system.log
• var/log/exception.log

Development

Extending the Module

Adding Custom Collectors

Frontend Customization

Testing

Run the included PHPUnit tests:

Test coverage includes:

• Configuration management
• Console commands
• API key generation
• Debug info collection

License

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

Contributing

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

Support

• Documentation: This README and inline code comments
• Issues: GitHub Issues tracker
• Email: [email protected]

Changelog

v1.2.0

• Initial public release
• Complete profiling suite
• API key authentication
• Interactive web interface
• Console command integration
• Comprehensive test coverage

⚠️ Important: This module is designed for development environments. While it includes security features, it should be thoroughly tested before any production use.