Convert Figma logo to code with AI

itsgoingd logoclockwork

Clockwork - php dev tools in your browser - server-side component

5,621
323
5,621
77

Top Related Projects

Debugbar for Laravel (Integrates PHP Debug Bar)

A MongoDB based Eloquent model and Query builder for Laravel (Moloquent)

Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application

:dromedary_camel: Laravel log viewer

Laravel N+1 Query Detector

Quick Overview

Clockwork is a PHP debugging tool that provides insights into your application's runtime. It allows you to profile and debug your PHP applications by capturing various metrics, including database queries, cache operations, and more. Clockwork integrates with popular PHP frameworks and can be used with browser extensions for easy data visualization.

Pros

  • Easy integration with popular PHP frameworks like Laravel, Slim, and CodeIgniter
  • Comprehensive profiling data, including request details, database queries, and cache operations
  • Browser extensions available for Chrome and Firefox for convenient data visualization
  • Minimal performance impact when enabled in production environments

Cons

  • Requires additional setup for non-Laravel frameworks
  • Browser extension required for optimal usage experience
  • Limited built-in features for analyzing long-term performance trends
  • May require additional configuration for complex applications or custom setups

Code Examples

  1. Basic usage in Laravel:
use Clockwork\Support\Laravel\Facade as Clockwork;

Clockwork::info('User logged in');
Clockwork::startEvent('long-running-task', 'Processing data');
// ... perform task ...
Clockwork::endEvent('long-running-task');
  1. Adding custom data:
Clockwork::addDataSource(new MyCustomDataSource());
  1. Manually sending data to Clockwork:
$clockwork = Clockwork::init();
$clockwork->resolveRequest();
$clockwork->storeRequest();
  1. Using Clockwork in non-Laravel projects:
$clockwork = new Clockwork\Clockwork();
$clockwork->addDataSource(new Clockwork\DataSource\PhpDataSource());
$clockwork->resolveRequest();
$clockwork->storeRequest();

Getting Started

  1. Install Clockwork via Composer:

    composer require itsgoingd/clockwork
    
  2. For Laravel, add the service provider to config/app.php:

    'providers' => [
        // ...
        Clockwork\Support\Laravel\ClockworkServiceProvider::class,
    ],
    
  3. Publish the configuration file:

    php artisan vendor:publish --tag=clockwork
    
  4. Enable Clockwork in your .env file:

    CLOCKWORK_ENABLE=true
    
  5. Install the browser extension for Chrome or Firefox.

  6. Start your application and open the browser's developer tools to access Clockwork data.

Competitor Comparisons

Debugbar for Laravel (Integrates PHP Debug Bar)

Pros of Laravel Debugbar

  • More comprehensive out-of-the-box Laravel integration
  • Richer UI with more detailed information panels
  • Easier to extend with custom collectors

Cons of Laravel Debugbar

  • Can be more resource-intensive, especially on larger applications
  • UI can be overwhelming for simpler debugging tasks
  • Limited to Laravel framework

Code Comparison

Laravel Debugbar:

use Barryvdh\Debugbar\Facade as Debugbar;

Debugbar::info('Info message');
Debugbar::error('Error message');
Debugbar::warning('Warning message');

Clockwork:

use Clockwork\Support\Vanilla\Clockwork;

clock()->info('Info message');
clock()->error('Error message');
clock()->warning('Warning message');

Both tools offer similar functionality for logging messages, but Laravel Debugbar is more tightly integrated with Laravel's ecosystem. Clockwork provides a more framework-agnostic approach, making it easier to use across different PHP projects.

Laravel Debugbar excels in providing detailed information about Laravel-specific components, such as Eloquent queries and route information. Clockwork, on the other hand, offers a cleaner interface and is generally lighter on resources.

For Laravel-specific projects, Laravel Debugbar might be the preferred choice due to its deep integration. For projects that may span multiple frameworks or require a more portable debugging solution, Clockwork could be the better option.

A MongoDB based Eloquent model and Query builder for Laravel (Moloquent)

