Force Open Vue Devtools

v-devtools.js

(() => {
  const root = Array.from(document.querySelectorAll('*')).find((e) => e.__vue__ || e.__vue_app__);
  const app = root?.__vue__ || root?.__vue_app__;
  const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;

  if (!app || !devtools) {
    console.log(`Can't find vue app or devtools`);
    return 0;
  }

  devtools.enabled = true;
  
  // Vue3 can get the version number through app.version, but Vue2 doesn't have version
  // So we can use this to distinguish the environment.
  const version = app.version;
  if (version) {
    devtools.emit('app:init', app, version, {});
  } else {
    let Vue = Object.getPrototypeOf(app).constructor;
    
    while (Vue.super) {
      Vue = Vue.super;
    }
    Vue.config.devtools = true;
    devtools.emit('init', Vue);
  }
  console.log(`Vue Devtools is enabled, press option + R to reload the devtool`);
})();

// bookmarklet:
// javascript:(function()%7Bconst%20root%20%3D%20Array.from(document.querySelectorAll('*')).find((e)%20%3D%3E%20e.__vue__%20%7C%7C%20e.__vue_app__)%3B%0Aconst%20app%20%3D%20root%3F.__vue__%20%7C%7C%20root%3F.__vue_app__%3B%0Aconst%20devtools%20%3D%20window.__VUE_DEVTOOLS_GLOBAL_HOOK__%3B%0A%0Aif%20(!app%20%7C%7C%20!devtools)%20%7B%0A%20%20console.log('Can%5C't%20find%20vue%20app%20or%20devtools')%0A%20%20return%200%3B%0A%7D%0A%0Adevtools.enabled%20%3D%20true%3B%0A%0Aconst%20version%20%3D%20app.version%0Aif%20(version)%20%7B%0A%20%20devtools.emit('app%3Ainit'%2C%20app%2C%20version%2C%20%7B%7D)%3B%0A%7D%20else%20%7B%0A%20%20let%20Vue%20%3D%20Object.getPrototypeOf(app).constructor%3B%0A%20%20%0A%20%20while%20(Vue.super)%20%7B%0A%20%20%20%20Vue%20%3D%20Vue.super%3B%0A%20%20%7D%0A%20%20Vue.config.devtools%20%3D%20true%3B%0A%20%20devtools.emit('init'%2C%20Vue)%3B%0A%7D%0Aconsole.log('Vue%20Devtools%20is%20enabled%2C%20press%20option%20%2B%20R%20to%20reload%20the%20devtool')%3B%7D)()%3B