vuejs / devtools-next

The next iteration of Vue DevTools
https://devtools.vuejs.org/
MIT License
1.46k stars 103 forks source link

(Vite plugin) How to show the floating panel after unchecking "Always show the floating panel"? #545

Open lukeupup opened 2 months ago

lukeupup commented 2 months ago

Hello, I am using the devtools as vite plugin. I tried unchecking the "Always show the floating panel" option in Settings page and close the panel. The panel is hidden as expected. There's no extra elements in the page that I can interact with the devtools. But I cannot find a easy way to make it show again. And I didn't find any documents about this. I also tried to call __VUE_DEVTOOLS_TOGGLE_OVERLAY__(true) but it doesn't work. Finally I edited the localstorage to revert the setting.

I'd like to know what's the proper way to make the floating panel to show again? Thank you.

duowb commented 2 months ago

Mac Use Shift + Option + D to toggle DevTools

Win Use Shift + Alt + D to toggle DevTools

Use the shortcut keys above to open the panel, and then proceed with the settings

lukeupup commented 2 months ago

Thank you for the answer. I tried on Chrome and the shortcut works.

But unfortunately I am working with a webview (concretely, an Office plugin) which can't receive such shortcut. I believe there might be some other runtimes that we cannot use shortcut keys (e.g. webviews in mobile phones). So it would be nice if we have an alternative way to open the panel (such as calling some method in the console).