強制啟用 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. let initted = false;
  25. main();
  26. document.addEventListener("DOMContentLoaded", () => {
  27. main();
  28. });
  29. function main() {
  30. if (initted) return;
  31. const devtoolsHook = getDevtoolsHook();
  32. if (!devtoolsHook) {
  33. console.warn("No Vue Devtools hook found, waiting");
  34. return;
  35. }
  36. initted = true;
  37. observePage();
  38. }
  39. function getDevtoolsHook() {
  40. return globalThis.__VUE_DEVTOOLS_GLOBAL_HOOK__;
  41. }
  42. function registerVue2App(app) {
  43. let Vue = app.constructor;
  44. while (Vue.super) Vue = Vue.super;
  45. Vue.config.devtools = true;
  46. console.info("enabling devtools for Vue instance", app);
  47. const devtoolsHook = getDevtoolsHook();
  48. devtoolsHook.emit("init", Vue);
  49. }
  50. function registerVue3App(app) {
  51. const devtoolsHook = getDevtoolsHook();
  52. if (!Array.isArray(devtoolsHook.apps)) return;
  53. if (devtoolsHook.apps.includes(app)) return;
  54. const version = app.version;
  55. if (!version) return;
  56. console.info("enabling devtools for Vue 3 instance", app);
  57. const types = {
  58. Fragment: void 0,
  59. Text: void 0,
  60. Comment: void 0,
  61. Static: void 0
  62. };
  63. devtoolsHook.emit("app:init", app, version, types);
  64. const unmount = app.unmount.bind(app);
  65. app.unmount = function() {
  66. devtoolsHook.emit("app:unmount", app);
  67. unmount();
  68. };
  69. }
  70. function checkVue2Instance(target) {
  71. const vue = target && target.__vue__;
  72. return !!(vue && typeof vue === "object" && vue._isVue && typeof vue.constructor === "function");
  73. }
  74. function checkVue3Instance(target) {
  75. const app = target && target.__vue_app__;
  76. return !!app;
  77. }
  78. function observePage() {
  79. const roots = new WeakSet();
  80. const observer = new MutationObserver(() => {
  81. for (const el of Array.from(document.querySelectorAll("*"))) if (checkVue3Instance(el)) {
  82. const app = el.__vue_app__;
  83. if (roots.has(app)) continue;
  84. roots.add(app);
  85. registerVue3App(app);
  86. } else if (checkVue2Instance(el)) {
  87. const instance = el.__vue__;
  88. const root = instance.$parent ? instance.$root : instance;
  89. if (roots.has(root)) continue;
  90. roots.add(root);
  91. registerVue2App(root);
  92. }
  93. });
  94. observer.observe(document.documentElement, {
  95. attributes: true,
  96. subtree: true,
  97. childList: true
  98. });
  99. return observer;
  100. }
  101.  
  102. //#endregion
  103. })();

QingJ © 2025

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