强制启用 Vue Devtools

强制启用 Vue Devtools,适用于 Vue 2 或 Vue 3 的生产环境构建应用。

当前为 2025-05-08 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Force Enable Vue Devtools
  3. // @name:zh-CN 强制启用 Vue Devtools
  4. // @name:zh-TW 強制啟用 Vue Devtools
  5. // @version 1.0.0
  6. // @description Force enable Vue Devtools for production-build apps of Vue 2 or Vue 3.
  7. // @description:zh-CN 强制启用 Vue Devtools,适用于 Vue 2 或 Vue 3 的生产环境构建应用。
  8. // @description:zh-TW 強制啟用 Vue Devtools,適用於 Vue 2 或 Vue 3 的生產環境構建應用。
  9. // @author 三咲智子 Kevin Deng <sxzz@sxzz.moe>
  10. // @homepage https://github.com/sxzz/userscripts
  11. // @supportURL https://github.com/sxzz/userscripts/issues
  12. // @license MIT
  13. // @contributionURL https://github.com/sponsors/sxzz
  14. // @namespace https://github.com/sxzz/userscripts/blob/main/dist/vue-devtools.user.js
  15. // @run-at document-start
  16. // @noframes
  17. // @include *
  18. // ==/UserScript==
  19. (function() {
  20.  
  21. "use strict";
  22.  
  23. //#region src/vue-devtools.ts
  24. /* @license
  25. * Refer from https://github.com/EHfive/userscripts/tree/master/userscripts/enbale-vue-devtools
  26. */
  27. let initted = false;
  28. main();
  29. document.addEventListener("DOMContentLoaded", () => {
  30. main();
  31. });
  32. function main() {
  33. if (initted) return;
  34. const devtoolsHook = getDevtoolsHook();
  35. if (!devtoolsHook) {
  36. console.warn("No Vue Devtools hook found, waiting");
  37. return;
  38. }
  39. initted = true;
  40. observePage();
  41. }
  42. function getDevtoolsHook() {
  43. return globalThis.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  44. }
  45. function registerVue2App(app) {
  46. let Vue = app.constructor;
  47. while (Vue.super) Vue = Vue.super;
  48. Vue.config.devtools = true;
  49. console.info("enabling devtools for Vue instance", app);
  50. const devtoolsHook = getDevtoolsHook();
  51. devtoolsHook.emit("init", Vue);
  52. }
  53. function registerVue3App(app) {
  54. const devtoolsHook = getDevtoolsHook();
  55. if (!Array.isArray(devtoolsHook.apps)) return;
  56. if (devtoolsHook.apps.includes(app)) return;
  57. const version = app.version;
  58. if (!version) return;
  59. console.info("enabling devtools for Vue 3 instance", app);
  60. const types = {
  61. Fragment: void 0,
  62. Text: void 0,
  63. Comment: void 0,
  64. Static: void 0
  65. };
  66. devtoolsHook.emit("app:init", app, version, types);
  67. const unmount = app.unmount.bind(app);
  68. app.unmount = function() {
  69. devtoolsHook.emit("app:unmount", app);
  70. unmount();
  71. };
  72. }
  73. function checkVue2Instance(target) {
  74. const vue = target && target.__vue__;
  75. return !!(vue && typeof vue === "object" && vue._isVue && typeof vue.constructor === "function");
  76. }
  77. function checkVue3Instance(target) {
  78. const app = target && target.__vue_app__;
  79. return !!app;
  80. }
  81. function observePage() {
  82. const roots = new WeakSet();
  83. const observer = new MutationObserver(() => {
  84. for (const el of Array.from(document.querySelectorAll("*"))) if (checkVue3Instance(el)) {
  85. const app = el.__vue_app__;
  86. if (roots.has(app)) continue;
  87. roots.add(app);
  88. registerVue3App(app);
  89. } else if (checkVue2Instance(el)) {
  90. const instance = el.__vue__;
  91. const root = instance.$parent ? instance.$root : instance;
  92. if (roots.has(root)) continue;
  93. roots.add(root);
  94. registerVue2App(root);
  95. }
  96. });
  97. observer.observe(document.documentElement, {
  98. attributes: true,
  99. subtree: true,
  100. childList: true
  101. });
  102. return observer;
  103. }
  104.  
  105. //#endregion
  106. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址