Keybinding is not supported in all browsers

[PhiloNL]

The keybinding CMD/CTRL + L seems to work in browsers like Chrome but not in browsers like Arc. The keybinding should be configurable.

[Horttcore]

@PhiloNL CMD + SHIFT + L works for Arc Browser (Mac) CMD + L works in Chrome (Mac) CMD + L works in Firefox (Mac) CMD + L works in Safari (Mac)

I have to click somewhere on the page but then it works

[FortuneV13]

Nothing is popping up for me in Chrome. composer package is installed and using CMD+L

[valpuia604]

Would also love to have a floating icon/button to toggle, like Nuxt Devtools or Debugger

[PhiloNL]

@PhiloNL CMD + SHIFT + L works for Arc Browser (Mac) CMD + L works in Chrome (Mac) CMD + L works in Firefox (Mac) CMD + L works in Safari (Mac)

I have to click somewhere on the page but then it works

Thanks! It seems to vary a bit per person. I'll make it configurable though :)

Nothing is popping up for me in Chrome. composer package is installed and using CMD+L

Can you check the page source and see if the devbar is there? (it only renders if there are Livewire components on the page.

Would also love to have a floating icon/button to toggle, like Nuxt Devtools or Debugger

Thanks! I'll look into adding this an optional option (so it doesn't conflict with other debug bars for example)

[MarioPerini]

"Ctrl + L" does focus on the address bar and does not open WireSpy for me.

https://support.google.com/chrome/answer/157179#zippy=%2Caddress-bar-shortcuts

Edit: Also in Firefox https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

[PhiloNL]

"Ctrl + L" does focus on the address bar and does not open WireSpy for me.

https://support.google.com/chrome/answer/157179#zippy=%2Caddress-bar-shortcuts

Edit: Also in Firefox https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly

Yeah, sometimes it works if you click on the page first but it's not ideal so I'll be updating this shortly

[joffreypersia]

You're great @PhiloNL, love your initiative ! One day I'll be rich enough to sponsor you ahah

[ismaail]

in case you clicked on Wire-Spy Close button, to show it again:

Alpine.$data(document.querySelector(('div[x-data="wireSpy"]'))).show = true;

[PhiloNL]

You can now define your own keybinding:

php artisan vendor:publish --tag=wire-spy-config

And adjust the config to your preferred binding:

<?php

return [
    /**
    * The keybinding configuration option allows you to define a keyboard shortcut
    * using AlpineJS syntax. It accepts a string representing the desired key combination.
    *
    * Syntax:
    * - 'super' corresponds to the 'Cmd' key on macOS and the 'Ctrl' key on Windows/Linux.
    * - Combine with other keys using dot notation, like 'super.l' for 'Cmd+L' or 'Ctrl+L'.
    */
    'keybinding' => 'super.l',
];