@presto1314w/vite-devtools-browser 0.1.2 → 0.1.3

package/dist/browser.d.ts

@@ -15,7 +15,10 @@ 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 viteRuntimeStatus(): Promise<string>;
+export declare function viteHMRTrace(mode: "summary" | "trace" | "clear", limit?: number): Promise<string>;
+export declare function viteModuleGraph(filter?: string, limit?: number, mode?: "snapshot" | "trace" | "clear"): Promise<string>;
+export declare function errors(mapped?: boolean, inlineSource?: boolean): Promise<string>;
 export declare function logs(): Promise<string>;
 export declare function screenshot(): Promise<string>;
 export declare function evaluate(script: string): Promise<string>;

package/dist/browser.js

@@ -6,6 +6,7 @@ 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";
+import { resolveViaSourceMap } from "./sourcemap.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"));
@@ -18,7 +19,10 @@ let framework = "unknown";
 let extensionModeDisabled = false;
 const consoleLogs = [];
 const MAX_LOGS = 200;
+const MAX_HMR_EVENTS = 500;
 let lastReactSnapshot = [];
+const hmrEvents = [];
+let lastModuleGraphUrls = null;
 export async function open(url) {
     const currentPage = await ensurePage();
     if (url) {
@@ -38,6 +42,8 @@ export async function close() {
     page = null;
     framework = "unknown";
     consoleLogs.length = 0;
+    hmrEvents.length = 0;
+    lastModuleGraphUrls = null;
     networkLog.clear();
     lastReactSnapshot = [];
 }
@@ -113,8 +119,41 @@ function attachListeners(currentPage) {
         consoleLogs.push(text);
         if (consoleLogs.length > MAX_LOGS)
             consoleLogs.shift();
+        const viteMessage = msg.text();
+        if (!viteMessage.includes("[vite]"))
+            return;
+        const event = parseViteLog(viteMessage);
+        hmrEvents.push(event);
+        if (hmrEvents.length > MAX_HMR_EVENTS)
+            hmrEvents.shift();
     });
 }
