背景
由于写一个浏览器插件，需要了解第三方网页内部逻辑，需要打开vue devtools。
解决方案
- 直接使用开源chrome插件：Vue force dev，无痛解决问题。
- 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';
}
总结
- 注意前提都是要先安装vue devtools插件。
- 此文仅做备份与记录。
- 之前一直好奇怎么在生产环境强制调用vue组件的实例方法。打开dev tools只是第一步，后续还需要实践一下如何修改内部运行逻辑。
