A toolbar for Laravel Telescope, based on the Symfony Web Profiler.

My application loads an app.js file that does an axios request for it's data just before the </body> tag. This initial ajax request is not being shown in the toolbar. Figured it's because the toolbar is loaded after the app.js file. When changing the toolbar to load just before the </head> the initial ajax request is being show.

I guess there are reasons to not load the toolbar in the head section? I've tried loading it based on: <!-- toolbar --> just before loading the app.js file and that works. Would it be an idea to make the place where the toolbar is injected configurable in Toolbar@injectToolbar?

If you like the idea I can create a PR for it.

Hello,

I applied a Laravel Telescope theme to the toolbar, I thought it made sense because you use Telescope under the hood.

Hope you like it and if you any suggestions please let me know.

If you like it maybe you can make a new image for in the readme, I don’t have a big project running for all features at the moment.

Issue #5

Hello, I recently updated the toolbar version I'm using to 1.2, (on Laravel 6.16.0) - none of the icons appear to be showing in the toolbar:

I've tried removing / re-requiring through composer, didn't make a difference.

Any help would be appreciated, thanks!

All toolbar routes currently use the telescope middleware stack, which might include the auth middleware.

This causes errors in Safari if the user isn't logged in:

[Error] SyntaxError: Unexpected token '<'
	(anonymous function) (login:1)
[Error] Did not parse stylesheet at 'https://mercatus.test/_tt/assets/styling.css?20190826&lightMode=1' because non CSS MIME types are not allowed in strict mode.
[Error] ReferenceError: Can't find variable: Sfjs
	(anonymous function) (mercatus.test:14)
	Global Code (mercatus.test:15)
[Error] ReferenceError: Can't find variable: Sfjs
	(anonymous function) (mercatus.test:79)
	Global Code (mercatus.test:80)

Telescope itself has the ability to ignore some paths (for example, a third-party package that has its own routes). Is this something we can have for the Toolbar too?

Currently, the Toolbar will be injected into any HTML response. However, it isn't too intelligent as to which responses are actually HTML. If a header wasn't supplied, it is assumed that the response is HTML.

• PHP: v7.3.1
• Laravel: v7.1.3
• Telescope: v3.1.1
• Telescope Toolbar: v1.2.2

Hi,

I have a query that takes around 5247.76 ms. For this reason, I wanted to see if I can optimize it using this toolbar.

The toolbar was unfortunately showing the following error message:

An 500 error occurred while loading the Telescope Toolbar. Make sure you configured/installed Telescope correctly.

When I looked into the response of the made request by this toolbar, I saw the following error (shortened):

"message": "A non well formed numeric value encountered (View: /home/vagrant/GitHub/eloquent-viewable-demo-app/vendor/fruitcake/laravel-telescope-toolbar/resources/views/collectors/queries.blade.php)",
    "exception": "Facade\\Ignition\\Exceptions\\ViewException",
    "file": "/home/vagrant/GitHub/eloquent-viewable-demo-app/vendor/fruitcake/laravel-telescope-toolbar/src/../resources/views/collectors/queries.blade.php",
    "line": 21,

Line 21:

$query_time += $query->content['time'] ?? 0;

I decided to look at the value of $query->content['time'] and it returned 5,247.76.

This is where the problem lays. PHP can't cast it, because it doesn't understand the format.

Looking into the source code of Telescope, I saw this line in the QueryWatcher:

'time' => number_format($time, 2),

I'm currently thinking about a solution but it may take a while.

Thanks for creating and maintaining this package!

In #49 PHP 8 support was added, but there was no release since then so with the current version composer will give the following error:

    - fruitcake/laravel-telescope-toolbar v1.3.0 requires php ^7.3 -> your php version (8.0.3) does not satisfy that requirement.

I temporarily switched to dev-master in my composer.json, but I propose to release a new version which includes this support.

Some ideas:

