@presto1314w/vite-devtools-browser 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+# 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

package/dist/browser.d.ts

@@ -0,0 +1,22 @@
+export declare function open(url: string | undefined): Promise<void>;
+export declare function cookies(cookies: {
+    name: string;
+    value: string;
+}[], domain: string): Promise<number>;
+export declare function close(): Promise<void>;
+export declare function goto(url: string): Promise<string>;
+export declare function back(): Promise<void>;
+export declare function reload(): Promise<string>;
+export declare function detectFramework(): Promise<string>;
+export declare function vueTree(id?: string): Promise<string>;
+export declare function vuePinia(store?: string): Promise<string>;
+export declare function vueRouter(): Promise<string>;
+export declare function reactTree(id?: string): Promise<string>;
+export declare function svelteTree(id?: string): Promise<string>;
+export declare function viteRestart(): Promise<string>;
+export declare function viteHMR(): Promise<string>;
+export declare function errors(): Promise<string>;
+export declare function logs(): Promise<string>;
+export declare function screenshot(): Promise<string>;
+export declare function evaluate(script: string): Promise<string>;
+export declare function network(idx?: number): Promise<string>;

package/dist/browser.js

@@ -0,0 +1,238 @@
+import { existsSync, readFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join, resolve } from "node:path";
+import { chromium } from "playwright";
+import * as vueDevtools from "./vue/devtools.js";
+import * as reactDevtools from "./react/devtools.js";
+import * as svelteDevtools from "./svelte/devtools.js";
+import * as networkLog from "./network.js";
+const extensionPath = process.env.REACT_DEVTOOLS_EXTENSION ??
+    resolve(import.meta.dirname, "../../next-browser/extensions/react-devtools-chrome");
+const hasReactExtension = existsSync(join(extensionPath, "manifest.json"));
+const installHook = hasReactExtension
+    ? readFileSync(join(extensionPath, "build", "installHook.js"), "utf-8")
+    : null;
+let context = null;
+let page = null;
+let framework = "unknown";
+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");
+    if (url) {
+        await currentPage.goto(url, { waitUntil: "domcontentloaded" });
+        await detectFramework();
+    }
+}
+export async function cookies(cookies, domain) {
+    if (!context)
+        throw new Error("browser not open");
+    await context.addCookies(cookies.map((c) => ({ name: c.name, value: c.value, domain, path: "/" })));
+    return cookies.length;
+}
+export async function close() {
+    await context?.close();
+    context = null;
+    page = null;
+    framework = "unknown";
+    consoleLogs.length = 0;
+    networkLog.clear();
+    lastReactSnapshot = [];
+}
+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;
+    }
+    const browser = await chromium.launch({
+        headless: false,
+        args: ["--auto-open-devtools-for-tabs"],
+    });
+    return browser.newContext({ viewport: { width: 1280, height: 720 } });
+}
+function attachListeners(currentPage) {
+    currentPage.on("console", (msg) => {
+        const text = `[${msg.type()}] ${msg.text()}`;
+        consoleLogs.push(text);
+        if (consoleLogs.length > MAX_LOGS)
+            consoleLogs.shift();
+    });
+}
+export async function goto(url) {
+    if (!page)
+        throw new Error("browser not open");
+    await page.goto(url, { waitUntil: "domcontentloaded" });
+    await detectFramework();
+    return page.url();
+}
+export async function back() {
+    if (!page)
+        throw new Error("browser not open");
+    await page.goBack({ waitUntil: "domcontentloaded" });
+}
+export async function reload() {
+    if (!page)
+        throw new Error("browser not open");
+    await page.reload({ waitUntil: "domcontentloaded" });
+    return page.url();
+}
+export async function detectFramework() {
+    if (!page)
+        throw new Error("browser not open");
+    const detected = await page.evaluate(() => {
+        if (window.__VUE__ || window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+            const version = window.__VUE__?.version || "unknown";
+            return `vue@${version}`;
+        }
+        const reactHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+        if (reactHook || window.React || document.querySelector("[data-reactroot]")) {
+            const renderers = reactHook?.renderers;
+            const firstRenderer = renderers ? renderers.values().next().value : null;
+            const version = firstRenderer?.version || window.React?.version || "unknown";
+            return `react@${version}`;
+        }
+        if (window.__SVELTE__ ||
+            window.__svelte ||
+            window.__SVELTE_DEVTOOLS_GLOBAL_HOOK__) {
+            const version = window.__SVELTE__?.VERSION ||
+                window.__svelte?.version ||
+                "unknown";
+            return `svelte@${version}`;
+        }
+        return "unknown";
+    });
+    if (detected.startsWith("vue"))
+        framework = "vue";
+    else if (detected.startsWith("react"))
+        framework = "react";
+    else if (detected.startsWith("svelte"))
+        framework = "svelte";
+    else
+        framework = "unknown";
+    return detected;
+}
+export async function vueTree(id) {
+    if (!page)
+        throw new Error("browser not open");
+    return id ? vueDevtools.getComponentDetails(page, id) : vueDevtools.getComponentTree(page);
+}
+export async function vuePinia(store) {
+    if (!page)
+        throw new Error("browser not open");
+    return vueDevtools.getPiniaStores(page, store);
+}
+export async function vueRouter() {
+    if (!page)
+        throw new Error("browser not open");
+    return vueDevtools.getRouterInfo(page);
+}
+export async function reactTree(id) {
+    if (!page)
+        throw new Error("browser not open");
+    if (!id) {
+        lastReactSnapshot = await reactDevtools.snapshot(page);
+        return reactDevtools.format(lastReactSnapshot);
+    }
+    const parsed = Number.parseInt(id, 10);
+    if (!Number.isFinite(parsed))
+        throw new Error("react component id must be a number");
+    const inspected = await reactDevtools.inspect(page, parsed);
+    const lines = [];
+    const componentPath = reactDevtools.path(lastReactSnapshot, parsed);
+    if (componentPath)
+        lines.push(`path: ${componentPath}`);
+    lines.push(inspected.text);
+    if (inspected.source) {
+        const [file, line, column] = inspected.source;
+        lines.push(`source: ${file}:${line}:${column}`);
+    }
+    return lines.join("\n");
+}
+export async function svelteTree(id) {
+    if (!page)
+        throw new Error("browser not open");
+    return id ? svelteDevtools.getComponentDetails(page, id) : svelteDevtools.getComponentTree(page);
+}
+export async function viteRestart() {
+    if (!page)
+        throw new Error("browser not open");
+    return page.evaluate(async () => {
+        try {
+            const response = await fetch("/__vite_restart", { method: "POST" });
+            return response.ok ? "restarted" : "restart endpoint not available";
+        }
+        catch {
+            return "restart endpoint not available (install vite-browser plugin)";
+        }
+    });
+}
+export async function viteHMR() {
+    if (!page)
+        throw new Error("browser not open");
+    return page.evaluate(() => {
+        const updates = window.__vite_hmr_updates || [];
+        if (updates.length === 0)
+            return "No HMR updates";
+        return updates
+            .slice(-20)
+            .map((u) => `${new Date(u.timestamp).toLocaleTimeString()} - ${u.path}`)
+            .join("\n");
+    });
+}
+export async function errors() {
+    if (!page)
+        throw new Error("browser not open");
+    const errorInfo = await page.evaluate(() => {
+        const overlay = document.querySelector("vite-error-overlay");
+        if (!overlay || !overlay.shadowRoot)
+            return null;
+        const message = overlay.shadowRoot.querySelector(".message")?.textContent?.trim();
+        const stack = overlay.shadowRoot.querySelector(".stack")?.textContent?.trim();
+        return { message, stack };
+    });
+    if (!errorInfo)
+        return "no errors";
+    return `${errorInfo.message ?? "Vite error"}\n\n${errorInfo.stack ?? ""}`.trim();
+}
+export async function logs() {
+    if (consoleLogs.length === 0)
+        return "no logs";
+    return consoleLogs.slice(-50).join("\n");
+}
+export async function screenshot() {
+    if (!page)
+        throw new Error("browser not open");
+    const path = join(tmpdir(), `vite-browser-${Date.now()}.png`);
+    await page.screenshot({ path, fullPage: true });
+    return path;
+}
+export async function evaluate(script) {
+    if (!page)
+        throw new Error("browser not open");
+    const result = await page.evaluate(script);
+    return JSON.stringify(result, null, 2);
+}
+export async function network(idx) {
+    if (idx == null)
+        return networkLog.format();
+    return networkLog.detail(idx);
+}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,168 @@
+#!/usr/bin/env node
+import { readFileSync } from "node:fs";
+import { send } from "./client.js";
+const args = process.argv.slice(2);
+const cmd = args[0];
+const arg = args[1];
+if (cmd === "--help" || cmd === "-h" || !cmd) {
+    printUsage();
+    process.exit(0);
+}
+if (cmd === "open") {
+    if (!arg) {
+        console.error("usage: vite-browser open <url> [--cookies-json <file>]");
+        process.exit(1);
+    }
+    const cookieIdx = args.indexOf("--cookies-json");
+    const cookieFile = cookieIdx >= 0 ? args[cookieIdx + 1] : undefined;
+    if (cookieFile) {
+        const res = await send("open");
+        if (!res.ok)
+            exit(res, "");
+        const raw = readFileSync(cookieFile, "utf-8");
+        const cookies = JSON.parse(raw);
+        const domain = new URL(arg).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})`);
+    }
+    const res = await send("open", { url: arg });
+    exit(res, `opened -> ${arg}`);
+}
+if (cmd === "close") {
+    const res = await send("close");
+    exit(res, "closed");
+}
+if (cmd === "goto") {
+    if (!arg) {
+        console.error("usage: vite-browser goto <url>");
+        process.exit(1);
+    }
+    const res = await send("goto", { url: arg });
+    exit(res, res.ok ? `-> ${res.data}` : "");
+}
+if (cmd === "back") {
+    const res = await send("back");
+    exit(res, "back");
+}
+if (cmd === "reload") {
+    const res = await send("reload");
+    exit(res, res.ok ? `reloaded -> ${res.data}` : "");
+}
+if (cmd === "detect") {
+    const res = await send("detect");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vue" && arg === "tree") {
+    const id = args[2];
+    const res = await send("vue-tree", { id });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vue" && arg === "pinia") {
+    const store = args[2];
+    const res = await send("vue-pinia", { store });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vue" && arg === "router") {
+    const res = await send("vue-router");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "react" && arg === "tree") {
+    const id = args[2];
+    const res = await send("react-tree", { id });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "svelte" && arg === "tree") {
+    const id = args[2];
+    const res = await send("svelte-tree", { id });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vite" && arg === "restart") {
+    const res = await send("vite-restart");
+    exit(res, res.ok && res.data ? String(res.data) : "restarted");
+}
+if (cmd === "vite" && arg === "hmr") {
+    const res = await send("vite-hmr");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "errors") {
+    const res = await send("errors");
+    exit(res, res.ok && res.data ? String(res.data) : "no errors");
+}
+if (cmd === "logs") {
+    const res = await send("logs");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "screenshot") {
+    const res = await send("screenshot");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "eval") {
+    if (!arg) {
+        console.error("usage: vite-browser eval <script>");
+        process.exit(1);
+    }
+    const res = await send("eval", { script: arg });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "network") {
+    const idx = arg ? parseInt(arg, 10) : undefined;
+    const res = await send("network", { idx });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+console.error(`unknown command: ${cmd}`);
+process.exit(1);
+function exit(res, msg) {
+    if (!res.ok) {
+        console.error(res.error || "error");
+        process.exit(1);
+    }
+    if (msg)
+        console.log(msg);
+    process.exit(0);
+}
+function printUsage() {
+    console.log(`
+vite-browser - Programmatic access to Vue/React/Svelte DevTools and Vite dev server
+
+USAGE
+  vite-browser <command> [options]
+
+BROWSER CONTROL
+  open <url> [--cookies-json <file>]  Launch browser and navigate
+  close                               Close browser and daemon
+  goto <url>                          Full-page navigation
+  back                                Go back in history
+  reload                              Reload current page
+
+FRAMEWORK DETECTION
+  detect                              Detect framework (vue/react/svelte)
+
+VUE COMMANDS
+  vue tree [id]                       Show Vue component tree or inspect component
+  vue pinia [store]                   Show Pinia stores or inspect specific store
+  vue router                          Show Vue Router information
+
+REACT COMMANDS
+  react tree [id]                     Show React component tree or inspect component
+
+SVELTE COMMANDS
+  svelte tree [id]                    Show Svelte component tree or inspect component
+
+VITE COMMANDS
+  vite restart                        Restart Vite dev server
+  vite hmr                            Show HMR status
+  errors                              Show build/runtime errors
+  logs                                Show dev server logs
+
+UTILITIES
+  screenshot                          Save screenshot to temp file
+  eval <script>                       Evaluate JavaScript in page context
+  network [idx]                       List network requests or inspect one
+
+OPTIONS
+  -h, --help                          Show this help message
+`);
+}

package/dist/client.d.ts

@@ -0,0 +1,8 @@
+export type Response = {
+    ok: true;
+    data?: unknown;
+} | {
+    ok: false;
+    error: string;
+};
+export declare function send(action: string, payload?: Record<string, unknown>): Promise<Response>;

package/dist/client.js

@@ -0,0 +1,72 @@
+import { connect as netConnect } from "node:net";
+import { readFileSync, existsSync, rmSync } from "node:fs";
+import { spawn } from "node:child_process";
+import { setTimeout as sleep } from "node:timers/promises";
+import { fileURLToPath } from "node:url";
+import { socketPath, pidFile } from "./paths.js";
+export async function send(action, payload = {}) {
+    await ensureDaemon();
+    const socket = await connect();
+    const id = String(Date.now());
+    socket.write(JSON.stringify({ id, action, ...payload }) + "\n");
+    const line = await readLine(socket);
+    socket.end();
+    return JSON.parse(line);
+}
+async function ensureDaemon() {
+    if (daemonAlive() && (await connect().then(ok, no)))
+        return;
+    const ext = import.meta.url.endsWith(".ts") ? ".ts" : ".js";
+    const daemon = fileURLToPath(new URL(`./daemon${ext}`, import.meta.url));
+    const child = spawn(process.execPath, [daemon], {
+        detached: true,
+        stdio: "ignore",
+    });
+    child.unref();
+    for (let i = 0; i < 50; i++) {
+        if (await connect().then(ok, no))
+            return;
+        await sleep(100);
+    }
+    throw new Error(`daemon failed to start (${socketPath})`);
+}
+function daemonAlive() {
+    if (!existsSync(pidFile))
+        return false;
+    const pid = Number(readFileSync(pidFile, "utf-8"));
+    try {
+        process.kill(pid, 0);
+        return true;
+    }
+    catch {
+        rmSync(pidFile, { force: true });
+        rmSync(socketPath, { force: true });
+        return false;
+    }
+}
+function connect() {
+    return new Promise((resolve, reject) => {
+        const socket = netConnect(socketPath);
+        socket.once("connect", () => resolve(socket));
+        socket.once("error", reject);
+    });
+}
+function readLine(socket) {
+    return new Promise((resolve, reject) => {
+        let buffer = "";
+        socket.on("data", (chunk) => {
+            buffer += chunk;
+            const newline = buffer.indexOf("\n");
+            if (newline >= 0)
+                resolve(buffer.slice(0, newline));
+        });
+        socket.on("error", reject);
+    });
+}
+function ok(s) {
+    s.destroy();
+    return true;
+}
+function no() {
+    return false;
+}

package/dist/daemon.d.ts

@@ -0,0 +1 @@
+export {};