背景

由于写一个浏览器插件，需要了解第三方网页内部逻辑，需要打开vue devtools。

解决方案

1. 直接使用开源chrome插件：Vue force dev，无痛解决问题。
2. js控制台参考以下代码进行开启（部分代码参考了方法1中的源码）

function patchNuxt() {
    if (!(window.__NUXT__ || window.$nuxt)) {return};

    const app = window.$nuxt.$root && window.$nuxt.$root.constructor;
    app.config.devtools = true
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = app
      return 'nuxt';
}

function patchVue3() {
    if (!window.__VUE__) {return;}
    const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue_app__).__vue_app__;
    const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
    devtools.enabled = true
    devtools.emit('app:init', app, app.version, {})
    return 'vue3';
}

function patchVue2() {
    if (!window.Vue) {return;}
    const app = Array.from(document.querySelectorAll('*')).find((e) => e.__vue__).__vue__;
    const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
    Vue.config.devtools = true;
    devtools.emit('init', Vue);
    return 'vue2';
}

总结

1. 注意前提都是要先安装vue devtools插件。
2. 此文仅做备份与记录。
3. 之前一直好奇怎么在生产环境强制调用vue组件的实例方法。打开dev tools只是第一步，后续还需要实践一下如何修改内部运行逻辑。