vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools-v6.vuejs.org/
MIT License
24.68k stars 4.14k forks source link

How I can turn off the "vue-devtools Detected" message on the console? #685

Closed dortamiguel closed 5 years ago

dortamiguel commented 6 years ago

Version

4.1.4

Browser and OS info

chrome 66

Steps to reproduce

Just install the devtools and open a vue app.

What is expected?

I want to turn off the message "vue-devtools Detected" on the console.

What is actually happening?

I can't find any option to turn off this message.

dortamiguel commented 6 years ago

image

emanuelmutschlechner commented 6 years ago

Are you using a non-production build? This message won't be shown if you build your app in production mode. Else try Vue.config.devtools=false in your main js file

dortamiguel commented 6 years ago

Vue.config.devtools=false works for me 🙂

dortamiguel commented 6 years ago

If I do Vue.config.devtools=false then the devtools stop working. What I mean is I want to use the devtools but avoid the message while developing.

emanuelmutschlechner commented 6 years ago

Is there a specific reason you don't want that message in the console log?

dortamiguel commented 6 years ago

I just like to have the console clean, I already can see here that the devtools are enabled

image

emanuelmutschlechner commented 6 years ago

Just looked at the code. This message is always shown when devtools connect to Vue and can't be disabled

emanuelmutschlechner commented 6 years ago

If you really want to have a clean log then the only thing you can do is to clear the console yourself by calling console.clear() or window.clear(). Or else use the available keyboard shortcuts Ctrl+L or Cmd + L

shirshak55 commented 6 years ago

I guess there is no reason for that message. Yeah I also want clean console instead of useless message like Vue Devtool is connected etc..

CMD + L is currently what we are doing but every refresh page it sucks :(

husayt commented 6 years ago

Might be a good idea to let disable/enable this as an option to settings. See #547

tdkn commented 6 years ago

This is very annoying behavior. Should be able to disable/enable.

Akryum commented 6 years ago

I still fail to see how is this "very annoying behavior" but hey. It's not a priority anyway.

rowild commented 6 years ago

I join the plenum: would like to not be distracted by that, if I wish, so please offer a little toggle to disable that message - thank you!

eldoy commented 6 years ago

Please disable all console logs by default. It's annoying.

shirshak55 commented 6 years ago

Its too annoying to see vue tools detected when we already know we are using vue. So how is this useful feature at any means?

What is use case of showing Vue Devtool detected? It is not going to be shown in production anyway then why show it in local development.

We prefer clean console :)

Dwood15 commented 6 years ago

This message is annoying (and redundant) given we have the vue-devtools icon in the plugin bar.

rowild commented 6 years ago

For the moment a workaround would be to right-click the line in question in the console and choose "Don't show any messages from Vue Devtools anymore" (or whatever the correct text might be...)

bg commented 6 years ago

Selenium driving Chrome headless which is a part of our test suite spits out the related message to download Vue DevTools in the middle of my test runs, obscuring legitimately concerning console messages that might occur during development test runs. Vue DevTools doesn't even make sense in that context, making it doubly annoying. Will the PR above fix both problems at once?

emanuelmutschlechner commented 6 years ago

@bg This PR adds a toggle to the settings tab where the mentioned message can be disabled globally. The setting will be persisted in LocalStorage like other devtool settings.

bg commented 6 years ago

Shoot ... I wasn't paying attention closely enough. It stands to reason if Chrome driven by Selenium for my tests doesn't even load Vue DevTools (even though my usual development profile for Chrome has it loaded), this is Vue's problem, not vue-devtool's. I need a different solution to my superficially similar but otherwise unrelated problem. Thanks.

givinguphope commented 5 years ago

Why config option? This message is practically useless... Is there any other purpose of this besides someone showing off applying CSS in Chrome console?

jbosse commented 5 years ago

Remember that time you released a development build into production by accident? If you don’t you haven’t been working on the web that long. This feature is important because if you see it in production then you know something has gone wrong.

jbosse commented 5 years ago

You clean console folks should be more annoyed by all the CSP violation errors that get thrown by the dev tools. Those really pollute the console.

If you aren’t getting those then you should be worried more about the poor CSP on your website than an informational console log.

shirshak55 commented 5 years ago

CSP is another issue not related with this. In production who open devtool for vue as it is already disabled. So this message is practically useless. It seems like advertisement of vue only ...

React devtool never shows the message.

gitsakil09 commented 5 years ago

Vue.config.productionTip = false should hide the message

LarenDorr commented 5 years ago

I found a method to hidden console log. Just add -[flush] to console filter input. Before: image After: image If you want to hidden vue-devtools badge, just add -vue-devtools . Others same, just add -xxx(you want hidden key)