Exclude routes/print mode

[RyanMulready]

We are using the Vite Plugin installation method and have a use case where certain routes are for printing only(no interaction); details/uuid/print. On these routes the dev tool still attaches itself resulting in the icon showing up.

It's a minor inconvenience but I was surprised there wasn't some way of handling this. Our current solution is to just hide it using CSS

@media print {
  #__vue-devtools-container__ {
    display: none;
  }
}

[webfansplz]

I tried to reproduce this case but couldn't. In fact, we already have similar handling for this case in the code. See:

https://github.com/vuejs/devtools/blob/main/packages/overlay/src/App.vue#L309

[skirtles-code]

I was able to reproduce this using the basic playground, pnpm run play. Attempting to print in Chrome shows the DevTools in the preview.

The code in overlay/src/App.vue is referencing the id vue-devtools-anchor, but that hasn't existed since 1d98b2c.

In my testing it seems that #1014 fixes the problem. I'm not sure whether targeting .vue-devtools__anchor or #__vue-devtools-container__ is better.