+function parseViteLog(message) {
+    const lower = message.toLowerCase();
+    const event = {
+        timestamp: Date.now(),
+        type: "log",
+        message,
+    };
+    if (lower.includes("connecting"))
+        event.type = "connecting";
+    else if (lower.includes("connected"))
+        event.type = "connected";
+    else if (lower.includes("hot updated"))
+        event.type = "update";
+    else if (lower.includes("page reload"))
+        event.type = "full-reload";
+    else if (lower.includes("disconnected") ||
+        lower.includes("failed to connect") ||
+        lower.includes("connection lost") ||
+        lower.includes("error")) {
+        event.type = "error";
+    }
+    const hotUpdateMatch = message.match(/hot updated:\s*(.+)$/i);
+    if (hotUpdateMatch?.[1])
+        event.path = hotUpdateMatch[1].trim();
+    return event;
+}
 export async function goto(url) {
     const currentPage = await ensurePage();
     await currentPage.goto(url, { waitUntil: "domcontentloaded" });
@@ -223,17 +262,202 @@ export async function viteRestart() {
 export async function viteHMR() {
     if (!page)
         throw new Error("browser not open");
+    return viteHMRTrace("summary", 20);
+}
+export async function viteRuntimeStatus() {
+    if (!page)
+        throw new Error("browser not open");
+    const runtime = await page.evaluate(() => {
+        const findViteClient = () => {
+            const scripts = Array.from(document.querySelectorAll("script[src]"));
+            return scripts.some((script) => script.getAttribute("src")?.includes("/@vite/client"));
+        };
+        const wsStateName = (wsState) => {
+            if (wsState == null)
+                return "unknown";
+            if (wsState === 0)
+                return "connecting";
+            if (wsState === 1)
+                return "open";
+            if (wsState === 2)
+                return "closing";
+            if (wsState === 3)
+                return "closed";
+            return "unknown";
+        };
+        const hot = window.__vite_hot;
+        const ws = hot?.ws || hot?.socket;
+        return {
+            url: location.href,
+            hasViteClient: findViteClient(),
+            wsState: wsStateName(ws?.readyState),
+            hasErrorOverlay: Boolean(document.querySelector("vite-error-overlay")),
+            timestamp: Date.now(),
+        };
+    });
+    const output = [];
+    output.push("# Vite Runtime");
+    output.push(`URL: ${runtime.url}`);
+    output.push(`Framework: ${framework}`);
+    output.push(`Vite Client: ${runtime.hasViteClient ? "loaded" : "not detected"}`);
+    output.push(`HMR Socket: ${runtime.wsState}`);
+    output.push(`Error Overlay: ${runtime.hasErrorOverlay ? "present" : "none"}`);
+    output.push(`Tracked HMR Events: ${hmrEvents.length}`);
+    const last = hmrEvents[hmrEvents.length - 1];
+    if (last) {
+        output.push(`Last HMR Event: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.message}`);
+    }
+    return output.join("\n");
+}
+export async function viteHMRTrace(mode, limit = 20) {
+    if (!page)
+        throw new Error("browser not open");
+    if (mode === "clear") {
+        hmrEvents.length = 0;
+        return "cleared HMR trace";
+    }
+    if (hmrEvents.length === 0) {
+        const fallback = await page.evaluate(() => {
+            const updates = window.__vite_hmr_updates || [];
+            return updates.slice(-20).map((u) => ({
+                timestamp: u.timestamp ?? Date.now(),
+                type: "update",
+                message: u.path ? `[vite] hot updated: ${u.path}` : "[vite] hot updated",
+                path: u.path,
+            }));
+        });
+        if (fallback.length > 0)
+            hmrEvents.push(...fallback);
+    }
+    if (hmrEvents.length === 0)
+        return "No HMR updates";
+    const safeLimit = Number.isFinite(limit) && limit > 0 ? Math.min(limit, 200) : 20;
+    const recent = hmrEvents.slice(-safeLimit);
+    if (mode === "summary") {
+        const counts = recent.reduce((acc, event) => {
+            acc[event.type] = (acc[event.type] ?? 0) + 1;
+            return acc;
+        }, {});
+        const lines = ["# HMR Summary"];
+        lines.push(`Events considered: ${recent.length}`);
+        lines.push(`Counts: ${Object.entries(counts)
+            .map(([k, v]) => `${k}=${v}`)
+            .join(", ")}`);
+        const last = recent[recent.length - 1];
+        lines.push(`Last: ${new Date(last.timestamp).toLocaleTimeString()} [${last.type}] ${last.path ?? last.message}`);
+        lines.push("\nUse `vite-browser vite hmr trace --limit <n>` for timeline details.");
+        return lines.join("\n");
+    }
+    return [
+        "# HMR Trace",
+        ...recent.map((event) => {
+            const detail = event.path ? `${event.path}` : event.message;
+            return `[${new Date(event.timestamp).toLocaleTimeString()}] ${event.type} ${detail}`;
+        }),
+    ].join("\n");
+}
+export async function viteModuleGraph(filter, limit = 200, mode = "snapshot") {
+    if (!page)
+        throw new Error("browser not open");
+    if (mode === "clear") {
+        lastModuleGraphUrls = null;
+        return "cleared module-graph baseline";
+    }
+    const moduleRows = await collectModuleRows(page);
+    const currentUrls = moduleRows.map((row) => row.url);
+    const previousUrls = lastModuleGraphUrls ? new Set(lastModuleGraphUrls) : null;
+    const currentSet = new Set(currentUrls);
+    lastModuleGraphUrls = [...currentUrls];
+    const normalizedFilter = filter?.trim().toLowerCase();
+    const safeLimit = Number.isFinite(limit) && limit > 0 ? Math.min(limit, 500) : 200;
+    if (mode === "trace") {
+        if (!previousUrls) {
+            return "No module-graph baseline. Captured current snapshot; run `vite module-graph trace` again.";
+        }
+        const added = currentUrls.filter((url) => !previousUrls.has(url));
+        const removed = [...previousUrls].filter((url) => !currentSet.has(url));
+        const addedFiltered = normalizedFilter
+            ? added.filter((url) => url.toLowerCase().includes(normalizedFilter))
+            : added;
+        const removedFiltered = normalizedFilter
+            ? removed.filter((url) => url.toLowerCase().includes(normalizedFilter))
+            : removed;
+        const lines = [];
+        lines.push("# Vite Module Graph Trace");
+        lines.push(`Added: ${addedFiltered.length}, Removed: ${removedFiltered.length}`);
+        lines.push("");
+        lines.push("## Added");
+        if (addedFiltered.length === 0)
+            lines.push("(none)");
+        else
+            addedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`+ ${url}`));
+        lines.push("");
+        lines.push("## Removed");
+        if (removedFiltered.length === 0)
+            lines.push("(none)");
+        else
+            removedFiltered.slice(0, safeLimit).forEach((url) => lines.push(`- ${url}`));
+        return lines.join("\n");
+    }
+    const filtered = moduleRows.filter((row) => normalizedFilter ? row.url.toLowerCase().includes(normalizedFilter) : true);
+    const limited = filtered.slice(0, safeLimit);
+    if (limited.length === 0)
+        return "No module resources found";
+    const lines = [];
+    lines.push("# Vite Module Graph (loaded resources)");
+    lines.push(`Total: ${filtered.length}${filtered.length > limited.length ? ` (showing ${limited.length})` : ""}`);
+    lines.push("# idx initiator ms url");
+    lines.push("");
+    limited.forEach((row, idx) => {
+        lines.push(`${idx} ${row.initiator} ${row.durationMs}ms ${row.url}`);
+    });
+    return lines.join("\n");
+}
+async function collectModuleRows(page) {
     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");
+        const isLikelyModuleUrl = (url) => {
+            if (!url)
+                return false;
+            if (url.includes("/@vite/"))
+                return true;
+            if (url.includes("/@id/"))
+                return true;
+            if (url.includes("/src/"))
+                return true;
+            if (url.includes("/node_modules/"))
+                return true;
+            return /\.(mjs|cjs|js|jsx|ts|tsx|vue|css)(\?|$)/.test(url);
+        };
+        const scripts = Array.from(document.querySelectorAll("script[src]")).map((node) => node.src);
+        const resources = performance
+            .getEntriesByType("resource")
+            .map((entry) => {
+            const item = entry;
+            return {
+                url: item.name,
+                initiator: item.initiatorType || "unknown",
+                durationMs: Number(item.duration.toFixed(1)),
+            };
+        })
+            .filter((entry) => isLikelyModuleUrl(entry.url));
+        const all = [
+            ...scripts
+                .filter((url) => isLikelyModuleUrl(url))
+                .map((url) => ({ url, initiator: "script-tag", durationMs: 0 })),
+            ...resources,
+        ];
+        const seen = new Set();
+        const unique = [];
+        for (const row of all) {
+            if (seen.has(row.url))
+                continue;
+            seen.add(row.url);
+            unique.push(row);
+        }
+        return unique;
     });
 }
