A modern, sleek debugging toolbar for Laravel with a fresh UI/UX design built with Vue 3 and TailwindCSS.
- 🎨 Modern UI/UX: Beautiful dark mode interface with glassmorphic design
- ⚡ Performance Metrics: Execution time, memory usage, and server load tracking
- 🗄️ Database Queries: View all SQL queries with bindings, timing, and syntax highlighting
- 🛣️ Route Information: Route name, controller, action, middleware, and parameters
- 👁️ View Debugging: Track rendered views and their data
- 📝 Application Logs: Color-coded log entries with context
- 💾 Request Data: Complete request information including headers, parameters, and session
- 📱 Responsive Design: Works on desktop and mobile devices
- 🎯 Collapsible Interface: Clean, non-intrusive toolbar that slides in/out smoothly
- 🔒 Environment Aware: Only loads in development/local environments
Install the package via Composer:
composer require almosabbirrakib/laravel-debugger --devThe package will automatically register its service provider using Laravel's package discovery.
php artisan vendor:publish --tag=debugger-configThis will create a config/debugger.php file where you can customize the debugger behavior.
php artisan vendor:publish --tag=debugger-assetsThis will publish the compiled CSS and JavaScript files to public/vendor/debugger.
Add to your .env file:
DEBUGGER_ENABLED=trueOr keep it enabled only when APP_DEBUG is true (default behavior).
The configuration file allows you to customize various aspects of the debugger:
return [
// Enable/disable the debugger
'enabled' => env('DEBUGGER_ENABLED', env('APP_DEBUG', false)),
// Allowed environments
'allowed_environments' => ['local', 'development', 'dev', 'testing'],
// Toggle individual collectors
'collectors' => [
'request' => true,
'route' => true,
'queries' => true,
'views' => true,
'logs' => true,
'performance' => true,
],
// Query settings
'queries' => [
'max_queries' => 100,
],
// Log settings
'logs' => [
'max_logs' => 50,
],
// UI customization
'ui' => [
'position' => 'bottom', // bottom or top
'theme' => 'dark',
],
// Exclude routes
'except' => [
'debugger/*',
'_debugbar/*',
],
];Once installed and configured, the debugger will automatically appear at the bottom of your pages when accessing your Laravel application in a local or development environment.
Click the blue toggle button to show/hide the debug bar.
Use the tab navigation to switch between different debugging panels:
- Performance: View execution time, memory usage, and server load
- Queries: Inspect all database queries with timing and bindings
- Request: Examine request data, headers, and session
- Route: View route information and middleware
- Views: See rendered views and their data
- Logs: Review application log entries
The debugger features a modern dark theme with:
- Glassmorphic backdrop blur effects
- Smooth slide animations
- Color-coded badges for quick information scanning
- Syntax-highlighted SQL queries
- Responsive tabbed interface
- Custom scrollbars
To exclude specific routes from debugging, add them to the except array in the config:
'except' => [
'api/*',
'webhooks/*',
'_debugbar/*',
],Adjust the maximum number of queries and logs captured:
'queries' => [
'max_queries' => 200, // Default: 100
],
'logs' => [
'max_logs' => 100, // Default: 50
],To work on the package:
- Clone the repository
- Install dependencies:
composer install npm install
- Build assets:
npm run build
- For development with hot reload:
npm run dev
- PHP 8.1 or higher
- Laravel 10.x or 11.x
- Node.js 18+ (for building assets)
Contributions are welcome! Please feel free to submit a Pull Request.
This package is open-sourced software licensed under the MIT license.
Inspired by barryvdh/laravel-debugbar but built from scratch with a modern UI/UX approach.
If you encounter any issues or have questions, please open an issue on GitHub.
Made with ❤️ by Almosabbir Rakib