Keybind Config not working

[GBry]

Changed it to super.y but still not working. Why? super.L is used for focusing the address bar in chrome.
After install it worked, then I pressed the cross button and it never works anymore. It won't show up.

[Raze2]

I had the same issue. I changed the key to ctrl.l and cleared local storage in console command:
localStorage.clear();
This fixed the problem.

[PhiloNL]

Changed it to super.y but still not working. Why? super.L is used for focusing the address bar in chrome. After install it worked, then I pressed the cross button and it never works anymore. It won't show up.

@GBry could cmd+y be taken by something else? Could you try a few different keys and see if that makes a difference?

[GBry]

I will write back tomorrow morning regarding this issue when I resume writing code. It's getting late here. Thank you.

[GBry]

localStorage.clear(); did the trick; after entering the command then refreshing, it opened the bar, but when I close it, I can't open it with the assigned key.

Tried keys:

• Y
• I (as in India)
• M
• B

[Giovanni-Petrella]

I have the same problem I can't get the debugbar to work it doesn't appear by changing any key combination, I'm trying on Linux distro manjaro and debian

[Giovanni-Petrella]

I'm not sure how it should work but I don't see the view markup in the pages how can it be resolved?

[PhiloNL]

I'm not sure how it should work but I don't see the view markup in the pages how can it be resolved?

Do you have a Livewire component on the page? It will only render if at least one component exists.

[Giovanni-Petrella]

Of course this was clear to me but I use more than 200 livewire components in our app and on almost all pages there are more livewire components, even many components, but I never see the package markup what can I check to understand why it doesn't work?

[PhiloNL]

Of course this was clear to me but I use more than 200 livewire components in our app and on almost all pages there are more livewire components, even many components, but I never see the package markup what can I check to understand why it doesn't work?

A change that was introduced yesterday might be related:

By default, WireSpy is enabled only in your local environment. You can override this in config/wire-spy.php or by setting an environment variable:
WIRE_SPY_ENABLED=true

Can you verify that your environment is set to local or test if setting the WIRE_SPY_ENABLED env makes a difference? :)

[Giovanni-Petrella]

Of course but to be safe I also added WIRE_SPY_ENABLED=true: part
of my env:

APP_ENV=local
APP_KEY=base64:pLWTbnLYjV5wRgDcFKCmQsX5MwoleamHhL4YLnBtBLh=
APP_DEBUG=true

ENVIRONMENT=local

DEBUGBAR_ENABLED=false
WIRE_SPY_ENABLED=true

[Giovanni-Petrella]

If you tell me the mechanism by which it detects that there is livewire on the page, perhaps I can guess if there is something particular that inhibits component recognition in my software

[PhiloNL]

If you tell me the mechanism by which it detects that there is livewire on the page, perhaps I can guess if there is something particular that inhibits component recognition in my software

You can find the related code here:
https://github.com/wire-elements/wire-spy/blob/main/src/SupportAutoInjectedAssets.php

[Giovanni-Petrella]

As I thought there is something wrong because if I do:
$html = $handled->response->getContent();
dd(str($html)->contains(''));
it return: false
and if i do: dd(str($html));
return:

[PhiloNL]

I get the same result, so this doesn't seem to be the issue.
Also, dd(str($html)->contains('')); will return false because it is not checking if a specific value exists.
The correct statement is str($html)->contains('</html>') so you will have to double-check if your page source contains an HTML closing tag.

If you could create a repository that reproduces the problem I can investigate further.

[Giovanni-Petrella]

No yes, I tried as you say and it comes back to me false only that in the comment I didn't put with the code tag and it took me away </html> so I tried too with str($html)->contains('</html>') and return false

[JohnMSykes]

Hi PhiloNL-

Keybinding seems to be problematic for our use, too. We're developing using Sail under WSL2 on Windows 11 with FireFox Developer Edition and MS Edge browsers. Both browsers have "reserved" CTRL-L aka super.l.

In config/wire-spy.php it's written:

/**
     * 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'.
     */

Are all of the AlpineJS keyboard modifier keys/variants supported? e.g.,:

Modifier	Keyboard Key
.shift	Shift
.enter	Enter
.space	Space
.ctrl	Ctrl
.cmd	Cmd
.meta	Cmd on Mac, Windows key on Windows
.alt	Alt
.up .down .left .right	Up/Down/Left/Right arrows
.escape	Escape
.tab	Tab
.caps-lock	Caps Lock
.equal	Equal, =
.period	Period, .
.comma	Comma, ,
.slash	Forward Slash, /

I ask as it would be helpful to chain some key combinations using the AlpineJS notation, e.g., super.shift.z, etc.

In our case, even after localStorage.clear() from the JS console, we're unable to use the keyboard to call/raise WireSpy. I note that FireFox will show the WireSpy debug panel on page load, but it will not hide/show when using a mapped keyboard binding - This is not perfect, but at least we can benefit from your hard work when debugging with WireSpy! We're unable to call/raise in MS Edge, even upon load/refresh of page. (CORRECTION: The behavior is similar in MS Edge, i.e., WireSpy WILL present/show upon reload/refresh)

We are not seeing any errors in the browser console, so it's not super-clear where to start with troubleshooting, etc.

Lastly, we're using the Laravel Debug Bar and the Laravel Livewire Hot Reload plugin from def:studio - https://github.com/defstudio/vite-livewire-plugin

[Giovanni-Petrella]

Hi PhilNL I found my problem I use middleware to compress the request: GzipEncodeResponse and therefore obviously the html tag you put in your provider's control is not found and it does not insert wire-spy. I was easy to put a control in the middleware that is not used locally when the WIRE_SPY_ENABLED environment variable is set, thank you for help me to check the issue

[Quaap70]

Changed it to super.y but still not working. Why? super.L is used for focusing the address bar in chrome. After install it worked, then I pressed the cross button and it never works anymore. It won't show up.

@GBry could cmd+y be taken by something else? Could you try a few different keys and see if that makes a difference?

@PhiloNL

I also tried it with different key bindings, but they all didn't work. (safari and arc) The black header of the wire-spy bar is permanently visible, but only with a refresh and close icon on the right. The bar doesn't respond to the key bindings, and I can't drag it bigger either. (Arc plugin does detect Livewire on the page.)

Hopefully this info will help you find the cause ;-)

[juanjoballesteros]

Hello,

I think the problem is in the .super, i changed to other keyboard event like .ctrl and works fine.

[Quaap70]

Hello,

I think the problem is in the .super, i changed to other keyboard event like .ctrl and works fine.

Unfortunately... that doesn't work for me.

Is there an option to make the toolbar open by default. Then I can drag it larger or smaller, depending on whether I use it or not. But that way you can at least use and test the toolbar.

[GBry]

@Quaap70 doing a localStorage.clear(); will always open it, for me.

[halmanza]

To add to @juanjoballesteros comment changing the key binding to ctrl. as prefix and clearing local storage worked for me as well.

[jenishprajapati-kombee]

Adding to @juanjoballesteros's comment: changing the key binding to use Ctrl as a prefix and clearing local storage worked for me as well.

Thanks, @juanjoballesteros!