-export async function errors() {
+export async function errors(mapped = false, inlineSource = false) {
     if (!page)
         throw new Error("browser not open");
     const errorInfo = await page.evaluate(() => {
@@ -246,7 +470,12 @@ export async function errors() {
     });
     if (!errorInfo)
         return "no errors";
-    return `${errorInfo.message ?? "Vite error"}\n\n${errorInfo.stack ?? ""}`.trim();
+    const raw = `${errorInfo.message ?? "Vite error"}\n\n${errorInfo.stack ?? ""}`.trim();
+    if (!mapped)
+        return raw;
+    const origin = new URL(page.url()).origin;
+    const mappedStack = await mapStackTrace(raw, origin, inlineSource);
+    return mappedStack;
 }
 export async function logs() {
     if (consoleLogs.length === 0)
@@ -271,3 +500,27 @@ export async function network(idx) {
         return networkLog.format();
     return networkLog.detail(idx);
 }
+async function mapStackTrace(stack, origin, inlineSource = false) {
+    const locationRegex = /(https?:\/\/[^\s)]+):(\d+):(\d+)/g;
+    const matches = Array.from(stack.matchAll(locationRegex));
+    if (matches.length === 0)
+        return stack;
+    const mappedLines = [];
+    for (const match of matches) {
+        const fileUrl = match[1];
+        const line = Number.parseInt(match[2], 10);
+        const column = Number.parseInt(match[3], 10);
+        if (!Number.isFinite(line) || !Number.isFinite(column))
+            continue;
+        const mapped = await resolveViaSourceMap(origin, fileUrl, line, column, inlineSource);
+        if (!mapped)
+            continue;
+        mappedLines.push(`- ${fileUrl}:${line}:${column} -> ${mapped.file}:${mapped.line}:${mapped.column}`);
+        if (inlineSource && mapped.snippet) {
+            mappedLines.push(`  ${mapped.snippet}`);
+        }
+    }
+    if (mappedLines.length === 0)
+        return stack;
+    return `${stack}\n\n# Mapped Stack\n${mappedLines.join("\n")}`;
+}

package/dist/cli.js

@@ -85,11 +85,45 @@ if (cmd === "vite" && arg === "restart") {
     exit(res, res.ok && res.data ? String(res.data) : "restarted");
 }
 if (cmd === "vite" && arg === "hmr") {
-    const res = await send("vite-hmr");
+    const sub = args[2];
+    if (sub === "clear") {
+        const res = await send("vite-hmr", { mode: "clear" });
+        exit(res, res.ok && res.data ? String(res.data) : "cleared HMR trace");
+    }
+    if (sub === "trace") {
+        const limitIdx = args.indexOf("--limit");
+        const limit = limitIdx >= 0 ? Number.parseInt(args[limitIdx + 1] ?? "20", 10) : 20;
+        const res = await send("vite-hmr", { mode: "trace", limit });
+        exit(res, res.ok && res.data ? String(res.data) : "");
+    }
+    const res = await send("vite-hmr", { mode: "summary", limit: 20 });
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vite" && arg === "runtime") {
+    const res = await send("vite-runtime");
+    exit(res, res.ok && res.data ? String(res.data) : "");
+}
+if (cmd === "vite" && arg === "module-graph") {
+    const sub = args[2];
+    const filterIdx = args.indexOf("--filter");
+    const limitIdx = args.indexOf("--limit");
+    const filter = filterIdx >= 0 ? args[filterIdx + 1] : undefined;
+    const limit = limitIdx >= 0 ? Number.parseInt(args[limitIdx + 1] ?? "200", 10) : 200;
+    if (sub === "clear") {
+        const res = await send("vite-module-graph", { mode: "clear" });
+        exit(res, res.ok && res.data ? String(res.data) : "cleared module-graph baseline");
+    }
+    if (sub === "trace") {
+        const res = await send("vite-module-graph", { mode: "trace", filter, limit });
+        exit(res, res.ok && res.data ? String(res.data) : "");
+    }
+    const res = await send("vite-module-graph", { mode: "snapshot", filter, limit });
     exit(res, res.ok && res.data ? String(res.data) : "");
 }
 if (cmd === "errors") {
-    const res = await send("errors");
+    const mapped = args.includes("--mapped");
+    const inlineSource = args.includes("--inline-source");
+    const res = await send("errors", { mapped, inlineSource });
     exit(res, res.ok && res.data ? String(res.data) : "no errors");
 }
 if (cmd === "logs") {
@@ -154,8 +188,18 @@ SVELTE COMMANDS
 
 VITE COMMANDS
   vite restart                        Restart Vite dev server
-  vite hmr                            Show HMR status
+  vite hmr                            Show HMR summary
+  vite hmr trace [--limit <n>]        Show HMR timeline
+  vite hmr clear                      Clear tracked HMR timeline
+  vite runtime                        Show Vite runtime status
+  vite module-graph [--filter <txt>] [--limit <n>]
+                                     Show loaded Vite module resources
+  vite module-graph trace [--filter <txt>] [--limit <n>]
+                                     Show module additions/removals since baseline
+  vite module-graph clear             Clear module-graph baseline
   errors                              Show build/runtime errors
+  errors --mapped                     Show errors with source-map mapping
+  errors --mapped --inline-source     Include mapped source snippets
   logs                                Show dev server logs
 
 UTILITIES

package/dist/daemon.js

@@ -96,11 +96,21 @@ async function run(cmd) {
         return { ok: true, data };
     }
     if (cmd.action === "vite-hmr") {
-        const data = await browser.viteHMR();
+        const hmrMode = cmd.mode === "trace" || cmd.mode === "clear" ? cmd.mode : "summary";
+        const data = await browser.viteHMRTrace(hmrMode, cmd.limit ?? 20);
+        return { ok: true, data };
+    }
+    if (cmd.action === "vite-runtime") {
+        const data = await browser.viteRuntimeStatus();
+        return { ok: true, data };
+    }
+    if (cmd.action === "vite-module-graph") {
+        const graphMode = cmd.mode === "trace" || cmd.mode === "clear" ? cmd.mode : "snapshot";
+        const data = await browser.viteModuleGraph(cmd.filter, cmd.limit ?? 200, graphMode);
         return { ok: true, data };
     }
     if (cmd.action === "errors") {
-        const data = await browser.errors();
+        const data = await browser.errors(Boolean(cmd.mapped), Boolean(cmd.inlineSource));
         return { ok: true, data };
     }
     if (cmd.action === "logs") {

package/dist/sourcemap.d.ts

@@ -0,0 +1,8 @@
+type MappedLocation = {
+    file: string;
+    line: number;
+    column: number;
+    snippet?: string;
+};
+export declare function resolveViaSourceMap(origin: string, fileUrl: string, line: number, column: number, includeSnippet?: boolean): Promise<MappedLocation | null>;
+export {};

package/dist/sourcemap.js

@@ -0,0 +1,71 @@
+import { SourceMapConsumer } from "source-map-js";
+const consumers = new Map();
+export async function resolveViaSourceMap(origin, fileUrl, line, column, includeSnippet = false) {
+    const consumer = await loadConsumer(origin, fileUrl);
+    if (!consumer)
+        return null;
+    const position = consumer.originalPositionFor({
+        line,
+        column: Math.max(0, column - 1),
+    });
+    if (!position.source || position.line == null || position.column == null)
+        return null;
+    const mapped = {
+        file: cleanSource(position.source),
+        line: position.line,
+        column: position.column + 1,
+    };
+    if (includeSnippet) {
+        mapped.snippet = snippetFor(consumer, position.source, position.line);
+    }
+    return mapped;
+}
+async function loadConsumer(origin, fileUrl) {
+    const candidates = buildMapCandidates(origin, fileUrl);
+    for (const url of candidates) {
+        if (consumers.has(url)) {
+            const cached = consumers.get(url);
+            if (cached)
+                return cached;
+            continue;
+        }
+        const response = await fetch(url, { signal: AbortSignal.timeout(5000) }).catch(() => null);
+        if (!response?.ok) {
+            consumers.set(url, null);
+            continue;
+        }
+        const map = await response.json().catch(() => null);
+        if (!map) {
+            consumers.set(url, null);
+            continue;
+        }
+        const consumer = new SourceMapConsumer(map);
+        consumers.set(url, consumer);
+        return consumer;
+    }
+    return null;
+}
+function buildMapCandidates(origin, fileUrl) {
+    const url = new URL(fileUrl, origin);
+    const basePath = `${url.pathname}.map`;
+    const withSearch = url.search ? `${basePath}${url.search}` : basePath;
+    // Try preserving query first (Vite often keeps cache-busting query params).
+    return [`${origin}${withSearch}`, `${origin}${basePath}`];
+}
+function cleanSource(source) {
+    const decoded = decodeURIComponent(source.replace(/^file:\/\//, ""));
+    const nodeModulesIndex = decoded.lastIndexOf("/node_modules/");
+    if (nodeModulesIndex >= 0)
+        return decoded.slice(nodeModulesIndex + 1);
+    return decoded;
+}
+function snippetFor(consumer, source, line) {
+    const content = consumer.sourceContentFor(source, true);
+    if (!content)
+        return undefined;
+    const lines = content.split(/\r?\n/);
+    const sourceLine = lines[line - 1];
+    if (!sourceLine)
+        return undefined;
+    return `${line} | ${sourceLine.trim()}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presto1314w/vite-devtools-browser",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "CLI for programmatic access to Vue/React DevTools in Vite applications",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,11 @@
     "build": "tsc -p tsconfig.build.json",
     "prepack": "pnpm build",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:evals": "vitest run --dir test/evals",
+    "test:evals:ci": "vitest run --dir test/evals --coverage --reporter=default",
+    "test:evals:e2e": "pnpm build && vitest run --config vitest.e2e.config.ts"
   },
   "dependencies": {
     "playwright": "^1.50.0",
@@ -36,6 +40,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/devtools-kit": "^7.3.2",
     "@vue/devtools-api": "^7.3.2",
     "tsx": "^4.20.6",