svelte-inspector interfering with OS screenshot shortcuts

[probablykasper]

Describe the bug

I frequently take screenshots, which on macOS is done using cmd+shift+3/4. When I do that, the inspector shows up and photobombs my screenshot, then it stays active afterwards.

It's a bit disorienting to me because after pressing cmd+shift+4 I now need to remember to do a separate shortcut to hide the inspector (I found myself trying Escape a lot).

Screen.Recording.2022-12-16.at.06.06.01.converted.mp4

Reproduction URL

Not applicable here imo

Reproduction

1. npm create svelte
2. Enable inspector in svelte.config.js:

  vitePlugin: {
    experimental: {
      inspector: true,
    },
  },

3. npm i && npm run dev
4. Take a screenshot using cmd+shift+4

Logs

No response

System Info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 1.23 GB / 32.00 GB
    Shell: 3.5.1 - /usr/local/bin/fish
  Binaries:
    Yarn: 3.3.0 - ~/Library/Application Support/Volta/tools/image/yarn/3.3.0/bin/yarn
    npm: 8.19.2 - ~/Library/Application Support/Volta/tools/image/node/18.12.1/bin/npm
  Browsers:
    Brave Browser: 108.1.46.134
    Chrome: 108.0.5359.124
    Firefox: 107.0
    Firefox Developer Edition: 108.0
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.0 
    @sveltejs/kit: ^1.0.0 => 1.0.0 
    svelte: ^3.54.0 => 3.55.0 
    vite: ^4.0.0 => 4.0.1

[delight]

What would be the alternative? Got something to propose?

As it does not stop the functionality and it can be worked around rather easily. But if you have an idea of how to improve it and the DX, sure.

As it is only happening when trying to screenshot a sveltekit app in dev mode the issue is rather minor IMO.
Just tried it on my ma you can work around it by:

• focusing a different window before using the screenshoting short-cut.
• You can always disable inspector shortly in the config file for the moment before taking screenshots. Little cumbersome to do.

But again, what would be a good alternative ?

[probablykasper]

It might be best to figure out a different default shortcut to avoid conflicts. I think it's important enough because it's common to take frequent screenshots for clients/coworkers/feedback

Something that would help a bit is to handle it like this:

on cmd+shift keydown: enable inspector
before cmd+shift keyup is fired:
  on cmd+shift+[another key/modifier] keydown: disable inspector

[woodyrew]

There's a way to set a custom key combination for the inspector: https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#inspector Hope this helps.

[probablykasper]

I think cmd+alt would be a sensible default for it. That does not conflict with any default OS shortcuts

[dominikg]

got annoyed by this myself, here's a slight change in behavior based on #557 (comment)

would be great if you could try #716 to see if it works on mac @probablykasper

[probablykasper]

Unfortunately it doesn't fix it because the cmd+shift+(3|4|5) shortcuts never reach the browser in the first place - not even keyup or window blur. That's why the inspector gets stuck being open.

This problem is pretty specific to those shortcuts. I don't know any other shortcut with this problem, so combinations like alt-shift work well (I use that one). Even if any other shortcuts have this problem, it wouldn't be as annoying/frequent as with screenshots.

Your PR still helps with other cases though, nice work!

[dominikg]

released svelte-inspector 1.0.4 with the improvements. That cmd-shift-(3,4,5) don't trigger key events and also don't cause onLeave leave us no room for detecting it.

In this case there are 2 workarounds:

1. enable svelte inspector first, then use the screenshot combo which would disable svelte-inspector again
2. use a different combo

In the next major release we might reconsider the default shortcut for macos if more users raise their annoyance.