feat: add option to hide `devtools` panel on smaller screen sizes

[stefanobartoletti]

🆒 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

[arashsheyda]

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 for macos and shift + ~~ctrl~~ alt + D on windows

[stefanobartoletti]

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.

[arashsheyda]

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;
  }
}

[antfu]

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

[stefanobartoletti]

@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.