Pros of laravel-mongodb

  • Provides MongoDB integration for Laravel, allowing use of MongoDB as a database backend
  • Supports Eloquent ORM, making it easier to work with MongoDB in Laravel applications
  • Offers features like query building, pagination, and relationships specific to MongoDB

Cons of laravel-mongodb

  • Limited to MongoDB-specific functionality, unlike Clockwork's broader debugging capabilities
  • May require more setup and configuration compared to Clockwork's simple integration
  • Focuses on database interactions rather than overall application performance monitoring

Code Comparison

Clockwork usage:

use Clockwork\Support\Clockwork;

Clockwork::info('User logged in');
Clockwork::startEvent('long-operation', 'Long running operation');
// ... operation code ...
Clockwork::endEvent('long-operation');

laravel-mongodb usage:

use App\Models\User;

$user = User::create([
    'name' => 'John Doe',
    'email' => 'john@example.com'
]);

$users = User::where('age', '>', 30)->get();

Summary

While Clockwork focuses on debugging and profiling Laravel applications, laravel-mongodb is specifically designed for integrating MongoDB with Laravel. Clockwork offers broader application insights, while laravel-mongodb provides MongoDB-specific features and Eloquent ORM support for MongoDB databases.

Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application

Pros of Laravel CORS

  • Specifically designed for handling Cross-Origin Resource Sharing (CORS) in Laravel applications
  • Simple configuration through Laravel's config system
  • Supports dynamic CORS configuration based on the request

Cons of Laravel CORS

  • Limited to CORS functionality, lacking broader debugging capabilities
  • May require additional setup for complex CORS scenarios
  • Less frequently updated compared to Clockwork

Code Comparison

Laravel CORS configuration:

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

Clockwork integration:

use Clockwork\Support\Laravel\ClockworkServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function register()
    {
        if ($this->app->environment('local')) {
            $this->app->register(ClockworkServiceProvider::class);
        }
    }
}

While Laravel CORS focuses on managing CORS policies for Laravel applications, Clockwork provides a comprehensive debugging and profiling toolkit. Laravel CORS is more specialized but easier to set up for CORS-specific needs. Clockwork offers broader functionality for development and debugging but may require more configuration for CORS-related tasks. The choice between the two depends on the specific requirements of your project and whether you need focused CORS management or a more extensive debugging solution.

:dromedary_camel: Laravel log viewer

Pros of Laravel Log Viewer

  • Simple and lightweight, focusing solely on log viewing functionality
  • Easy to install and integrate into existing Laravel projects
  • Provides a clean, user-friendly interface for browsing log files

Cons of Laravel Log Viewer

  • Limited to log viewing, lacking advanced debugging features
  • Does not provide real-time monitoring or performance profiling
  • Less comprehensive in terms of application insights compared to Clockwork

Code Comparison

Laravel Log Viewer:

Route::get('logs', '\Rap2hpoutre\LaravelLogViewer\LogViewerController@index');

Clockwork:

Route::get('/__clockwork/{id}/extended', 'Clockwork\Support\Web\Controller@getExtendedData');
Route::get('/__clockwork/{id}/{direction?}/{count?}', 'Clockwork\Support\Web\Controller@getData');

Summary

Laravel Log Viewer is a straightforward tool for viewing Laravel logs, offering simplicity and ease of use. Clockwork, on the other hand, provides a more comprehensive debugging and profiling solution with advanced features. While Laravel Log Viewer excels in its focused approach to log viewing, Clockwork offers a broader range of development tools and insights. The choice between the two depends on the specific needs of the project and the level of debugging and profiling required.

Laravel N+1 Query Detector

Pros of Laravel Query Detector

  • Focused specifically on detecting and alerting about N+1 queries
  • Provides visual alerts in the browser for easy identification
  • Lightweight and easy to set up for Laravel projects

Cons of Laravel Query Detector

  • Limited to query detection and doesn't provide broader application profiling
  • Lacks a comprehensive debugging toolbar or timeline view
  • May require additional configuration for complex query scenarios

Code Comparison

Laravel Query Detector:

// In AppServiceProvider.php
public function boot()
{
    if ($this->app->environment('local')) {
        $this->app->register(\BeyondCode\QueryDetector\QueryDetectorServiceProvider::class);
    }
}