• View collector -> As soon as https://github.com/laravel/telescope/pull/679 is tagged
• ~~Toggle the ajax listener with localstorage on/off instead of config? (Eg. pause/resume button next to 'Clear')~~
• ~~Click to load Ajax requests in the toolbar, instead of directly on the profiler (eg. call Sfjs.loadToolbar(token) instead of opening Telescope.~~
• ...

This will allow to configure the route path at which the toolbar is available. This will avoid conflicts with application that already use this route or which are unable to the default.

I added 'auto' option for the light theme option in config so it imports both of css files that styles light and dark mode so that toolbar should automatically detect if the user has requested a light or dark theme based on the operating system's or browser's settings.

I was experiencing an issue where some of my requests didn't have profiles I could load, so I decided to introduce a config setting for including paths.

I'm unsure if there is a more preferable way this could have been implemented, but it does work for my situation and I think it'd be a good addition to this tool.

Laravel deprecation warning:

storage/logs/php-deprecation-warnings.log:84:[2022-10-16 14:53:13] local.WARNING: stripos(): Passing null to parameter #1 ($haystack) of type string is deprecated in /var/www/html/vendor/fruitcake/laravel-telescope-toolbar/src/Toolbar.php on line 93

on:

    /**
     * @param \Illuminate\Http\Request $request A Request instance
     * @param \Symfony\Component\HttpFoundation\Response $response A Response instance
     */
    public function modifyResponse($request, $response)
    {
        //
        // Skip non-html requests
        if (($response->headers->has('Content-Type') && strpos($response->headers->get('Content-Type'), 'html') === false)
            || $request->getRequestFormat() !== 'html'
            || stripos($response->headers->get('Content-Disposition'), 'attachment;') !== false
        ) {
            return;
        }
        //
    }

Tried to register it in the flush section, still shows first request all the time.

'flush' => [
    Fruitcake\TelescopeToolbar\ToolbarServiceProvider::class,
],

Hello,

i've made a fresh new installation of laravel 8 + jetstream + telescope. then after adding your package, i've got this error after performing a "php artisan route:list" :

   Illuminate\Contracts\Container\BindingResolutionException

  Target [Laravel\Telescope\Contracts\EntriesRepository] is not instantiable while building [Fruitcake\TelescopeToolbar\Http\Controllers\ToolbarController].

  at S:\work\Kantazen\Project\Kantazen\bin\www\laravel-8-js\vendor\laravel\framework\src\Illuminate\Container\Container.php:1042
    1038▕         } else {
    1039▕             $message = "Target [$concrete] is not instantiable.";
    1040▕         }
    1041▕
  ➜ 1042▕         throw new BindingResolutionException($message);
    1043▕     }
    1044▕
    1045▕     /**
    1046▕      * Throw an exception for an unresolvable primitive.

  1   C:\Somewhere\Over\The\Rainbow\laravel-8\vendor\laravel\framework\src\Illuminate\Container\Container.php:839
      Illuminate\Container\Container::notInstantiable("Laravel\Telescope\Contracts\EntriesRepository")

  2   C:\Somewhere\Over\The\Rainbow\laravel-8\vendor\laravel\framework\src\Illuminate\Container\Container.php:712
      Illuminate\Container\Container::build("Laravel\Telescope\Contracts\EntriesRepository")

I would like to use laravel-telescope-toolbar with browserSync

Toolbar works fine with php artisan serve on http://localhost:3000

But after I enabled browserSync in webpack.mix.js:

.browserSync({
    proxy: 'http://localhost:8000',
    files: [
        'resources/views/**/*.blade.php',
    ]
});

on domain http://localhost:8000 I don't see any toolbar and in Chrome console I see this error:

Access to XMLHttpRequest at 'http://localhost:8000/_tt/render/92872b43-05f7-4ed3-807c-39f62ba9a9f8' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

btw. telescope works on both domains http://localhost:8000/telescope http://localhost:3000/telescope

I am not sure if it a bug or can you help me how can I fix it? Thanks

I've been using Laravel Query Detector alongside the great barryvdh/laravel-debugbar package:

https://github.com/beyondcode/laravel-query-detector

I also use Telescope and thought likely better to Use Telescope and Telescope Toolbar ongoing but really miss this integration.

Any thoughts on whether it could be integrated into your toolbar?

Many Thanks!