Take a look into your Laravel views

Overview

Xray - Take a look into your Laravel views

Latest Version on Packagist Build Status Quality Score Total Downloads

When your Laravel project grows, so do the Laravel views. Sometimes it might be hard to figure out, which part of the output HTML was rendered using which template. With this package, you can take a peek into your Laravel views and find out which template is responsible for which part of the output HTML.

Example output

Installation

You can install the package via composer:

composer require beyondcode/laravel-view-xray --dev

The package is enabled by default - so all you need to do is visit your application in the browser and hit the Xray shortcut.

  • Windows: CTRL + Shift + X
  • OSX: CMD + Shift + X

This toggles the Xray view, where you can see which view (and optionally section) rendered the visual output.

Disabling Xray

You can disable Xray by setting an environment variable called XRAY_ENABLED to false.

Excluding views

If you want to exclude certain views from being processed by Xray, you can do this by adding them to the configuration file.

Publish the configuration file using:

php artisan vendor:publish --provider=BeyondCode\\ViewXray\\ViewXrayServiceProvider

This will publish a file called xray.php in your config folder.

This is the content of the configuration file:

<?php

return [

    /*
     * Determines if the Xray package should be enabled.
     */
    'enabled' => env('XRAY_ENABLED', true),

    /*
     * If you want to exclude certain views from being processed by Xray,
     * you can list them here. Be aware that the check only applies to the
     * root views that you add here. If these views include other views
     * themselves, they need to be excluded manually.
     */
    'excluded' => [
        //
    ],

];

Just place the view names that you want to exclude in the excluded array.

FAQ

  • Does this work with VueJS too?

Yes, this package does work in combination with VueJS, but you need to enable comments in your VueJS app. This package works by adding specific HTML comments into the rendered views and uses these comments to find the bounding boxes of the rendered HTML. VueJS by default removes HTML comments prior to rendering.

You can enable HTML comments in your VueJS app by setting comments to true:

let app = new Vue({
    el: '#content',
    comments: true
});

Testing

composer test

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

This project is inspired by xray-rails.

License

The MIT License (MIT). Please see License File for more information.