Clockwork:

// In config/app.php
'providers' => [
    // ...
    Clockwork\Support\Laravel\ClockworkServiceProvider::class,
],

Summary

Laravel Query Detector is a specialized tool for identifying N+1 query issues in Laravel applications, offering easy setup and visual alerts. However, it lacks the comprehensive profiling and debugging features provided by Clockwork.

Clockwork, on the other hand, offers a more extensive set of debugging and profiling tools, including query analysis, timeline views, and a full debugging toolbar. It provides a broader range of features for application performance monitoring and debugging beyond just query detection.

The choice between these tools depends on the specific needs of the project. Laravel Query Detector is ideal for projects primarily concerned with optimizing database queries, while Clockwork is better suited for comprehensive application profiling and debugging.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Clockwork is a development tool for PHP available right in your browser. Clockwork gives you an insight into your application runtime - including request data, performance metrics, log entries, database queries, cache queries, redis commands, dispatched events, queued jobs, rendered views and more - for HTTP requests, commands, queue jobs and tests.

This repository contains the server-side component of Clockwork.

Check out on the Clockwork website for details.

Installation

Install the Clockwork library via Composer.

composer require itsgoingd/clockwork

Congratulations, you are done! To enable more features like commands or queue jobs profiling, publish the configuration file via the vendor:publish Artisan command.

Note: If you are using the Laravel route cache, you will need to refresh it using the route:cache Artisan command.

Read full installation instructions on the Clockwork website.

Features

Collecting data

The Clockwork server-side component collects and stores data about your application.

Clockwork is only active when your app is in debug mode by default. You can choose to explicitly enable or disable Clockwork, or even set Clockwork to always collect data without exposing them for further analysis.

We collect a whole bunch of useful data by default, but you can enable more features or disable features you don't need in the config file.

Some features might allow for advanced options, eg. for database queries you can set a slow query threshold or enable detecting of duplicate (N+1) queries. Check out the config file to see all what Clockwork can do.

There are several options that allow you to choose for which requests Clockwork is active.

On-demand mode will collect data only when Clockwork app is open. You can even specify a secret to be set in the app settings to collect request. Errors only will record only requests ending with 4xx and 5xx responses. Slow only will collect only requests with responses above the set slow threshold. You can also filter the collected and recorded requests by a custom closure. CORS pre-flight requests will not be collected by default.

New in Clockwork 4.1, artisan commands, queue jobs and tests can now also be collected, you need to enable this in the config file.

Clockwork also collects stack traces for data like log messages or database queries. Last 10 frames of the trace are collected by default. You can change the frames limit or disable this feature in the configuration file.

Viewing data

Web interface

Visit /clockwork route to view and interact with the collected data.

The app will show all executed requests, which is useful when the request is not made by browser, but for example a mobile application you are developing an API for.

Browser extension

A browser dev tools extension is also available for Chrome and Firefox:

Toolbar

Clockwork now gives you an option to show basic request information in the form of a toolbar in your app.

The toolbar is fully rendered client-side and requires installing a tiny javascript library.

Learn more on the Clockwork website.

Logging

You can log any variable via the clock() helper, from a simple string to an array or object, even multiple values:

clock(User::first(), auth()->user(), $username)

The clock() helper function returns it's first argument, so you can easily add inline debugging statements to your code:

User::create(clock($request->all()))

If you want to specify a log level, you can use the long-form call:

clock()->info("User {$username} logged in!")

Timeline

Timeline gives you a visual representation of your application runtime.

To add an event to the timeline - start it with a description, execute the tracked code and finish the event. A fluent api is available to further configure the event.

// using timeline api with begin/end and fluent configuration
clock()->event('Importing tweets')->color('purple')->begin();
    ...
clock()->event('Importing tweets')->end();

Alternatively you can execute the tracked code block as a closure. You can also choose to use an array based configuration instead of the fluent api.

// using timeline api with run and array-based configuration
clock()->event('Updating cache', [ 'color' => 'green' ])->run(function () {
    ...
});

Read more about available features on the Clockwork website.

NPM DownloadsLast 30 Days