Skip to content

Instantly share code, notes, and snippets.

@twnlink
Last active December 1, 2024 20:10
Show Gist options
  • Save twnlink/ea865b6355ecbf46682468e888c8205d to your computer and use it in GitHub Desktop.
Save twnlink/ea865b6355ecbf46682468e888c8205d to your computer and use it in GitHub Desktop.
// ==UserScript==
// @name Forcibly enable Vue.js devtools
// @namespace https://toon.link
// @include http://*
// @include https://*
// @grant none
// @version 1.0
// @author toonlink
// @description Forcibly enables the VueJS devtools. Works on Vue 2 and 3.
// @run-at document-start
// ==/UserScript==
function runIfDevtools(cb) {
const devtools = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
if (devtools) {
devtools.enabled = true;
cb(devtools);
}
}
Object.defineProperty(HTMLElement.prototype, "__vue__", {
set(v) {
Object.defineProperty(this, "__vue__", {
configurable: true,
writable: true,
enumerable: true,
value: v
});
runIfDevtools((devtools) => {
if (!v || v instanceof HTMLElement) return;
let Vue = Object.getPrototypeOf(v).constructor;
while (Vue.super) {
Vue = Vue.super;
}
Vue.config.devtools = true;
devtools.emit("init", Vue);
});
return true;
},
});
Object.defineProperty(HTMLElement.prototype, "__vue_app__", {
set(v) {
Object.defineProperty(this, "__vue_app__", {
configurable: true,
writable: true,
enumerable: true,
value: v
});
runIfDevtools((devtools) => {
if (!v || v instanceof HTMLElement) return;
devtools.emit(
"app:init",
v,
v.version,
{}
)
});
return true;
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment