@presto1314w/vite-devtools-browser 0.1.1 → 0.1.2

package/dist/browser.js

@@ -15,6 +15,7 @@ const installHook = hasReactExtension
 let context = null;
 let page = null;
 let framework = "unknown";
+let extensionModeDisabled = false;
 const consoleLogs = [];
 const MAX_LOGS = 200;
 let lastReactSnapshot = [];
@@ -48,7 +49,17 @@ async function ensurePage() {
     if (!context)
         throw new Error("browser not open");
     if (!page || page.isClosed()) {
-        page = context.pages()[0] ?? (await context.newPage());
+        try {
+            page = context.pages()[0] ?? (await context.newPage());
+        }
+        catch (error) {
+            if (!isClosedTargetError(error))
+                throw error;
+            await close();
+            extensionModeDisabled = true;
+            context = await launch();
+            page = context.pages()[0] ?? (await context.newPage());
+        }
         attachListeners(page);
         networkLog.attach(page);
     }
@@ -65,20 +76,30 @@ function contextUsable(current) {
         return false;
     }
 }
+function isClosedTargetError(error) {
+    if (!(error instanceof Error))
+        return false;
+    return /Target page, context or browser has been closed/i.test(error.message);
+}
 async function launch() {
-    if (hasReactExtension && installHook) {
-        const ctx = await chromium.launchPersistentContext("", {
-            headless: false,
-            viewport: { width: 1280, height: 720 },
-            args: [
-                `--disable-extensions-except=${extensionPath}`,
-                `--load-extension=${extensionPath}`,
-                "--auto-open-devtools-for-tabs",
-            ],
-        });
-        await ctx.waitForEvent("serviceworker").catch(() => { });
-        await ctx.addInitScript(installHook);
-        return ctx;
+    if (hasReactExtension && installHook && !extensionModeDisabled) {
+        try {
+            const ctx = await chromium.launchPersistentContext("", {
+                headless: false,
+                viewport: { width: 1280, height: 720 },
+                args: [
+                    `--disable-extensions-except=${extensionPath}`,
+                    `--load-extension=${extensionPath}`,
+                    "--auto-open-devtools-for-tabs",
+                ],
+            });
+            await ctx.waitForEvent("serviceworker").catch(() => { });
+            await ctx.addInitScript(installHook);
+            return ctx;
+        }
+        catch {
+            extensionModeDisabled = true;
+        }
     }
     const browser = await chromium.launch({
         headless: false,

package/dist/vue/devtools.js

@@ -176,12 +176,51 @@ export async function getComponentDetails(page, id) {
  */
 export async function getPiniaStores(page, storeName) {
     const result = await page.evaluate((name) => {
+        const safeJson = (value) => {
+            if (typeof value === "function")
+                return "[Function]";
+            if (typeof value === "bigint")
+                return value.toString();
+            const seen = new WeakSet();
+            try {
+                return JSON.stringify(value, (_, v) => {
+                    if (typeof v === "function")
+                        return "[Function]";
+                    if (typeof v === "bigint")
+                        return v.toString();
+                    if (v && typeof v === "object") {
+                        if (seen.has(v))
+                            return "[Circular]";
+                        seen.add(v);
+                    }
+                    return v;
+                });
+            }
+            catch {
+                return String(value);
+            }
+        };
+        const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+        const piniaFromApp = hook?.apps?.[0]?.config?.globalProperties?.$pinia;
         // Try to find Pinia instance
-        const pinia = window.__PINIA__ || window.pinia;
+        const pinia = window.__PINIA__ || window.pinia || piniaFromApp;
         if (!pinia)
             return "Pinia not found";
-        const stores = pinia._s || pinia.state?.value || {};
-        const storeKeys = Object.keys(stores);
+        // Pinia v3 uses Map for _s, older integrations can expose plain objects.
+        const storesById = {};
+        const registry = pinia._s;
+        if (registry instanceof Map) {
+            registry.forEach((store, id) => {
+                storesById[String(id)] = store;
+            });
+        }
+        else if (registry && typeof registry === "object") {
+            for (const [id, store] of Object.entries(registry)) {
+                storesById[id] = store;
+            }
+        }
+        const stateById = pinia.state?.value && typeof pinia.state.value === "object" ? pinia.state.value : {};
+        const storeKeys = Array.from(new Set([...Object.keys(storesById), ...Object.keys(stateById)]));
         if (storeKeys.length === 0)
             return "No Pinia stores found";
         const output = [];
@@ -195,29 +234,40 @@ export async function getPiniaStores(page, storeName) {
             return output.join("\n");
         }
         // Get specific store
-        const store = stores[name];
-        if (!store)
+        const store = storesById[name] ?? null;
+        const stateOnly = stateById[name];
+        if (!store && !stateOnly)
             return `Store '${name}' not found`;
         output.push(`# Pinia Store: ${name}\n`);
         // State
-        const state = store.$state || store.state || store;
+        const state = store?.$state || store?.state || stateOnly || store;
         if (state && typeof state === 'object') {
             output.push("## State");
             for (const [key, value] of Object.entries(state)) {
                 if (key.startsWith('$'))
                     continue; // Skip Pinia internals
-                output.push(`  ${key}: ${JSON.stringify(value)}`);
+                output.push(`  ${key}: ${safeJson(value)}`);
             }
             output.push("");
         }
         // Getters
-        const getters = store._getters || {};
-        if (Object.keys(getters).length > 0) {
+        const getterNames = [];
+        const rawGetters = store?._getters;
+        if (Array.isArray(rawGetters)) {
+            getterNames.push(...rawGetters.map((g) => String(g)));
+        }
+        else if (rawGetters instanceof Set) {
+            getterNames.push(...Array.from(rawGetters).map((g) => String(g)));
+        }
+        else if (rawGetters && typeof rawGetters === "object") {
+            getterNames.push(...Object.keys(rawGetters));
+        }
+        if (getterNames.length > 0) {
             output.push("## Getters");
-            for (const key of Object.keys(getters)) {
+            for (const key of getterNames) {
                 try {
                     const value = store[key];
-                    output.push(`  ${key}: ${JSON.stringify(value)}`);
+                    output.push(`  ${key}: ${safeJson(value)}`);
                 }
                 catch {
                     output.push(`  ${key}: [Error]`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI for programmatic access to Vue/React DevTools in Vite applications",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,7 @@
     "dist"
   ],
   "bin": {
-    "vite-browser": "./dist/cli.js"
+    "vite-browser": "dist/cli.js"
   },
   "scripts": {
     "start": "node --import tsx src/cli.ts",