Enhanced Debugging w/ Ray
Tags: webdev, debugging, javascript, php
Published: 2021-02-12 22:08:27

[Ray](https://myray.app) is a beautiful, lightweight desktop app that helps you debug your code.  It makes debugging even complex applications painless.

Ray supports [PHP](https://github.com/spatie/ray), [Ruby](https://github.com/spatie/ruby-ray), [JavaScript & TypeScript](https://github.com/permafrost-dev/node-ray), [NodeJS](https://github.com/permafrost-dev/node-ray) and Bash applications. There are libraries for several frameworks, including [Laravel](https://github.com/spatie/laravel-ray), [Wordpress](https://github.com/spatie/wordpress-ray), [Vue](https://github.com/permafrost-dev/vue-ray), and others.

Many of the libraries are first-party packages and are of the quality that Spatie's packages are known for.

After installing one of the libraries to send information to Ray, you can use the `ray` function to quickly dump stuff. Any data that you pass to `ray` will be displayed.

![screenshot](https://spatie.be/docs/ray/v1/images/clean.jpg)

Ray supports advanced features too, such as pausing code execution:

![screenshot](https://spatie.be/docs/ray/v1/images/pause.jpg)

It's Laravel support is arguably the best of the many frameworks supported. There are advanced debugging features for Laravel, such as automatically displaying database queries:

```php
ray()->showQueries();

// this query will be displayed.
User::firstWhere('email', 'john@example.com'); 

ray()->stopShowingQueries();

// this query won't be displayed.
User::firstWhere('email', 'jane@example.com');
```

![screenshot](https://spatie.be/docs/ray/v1/images/query.jpg)

There is also a package for debugging [VueJS code](https://github.com/permafrost-dev/vue-ray) with the `vue-ray` package:
![vue-ray logo](https://static.permafrost.dev/images/vue-ray/vue-ray-logo-med-with-text.png?v=1)

When working with Vue components, changes to any data variables can be tracked and displayed in real time using the `track(name)` method.

```vue
<script>
export default {
    props: ['title'],
    data() {
        return {
            one: 100,
            two: 22,
        };
    },
    created() {
        this.$ray().track('one');
    },
    mounted() {
        setInterval( () => { this.one += 3; }, 4000);
    }
}
</script>
```

Packages are also available for [#javascript](https://dev.to/t/javascript) or [#typescript](https://dev.to/t/typescript) apps, including NodeJS or Electron apps with the [node-ray package](https://github.com/permafrost-dev/node-ray).

If you want to use Ray on any webpage, just use the standalone bundle via CDN:


```html
<script src="https://cdn.jsdelivr.net/npm/axios@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/node-ray@latest/dist/standalone.js"></script>
<script>
    window.ray = Ray.ray;
    document.addEventListener('DOMContentLoaded', event => {
        ray('document finished loading!');
    });
</script>
```

I'm now using Ray for debugging most of the applications that I work on, and it's made development easier - I spend less time debugging and more time writing code.

Ray is an app worth checking out if you write a lot of code.   There's a [free demo](https://spatie.be/docs/ray/v1/the-ray-desktop-app/download-the-free-demo) available, too.