component-debug-mixin.js

function formatTime (timeInMs) {
  let date = new Date(timeInMs)
  // ${date.getDate()}/${date.getMonth()}/${date.getFullYear()}
  return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}`
}

function log (type, ...args) {
  if (this.$options.debug) {
    console[type](`%c[${this.$_id}]${formatTime(Date.now())}>> `,
      `background:${type === 'log' ? '#384A5E' : type === 'warn' ? '#F1BF39' : '#FF5370'}; padding: 3px; border-radius: 3px;  color: #fff`,
      ...args,
      this.$el
    )
  }
}

export default {
  created () {
    this.$_id = `${this.$options.name}-${(Date.now()).toString(32)}`
    this.log('debug ON')
  },
  methods: {
    log (...args) {
      log.call(this, 'log', ...args)
    },
    warn (...args) {
      log.call(this, 'warn', ...args)
    },
    error (...args) {
      log.call(this, 'error', ...args)
    }
  }
}