Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable the Vue Devtool extension tip

I love Vue in almost every aspect but this is logged whenever I start my Vue app:

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

I like to have a minimal development experience and I don't need this Vue extension. I'd like to disable this tip that I find annoying. How can I proceed?

What I've already tried

Looking at Vue's source code, the tip is logged by:

if (inBrowser) {
  setTimeout(function () {
    if (config.devtools) {
      if (devtools) {
        devtools.emit('init', Vue);
      } else if (
        true
      ) {
        console[console.info ? 'info' : 'log'](
          'Download the Vue Devtools extension for a better development experience:\n' +
          'https://github.com/vuejs/vue-devtools'
        );
      }
    }
    if ( true &&
      config.productionTip !== false &&
      typeof console !== 'undefined'
    ) {
      console[console.info ? 'info' : 'log'](
        "You are running Vue in development mode.\n" +
        "Make sure to turn on production mode when deploying for production.\n" +
        "See more tips at https://vuejs.org/guide/deployment.html"
      );
    }
  }, 0);
}

Contrary to the similar development mode warning that can be turned off by Vue.config.productionTip = false before new Vue({...}), there doesn't seems to be a config-based escape to prevent the tip to be logged. I therefore have the following options, which don't completely satisfy me:

  • change console.log globally to filter out this particular message → not "The Vue Way"
  • modify the source code of Vue → not "The NPM Way"
  • kindly ask the Vue developers to remove this → takes time + change likely to be refused for business reasons
like image 633
Nino Filiu Avatar asked Mar 01 '19 15:03

Nino Filiu


People also ask

How do I disable Devtools Vue?

change console. log globally to filter out this particular message → not "The Vue Way" modify the source code of Vue → not "The NPM Way" kindly ask the Vue developers to remove this → takes time + change likely to be refused for business reasons.

How do I use Vue extension in Chrome?

Vue Chrome Extension Project SetupThe src folder contains all of the files we'll be using for the extension. The manifest file and background. js should be familiar, but also notice a popup folder containing a Vue component. When the boilerplate builds the extension into the dist folder, it will pipe any .


2 Answers

From the source code you provided, have you tried the following before new Vue({...})?

Vue.config.devtools = false
like image 104
Hammerbot Avatar answered Sep 18 '22 13:09

Hammerbot


in chrome if you right click one of the messages and choose to hide it will toss it up in your filter so dont get messages from vue.runtime.esm.js anymore:

enter image description here

like image 26
kinghat Avatar answered Sep 20 '22 13:09

kinghat