Comments
  • Overlay not appearing

    Overlay not appearing

    Installed it on two different projects and tested both in multiple browsers. Both projects are using Laravel 5.6 & PHP 7.2.7 all with the same results.

    I'm able to see the Xray comments in the browsers inspector, but nothing happens when I hit the shortcut (on a Mac).

    opened by scottzirkel 11
  • Throwing Exception

    Throwing Exception

    Stack Trace

    [stacktrace]
    #0 /home/vagrant/Sites/ensdevc.com/vendor/beyondcode/laravel-view-xray/src/XrayMiddleware.php(47): BeyondCode\\ViewXray\\XrayMiddleware->injectXrayBar(Object(Illuminate\\Http\\Response))
    #1 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): BeyondCode\\ViewXray\\XrayMiddleware->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #2 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #3 /home/vagrant/Sites/ensdevc.com/vendor/beyondcode/laravel-query-detector/src/QueryDetectorMiddleware.php(33): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #4 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): BeyondCode\\QueryDetector\\QueryDetectorMiddleware->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #5 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #6 /home/vagrant/Sites/ensdevc.com/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(65): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #7 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Barryvdh\\Debugbar\\Middleware\\InjectDebugbar->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #8 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #9 /home/vagrant/Sites/ensdevc.com/vendor/genealabs/laravel-casts/src/Http/Middleware/AssetInjection.php(10): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #10 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): GeneaLabs\\LaravelCasts\\Http\\Middleware\\AssetInjection->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #11 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #12 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(30): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #13 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #14 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #15 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(30): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #16 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #17 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #18 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #19 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #20 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #21 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(46): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #22 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(149): Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode->handle(Object(Illuminate\\Http\\Request), Object(Closure))
    #23 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\\Pipeline\\Pipeline->Illuminate\\Pipeline\\{closure}(Object(Illuminate\\Http\\Request))
    #24 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(102): Illuminate\\Routing\\Pipeline->Illuminate\\Routing\\{closure}(Object(Illuminate\\Http\\Request))
    #25 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\\Pipeline\\Pipeline->then(Object(Closure))
    #26 /home/vagrant/Sites/ensdevc.com/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\\Foundation\\Http\\Kernel->sendRequestThroughRouter(Object(Illuminate\\Http\\Request))
    #27 /home/vagrant/Sites/ensdevc.com/public/index.php(53): Illuminate\\Foundation\\Http\\Kernel->handle(Object(Illuminate\\Http\\Request))
    #28 {main}
    
    opened by mikebronner 4
  • Shortcut not working

    Shortcut not working

    I installed this plugin via composer, after installing I refreshed the web page, but it did nothing. I was doubtful either its content is loading or not, but its content is being loaded at last of the page source, but it's doing nothing. I haven't installed xbeug chrome extension that may conflict with the shortcut key.

    opened by ahmadasjad 2
  • injectXrayBar needs api or route exclude

    injectXrayBar needs api or route exclude

    Hi there! while trying to listen the auth broadcast channel receiving

    "message": "Call to a member function getPath() on null","exception": "Symfony\\Component\\Debug\\Exception\\FatalThrowableError", "file": "C:\\xampp\\htdocs\\dev\\neomed-dev\\vendor\\beyondcode\\laravel-view-xray\\src\\XrayMiddleware.php", "line": 102,

    using Laravel 5.6.*, beyondcode/laravel-view-xray ^1.0, Laravel echo server.

    opened by webtamizhan 1
  • Fix the use of parenthesis

    Fix the use of parenthesis

    Hi there,

    if you use parenthesis on the second argument of a section like

    
    @section('title', trans('main.title'))
    

    then the regex change the template file as the following

    <?php $__env->startSection; ?>('title', trans('main.title')<!--XRAY START 1 index@section:title, trans(main.title /Volumes/sd128/code/test-xray/resources/views/index.blade.php-->)
    

    which results to an ErrorException

    This PR fixes this issue, a test has been added

    opened by bmichotte 1
  • GitHub link package differs from composer file

    GitHub link package differs from composer file

    Hey @mpociot 👋

    Thanks for this package! Would be good rename the GitHub link package from beyondcode/laravel-xray to beyondcode/laravel-view-xray.

    In order to keep the same name that already exists in composer.json and namespaces.

    screenshot 2018-07-19 13 24 55 screenshot 2018-07-19 13 25 23
    opened by nunomaduro 1
  • Add Laravel 8 support

    Add Laravel 8 support

    On installing with composer is gives an error:

    Your requirements could not be resolved to an installable set of packages.
    
      Problem 1
        - Installation request for beyondcode/laravel-view-xray ^1.3 -> satisfiable by beyondcode/laravel-view-xray[1.3.0].
        - Installation request for laravel/framework (locked at v8.10.0, required as ^8.0) -> satisfiable by laravel/framework[v8.10.0].
         - Can only install one of: laravel/framework[8.x-dev, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.0.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.0.1, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.0.2, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.0.3, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.0.4, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.1.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.10.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.2.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.3.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.4.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.5.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.6.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.7.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.7.1, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.8.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[v8.9.0, 5.7.x-dev].
        - Can only install one of: laravel/framework[5.7.x-dev, v8.10.0].
        - Conclusion: install laravel/framework 5.7.x-dev
        - Installation request for laravel/framework ^8.0 -> satisfiable by laravel/framework[8.x-dev, v8.0.0, v8.0.1, v8.0.2, v8.0.3, v8.0.4, v8.1.0, v8.10.0, v8.2.0, v8.3.0, v8.4.0, v8.5.0, v8.6.0, v8.7.0, v8.7.1, v8.8.0, v8.9.0].
    
    opened by LTKort 0
  • Add Livewire Support

    Add Livewire Support

    Hello everyone !

    I encountered a problem with the package & the use of LiveWire and after long research I finally found how to solve the problem and especially the cause!

    There are several solutions, disable the package altogether, which I wouldn't like to do.

    Exclude all views from livewire, which I don't intend to do. (the folders are unfortunately not taken into account in the package)

    Or add a little thing here && !Str::contains($view->getName(), 'livewire')

    https://github.com/beyondcode/laravel-view-xray/blob/9acdecf0cec95d036dccaa57d32564d6e1b04bc4/src/Xray.php#L21

    Can you add Directory support && Livewire support ?

    Good night !

    opened by vassilidev 0
  • Wrong image url

    Wrong image url

    Hello,

    On the documentation, the image could not be displayed due to the wrong source.

    <p><img src="/img/docs/laravel-view-xrayhttps://beyondco.de/github/xray/xray.png" alt="Example output"></p>
    
    opened by nurmuhammet-ali 0
  • Update PHP-Version requirement to PHP 8?

    Update PHP-Version requirement to PHP 8?

    Hello, is it possible to rise PHP-Version requirement to PHP 8? I'm currently unable to composer-require this package due to the strict requirement of ^php7.1 in your composer.json. Is it at least compatible to php7.4 or even php8.0?

    opened by typoworx-de 0
  • Just a tip for those having issues...

    Just a tip for those having issues...

    Like many others here, I too had an issue where nothing would happen, but I could see the comments in the HTML. There was no error message, no "Ready to Xray. Press cmd+shift+x to scan your UI.".

    Many may not know or even notice, but the loading of the default Laravel app.js (which includes jQuery) in layouts/app.blade.php is deferred.

    Meaning the inline Xray script ends up being run before the app.js and exits because jQuery has not yet loaded.

    Replacing <script src="{{ mix('js/app.js') }}" defer></script>

    with

    <script src="{{ mix('js/app.js') }}"></script>

    Or even

    <script src="{{ mix('js/app.js') }}" {{env('APP_ENV') !== 'production' ? '' : 'defer'}}></script>

    will fix the issue.

    opened by jayjfletcher 1
  • JS error when returning simple view

    JS error when returning simple view

    First of all - thank you for having made this wonderfull package, it eases a lot the production flow !

    A JS error occurs when XRay is enabled and a simple view, whitout extending layout, is returned.

    In my case I run an Jquery Ajax Type & Search, wich return html result in simple blade view. This JS error impacts other consequent callbacks binded to my function. If XRay is disabled, eveything goes fine.

    Uncaught TypeError: Xray.Overlay is not a constructor at HTMLDocument.eval (eval at globalEval (jquery-2.1.4.min.js:2), <anonymous>:31:7) at j (jquery-2.1.4.min.js:2) at Object.add [as done] (jquery-2.1.4.min.js:2) at n.fn.init.n.fn.ready (jquery-2.1.4.min.js:2) at new n.fn.init (jquery-2.1.4.min.js:2) at n (jquery-2.1.4.min.js:2) at eval (eval at globalEval (jquery-2.1.4.min.js:2), <anonymous>:30:12) at eval (eval at globalEval (jquery-2.1.4.min.js:2), <anonymous>:35:5) at eval (eval at globalEval (jquery-2.1.4.min.js:2), <anonymous>:322:3) at eval (<anonymous>)

    opened by kyobul 0
  • Linux/Chrome Hotkey Ctrl + Shift + X  doesn't seem to work

    Linux/Chrome Hotkey Ctrl + Shift + X doesn't seem to work

    For Linux and Google Chrome Browser, the Hotkey Ctrl + Shift + X doesn't seem to work. The hotkey seems to be in use elsewhere (I don't know if it's chrome itself or an addon). Is it possible to change the hot-key for X-Ray using Configuration-File?

    opened by typoworx-de 2
Releases(1.4.0)
Owner
Beyond Code
Beyond Code
🧑‍🔬 The missing assertions for your views in your Laravel applications.

Laravel View Assertions The missing assertions for your views in your Laravel applications. Installation You'll have to follow a couple of simple step

Sven Luijten 4 Dec 21, 2022
This package provides new helper functions that take care of handling all the translation hassle and do it for you.

Laravel Translate Message ?? This package provides new helper functions that take care of handling all the translation hassle and do it for you. Insta

Basel Rabia 17 Feb 8, 2022
Tarfin Take-Home Coding Challenge

TarfinKart Problemi Bu problemin temel amacı, kodlama stilini ve seçimlerini belirleyebilmektir. TarfinKart Problemi benzeri görülmemiş bir çözüm geli

Tarfin 3 Jun 8, 2022
Easily add a full Laravel blog (with built in admin panel and public views) to your laravel project with this simple package.

Webdevetc BlogEtc - Complete Laravel Blog Package Quickly add a blog with admin panel to your existing Laravel project. It has everything included (ro

WebDevEtc. 227 Dec 25, 2022
👀 Manage your views in Laravel projects through artisan

Artisan View This package adds a handful of view-related commands to Artisan in your Laravel project. Generate blade files that extend other views, sc

Sven Luijten 842 Dec 29, 2022
A package to easily make use of Iconic icons in your Laravel Blade views.

Blade Iconic A package to easily make use of Iconic icons in your Laravel Blade views. For a full list of available icons see the SVG directory. Iconi

Malik Alleyne-Jones 17 Aug 25, 2022
A package to easily make use of Simple Icons in your Laravel Blade views.

Blade Simple Icons A package to easily make use of Simple Icons in your Laravel Blade views. For a full list of available icons see the SVG directory.

UB Labs 12 Jan 17, 2022
Cagilo - a set of simple components for use in your views Laravel Blade.

Cagilo - a set of simple components for use in your views Laravel Blade. Official Documentation Documentation for Cagilo can be found on its we

Cagilo 151 Dec 6, 2022
A package to easily make use of SVG icons in your Laravel Blade views.

Blade Icons A package to easily make use of SVG icons in your Laravel Blade views. Originally "Blade SVG" by Adam Wathan. Turn... <!-- camera.svg -->

Blade UI Kit 1.7k Jan 2, 2023
Blade UI Kit is a set of renderless components to utilise in your Laravel Blade views

Blade UI Kit is a set of renderless components to utilise in your Laravel Blade views. In all essence, it's a collection of useful utilities, connecting the dots between different parts of the TALL stack. It was made for Blade, Laravel's powerful templating engine.

Blade UI Kit 1.2k Jan 5, 2023
A package to easily make use of Iconsax in your Laravel Blade views.

Blade Iconsax A package to easily make use of Iconsax in your Laravel Blade views. This package contains 1.000 icons in 6 diferent styles, a total of

Guilherme Saade 4 Oct 22, 2022
A package that uses blade templates to control how markdown is converted to HTML inside Laravel, as well as providing support for markdown files to Laravel views.

Install Install via composer. $ composer require olliecodes/laravel-etched-blade Once installed you'll want to publish the config. $ php artisan vendo

Ollie Codes 19 Jul 5, 2021
Create Laravel views (blade template) using 'php artisan' command-line interface

About LaraBit Have you ever wonder to create Laravel views (Blade Templates) using the same type of artisan commands that you usually use to create ne

Ragib MRB 5 Oct 15, 2021
Stash view is a composer package for Laravel which caches views using Russian Doll Caching methodology.

Stash View Stash view is a composer package for Laravel which caches views using Russian Doll Caching methodology. What is Russian Doll Caching ? It i

Bhushan Gaikwad 18 Nov 20, 2022
Slim Framework custom views

Slim Views This repository contains custom View classes for the template frameworks listed below. You can use any of these custom View classes by eith

Slim Framework 308 Nov 7, 2022
Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application.

Laravel Segment Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application. Installation You can install the pac

Octohook 13 May 16, 2022
Laravel package that converts your application into a static HTML website

phpReel Static Laravel Package phpReel Static is a simple Laravel Package created and used by phpReel that converts your Laravel application to a stat

phpReel 16 Jul 7, 2022
Smeify is a Stable Automated Solution for Airtime and Data businesses in Nigeria, this package helps you integrate smeify easily into your laravel application.

Smeify is a Stable Automated Solution for Airtime and Data businesses in Nigeria, this package helps you integrate smeify easily into your laravel application.

Ogundiran Adewale Charles 2 Jul 27, 2022
Laravel package to normalize your data before saving into the database.

This package helps you normalize your data in order to save them into the database. The Goal is to having separate classes that handle the data normalization, and thus can be tested independently.

Nicolas Widart 11 Apr 21, 2021