@presto1314w/vite-devtools-browser 0.1.0 → 0.1.2

package/README.md

@@ -1,112 +1,118 @@
-# vite-browser
-
-CLI for programmatic access to Vue/React/Svelte DevTools in Vite applications. Provides component trees, props, state, Pinia stores, Vue Router, console logs, and network requests as structured text output designed for AI agents and automation.
-
-## Installation
-
-```bash
-npm install -g @presto1314w/vite-devtools-browser
-npx playwright install chromium
-```
-
-## Quick Start
-
-```bash
-# Start your Vite dev server
-cd my-vue-app
-npm run dev
-
-# In another terminal
-vite-browser open http://localhost:5173
-vite-browser detect              # vue@3.5.29 / react@19.x / svelte@x
-vite-browser vue tree            # Vue component tree
-vite-browser react tree          # React component tree
-vite-browser svelte tree         # Svelte component tree (best effort)
-vite-browser screenshot          # Take screenshot
-vite-browser logs                # Console logs
-vite-browser network             # Network requests
-vite-browser close
-```
-
-## Features
-
-- Framework Detection: Auto-detect Vue, React, Svelte and versions (best effort)
-- Vue DevTools: Component tree, props, state, computed properties, source locations
-- React DevTools: Component tree + component inspection (props/hooks/state/context)
-- Svelte Support: Component tree + component detail inspection when runtime metadata is available
-- Pinia Integration: Inspect store state and getters
-- Vue Router: Current route, params, query, all routes
-- Network Monitoring: Track requests, headers, bodies, and response payloads
-- Console Logs: Capture console.log, warn, error, debug
-- Screenshots: Full-page PNG screenshots
-- JavaScript Evaluation: Run arbitrary JS in page context
-- Vite Integration: Error tracking, HMR monitoring
-
-## Commands
-
-### Browser Control
-```bash
-vite-browser open <url>           # Launch browser and navigate
-vite-browser close                # Close browser and daemon
-vite-browser goto <url>           # Navigate to URL
-vite-browser back                 # Go back
-vite-browser reload               # Reload page
-```
-
-### Framework Detection
-```bash
-vite-browser detect               # Detect framework and version
-```
-
-### Vue DevTools
-```bash
-vite-browser vue tree             # Show component tree
-vite-browser vue tree <id>        # Inspect component details
-vite-browser vue pinia            # List all Pinia stores
-vite-browser vue pinia <store>    # Inspect specific store
-vite-browser vue router           # Show router information
-```
-
-### React DevTools
-```bash
-vite-browser react tree           # Show React component tree
-vite-browser react tree <id>      # Inspect props/hooks/state/context/source
-```
-
-### Svelte
-```bash
-vite-browser svelte tree          # Show Svelte component tree
-vite-browser svelte tree <id>     # Inspect Svelte component details
-```
-
-### Debugging
-```bash
-vite-browser screenshot           # Take full-page screenshot
-vite-browser eval <script>        # Run JavaScript in page
-vite-browser logs                 # Show console logs
-vite-browser errors               # Show Vite errors
-vite-browser network              # List network requests
-vite-browser network <idx>        # Inspect specific request
-```
-
-## Architecture
-
-- Daemon + Socket: Background process with socket communication
-- Playwright: Headed Chromium browser
-- One Browser, One Page: Single persistent browser instance
-- Auto-start: Daemon starts automatically on first command
-
-## Requirements
-
-- Node.js 20+
-- Chromium (via Playwright)
-- Vite dev server running
-- Vue/React/Svelte app for framework-specific commands
-
-## Documentation
-
-See [SKILL.md](./skills/SKILL.md) for complete command reference and usage examples.
-
-## License
-
-MIT
+# vite-browser
+
+Agent Skill for AI coding assistants to debug Vite applications with structured access to Vue/React/Svelte runtime state. The CLI is the supporting runtime used by the skill for component trees, store/router inspection, logs, network traces, screenshots, and scripted page evaluation.
+
+## Skills
+
+```bash
+npx skills add MapleCity1314/vite-browser
+```
+
+## CLI Installation (Optional)
+
+```bash
+npm install -g @presto1314w/vite-devtools-browser
+npx playwright install chromium
+```
+
+## Quick Start
+
+```bash
+# Start your Vite dev server
+cd my-vue-app
+npm run dev
+
+# In another terminal
+vite-browser open http://localhost:5173
+vite-browser detect              # vue@3.5.29 / react@19.x / svelte@x
+vite-browser vue tree            # Vue component tree
+vite-browser react tree          # React component tree
+vite-browser svelte tree         # Svelte component tree (best effort)
+vite-browser screenshot          # Take screenshot
+vite-browser logs                # Console logs
+vite-browser network             # Network requests
+vite-browser close
+```
+
+## Features
+
+- Framework Detection: Auto-detect Vue, React, Svelte and versions (best effort)
+- Vue DevTools: Component tree, props, state, computed properties, source locations
+- React DevTools: Component tree + component inspection (props/hooks/state/context)
+- Svelte Support: Component tree + component detail inspection when runtime metadata is available
+- Pinia Integration: Inspect store state and getters
+- Vue Router: Current route, params, query, all routes
+- Network Monitoring: Track requests, headers, bodies, and response payloads
+- Console Logs: Capture console.log, warn, error, debug
+- Screenshots: Full-page PNG screenshots
+- JavaScript Evaluation: Run arbitrary JS in page context
+- Vite Integration: Error tracking, HMR monitoring
+
+## Commands
+
+### Browser Control
+```bash
+vite-browser open <url>           # Launch browser and navigate
+vite-browser close                # Close browser and daemon
+vite-browser goto <url>           # Navigate to URL
+vite-browser back                 # Go back
+vite-browser reload               # Reload page
+```
+
+### Framework Detection
+```bash
+vite-browser detect               # Detect framework and version
+```
+
+### Vue DevTools
+```bash
+vite-browser vue tree             # Show component tree
+vite-browser vue tree <id>        # Inspect component details
+vite-browser vue pinia            # List all Pinia stores
+vite-browser vue pinia <store>    # Inspect specific store
+vite-browser vue router           # Show router information
+```
+
+### React DevTools
+```bash
+vite-browser react tree           # Show React component tree
+vite-browser react tree <id>      # Inspect props/hooks/state/context/source
+```
+
+### Svelte
+```bash
+vite-browser svelte tree          # Show Svelte component tree
+vite-browser svelte tree <id>     # Inspect Svelte component details
+```
+
+### Debugging
+```bash
+vite-browser screenshot           # Take full-page screenshot
+vite-browser eval <script>        # Run JavaScript in page
+vite-browser logs                 # Show console logs
+vite-browser errors               # Show Vite errors
+vite-browser network              # List network requests
+vite-browser network <idx>        # Inspect specific request
+```
+
+## Architecture
+
+- Daemon + Socket: Background process with socket communication
+- Playwright: Headed Chromium browser
+- One Browser, One Page: Single persistent browser instance
+- Auto-start: Daemon starts automatically on first command
+
+## Requirements
+
+- Node.js 20+
+- Chromium (via Playwright)
+- Vite dev server running
+- Vue/React/Svelte app for framework-specific commands
+
+## Documentation
+
+See [SKILL.md](./skills/SKILL.md) for complete command reference and usage examples.
+
+## License
+
+MIT

