Closed stefanobartoletti closed 3 months ago
we already support this feature! if you have DevTools enabled in your nuxt.config.ts
devtools: {
enabled: true,
},
then you can go to settings
tab and make sure that Always Show the floating tab
is disabled. also Minimize floating panel on inactive
is set to Always
the panel will be hide and you can toggle Devtools by pressing
shift
+option
+D
formacos
andshift
+ctrl
alt
+D
onwindows
Thanks for your feedback!
I found that on my Linux system the shortcut to activate/deactivate it is Shift
+ Alt
+ D
.
Besides that, this behavior is slightly different to what I'd like to have, I'm fine with having the indicator always present on desktop and only hiding it on mobile views. I think that for the time being I can resort on using a custom Userscript on my browser.
I'm not sure if this is something we want? /cc @antfu
@stefanobartoletti meanwhile you can do something like this:
@media screen and (max-width: 768px) {
.nuxt-devtools-panel,
.nuxt-devtools-glowing {
display: none !important;
}
}
I heard there are some people using DevTools on mobile devices to debug, as one of the advantage of Nuxt DevTools is that it also works on mobile where native DevTools is hard to setup. While I agree to hide it on smaller screens, but I would like to keep the possibilities for people to use Nuxt DevTools if they want to. We might need to find a middle ground
@antfu yes, this is a bit old as issue, right now I'm using it hidden by default and pop it up with Shift
+Alt
+D
when needed, and it works nice for my workflow. So in a sense we can consider this solved.
🆒 Your use case
I find the small
devtools
indicator that permanently resides at the bottom of the screen to be a little intrusive when working on responsive layouts, i.e. when using a browser "device view" to see smaller screens.On mobile screens, often UI elements are smaller and more difficult to interact with (to test or inspect them) when the
devtools
indicator is present and gets in the way.And I would also say that
devtools
window is not really that useful in these resolutions since the screen is too small to provide information in a viable way.🆕 The solution you'd like
Give the ability to completely hide
devtools
when the site is displayed on smaller resolutions (probably the simplest way would be to just hide it from CSS). Maybe this could be optional so the user can choose whether it has to be hidden or not, and maybe use three generic "mobile", "tablet" and "desktop" breakpoints for fine-tuning.🔍 Alternatives you've considered
No response
ℹ️ Additional info
No response