package/dist/browser.js

@@ -15,19 +15,12 @@ const installHook = hasReactExtension
 let context = null;
 let page = null;
 let framework = "unknown";
+let extensionModeDisabled = false;
 const consoleLogs = [];
 const MAX_LOGS = 200;
 let lastReactSnapshot = [];
 export async function open(url) {
-    if (!context) {
-        context = await launch();
-        page = context.pages()[0] ?? (await context.newPage());
-        attachListeners(page);
-        networkLog.attach(page);
-    }
-    const currentPage = page;
-    if (!currentPage)
-        throw new Error("browser not open");
+    const currentPage = await ensurePage();
     if (url) {
         await currentPage.goto(url, { waitUntil: "domcontentloaded" });
         await detectFramework();
@@ -48,20 +41,65 @@ export async function close() {
     networkLog.clear();
     lastReactSnapshot = [];
 }
+async function ensurePage() {
+    if (!contextUsable(context)) {
+        await close();
+        context = await launch();
+    }
+    if (!context)
+        throw new Error("browser not open");
+    if (!page || page.isClosed()) {
+        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);
+    }
+    return page;
+}
+function contextUsable(current) {
+    if (!current)
+        return false;
+    try {
+        current.pages();
+        return true;
+    }
+    catch {
+        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,
@@ -78,22 +116,19 @@ function attachListeners(currentPage) {
     });
 }
 export async function goto(url) {
-    if (!page)
-        throw new Error("browser not open");
-    await page.goto(url, { waitUntil: "domcontentloaded" });
+    const currentPage = await ensurePage();
+    await currentPage.goto(url, { waitUntil: "domcontentloaded" });
     await detectFramework();
-    return page.url();
+    return currentPage.url();
 }
 export async function back() {
-    if (!page)
-        throw new Error("browser not open");
-    await page.goBack({ waitUntil: "domcontentloaded" });
+    const currentPage = await ensurePage();
+    await currentPage.goBack({ waitUntil: "domcontentloaded" });
 }
 export async function reload() {
-    if (!page)
-        throw new Error("browser not open");
-    await page.reload({ waitUntil: "domcontentloaded" });
-    return page.url();
+    const currentPage = await ensurePage();
+    await currentPage.reload({ waitUntil: "domcontentloaded" });
+    return currentPage.url();
 }
 export async function detectFramework() {
     if (!page)

package/dist/cli.js

@@ -13,6 +13,7 @@ if (cmd === "open") {
         console.error("usage: vite-browser open <url> [--cookies-json <file>]");
         process.exit(1);
     }
+    const url = normalizeUrl(arg);
     const cookieIdx = args.indexOf("--cookies-json");
     const cookieFile = cookieIdx >= 0 ? args[cookieIdx + 1] : undefined;
     if (cookieFile) {
@@ -21,15 +22,15 @@ if (cmd === "open") {
             exit(res, "");
         const raw = readFileSync(cookieFile, "utf-8");
         const cookies = JSON.parse(raw);
-        const domain = new URL(arg).hostname;
+        const domain = new URL(url).hostname;
         const cRes = await send("cookies", { cookies, domain });
         if (!cRes.ok)
             exit(cRes, "");
-        await send("goto", { url: arg });
-        exit(res, `opened -> ${arg} (${cookies.length} cookies for ${domain})`);
+        await send("goto", { url });
+        exit(res, `opened -> ${url} (${cookies.length} cookies for ${domain})`);
     }
-    const res = await send("open", { url: arg });
-    exit(res, `opened -> ${arg}`);
+    const res = await send("open", { url });
+    exit(res, `opened -> ${url}`);
 }
 if (cmd === "close") {
     const res = await send("close");
@@ -40,7 +41,7 @@ if (cmd === "goto") {
         console.error("usage: vite-browser goto <url>");
         process.exit(1);
     }
-    const res = await send("goto", { url: arg });
+    const res = await send("goto", { url: normalizeUrl(arg) });
     exit(res, res.ok ? `-> ${res.data}` : "");
 }
 if (cmd === "back") {
@@ -166,3 +167,8 @@ OPTIONS
   -h, --help                          Show this help message
 `);
 }
+function normalizeUrl(value) {
+    if (value.includes("://"))
+        return value;
+    return `http://${value}`;
+}

package/dist/client.js

@@ -40,7 +40,7 @@ function daemonAlive() {
     }
     catch {
         rmSync(pidFile, { force: true });
-        rmSync(socketPath, { force: true });
+        removeSocketFile();
         return false;
     }
 }
@@ -70,3 +70,8 @@ function ok(s) {
 function no() {
     return false;
 }
+function removeSocketFile() {
+    if (process.platform === "win32")
+        return;
+    rmSync(socketPath, { force: true });
+}

package/dist/daemon.js

@@ -3,7 +3,7 @@ import { mkdirSync, writeFileSync, rmSync } from "node:fs";
 import * as browser from "./browser.js";
 import { socketDir, socketPath, pidFile } from "./paths.js";
 mkdirSync(socketDir, { recursive: true, mode: 0o700 });
-rmSync(socketPath, { force: true });
+removeSocketFile();
 rmSync(pidFile, { force: true });
 writeFileSync(pidFile, String(process.pid));
 const server = createServer((socket) => {
@@ -127,6 +127,12 @@ function shutdown() {
     process.exit(0);
 }
 function cleanup() {
-    rmSync(socketPath, { force: true });
+    removeSocketFile();
     rmSync(pidFile, { force: true });
 }
+function removeSocketFile() {
+    // Windows named pipes are not filesystem entries, so unlinking them fails with EPERM.
+    if (process.platform === "win32")
+        return;
+    rmSync(socketPath, { force: true });
+}

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,8 +1,16 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI for programmatic access to Vue/React DevTools in Vite applications",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MapleCity1314/vite-browser.git"
+  },
+  "homepage": "https://github.com/MapleCity1314/vite-browser#readme",
+  "bugs": {
+    "url": "https://github.com/MapleCity1314/vite-browser/issues"
+  },
   "type": "module",
   "engines": {
     "node": ">=20"
@@ -11,10 +19,10 @@
     "dist"
   ],
   "bin": {
-    "vite-browser": "./dist/cli.js"
+    "vite-browser": "dist/cli.js"
   },
   "scripts": {
-    "start": "node --loader tsx src/cli.ts",
+    "start": "node --import tsx src/cli.ts",
     "dev": "tsx src/cli.ts",
     "typecheck": "tsc --noEmit",
     "build": "tsc -p tsconfig.build.json",