@presto1314w/vite-devtools-browser 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +118 -112
  2. package/dist/browser.js +34 -20
  3. package/dist/cli.js +12 -6
  4. package/dist/client.js +6 -1
  5. package/dist/daemon.js +8 -2
  6. package/package.json +10 -2
package/README.md CHANGED
@@ -1,112 +1,118 @@
1
- # vite-browser
2
-
3
- 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.
4
-
5
- ## Installation
6
-
7
- ```bash
8
- npm install -g @presto1314w/vite-devtools-browser
9
- npx playwright install chromium
10
- ```
11
-
12
- ## Quick Start
13
-
14
- ```bash
15
- # Start your Vite dev server
16
- cd my-vue-app
17
- npm run dev
18
-
19
- # In another terminal
20
- vite-browser open http://localhost:5173
21
- vite-browser detect # vue@3.5.29 / react@19.x / svelte@x
22
- vite-browser vue tree # Vue component tree
23
- vite-browser react tree # React component tree
24
- vite-browser svelte tree # Svelte component tree (best effort)
25
- vite-browser screenshot # Take screenshot
26
- vite-browser logs # Console logs
27
- vite-browser network # Network requests
28
- vite-browser close
29
- ```
30
-
31
- ## Features
32
-
33
- - Framework Detection: Auto-detect Vue, React, Svelte and versions (best effort)
34
- - Vue DevTools: Component tree, props, state, computed properties, source locations
35
- - React DevTools: Component tree + component inspection (props/hooks/state/context)
36
- - Svelte Support: Component tree + component detail inspection when runtime metadata is available
37
- - Pinia Integration: Inspect store state and getters
38
- - Vue Router: Current route, params, query, all routes
39
- - Network Monitoring: Track requests, headers, bodies, and response payloads
40
- - Console Logs: Capture console.log, warn, error, debug
41
- - Screenshots: Full-page PNG screenshots
42
- - JavaScript Evaluation: Run arbitrary JS in page context
43
- - Vite Integration: Error tracking, HMR monitoring
44
-
45
- ## Commands
46
-
47
- ### Browser Control
48
- ```bash
49
- vite-browser open <url> # Launch browser and navigate
50
- vite-browser close # Close browser and daemon
51
- vite-browser goto <url> # Navigate to URL
52
- vite-browser back # Go back
53
- vite-browser reload # Reload page
54
- ```
55
-
56
- ### Framework Detection
57
- ```bash
58
- vite-browser detect # Detect framework and version
59
- ```
60
-
61
- ### Vue DevTools
62
- ```bash
63
- vite-browser vue tree # Show component tree
64
- vite-browser vue tree <id> # Inspect component details
65
- vite-browser vue pinia # List all Pinia stores
66
- vite-browser vue pinia <store> # Inspect specific store
67
- vite-browser vue router # Show router information
68
- ```
69
-
70
- ### React DevTools
71
- ```bash
72
- vite-browser react tree # Show React component tree
73
- vite-browser react tree <id> # Inspect props/hooks/state/context/source
74
- ```
75
-
76
- ### Svelte
77
- ```bash
78
- vite-browser svelte tree # Show Svelte component tree
79
- vite-browser svelte tree <id> # Inspect Svelte component details
80
- ```
81
-
82
- ### Debugging
83
- ```bash
84
- vite-browser screenshot # Take full-page screenshot
85
- vite-browser eval <script> # Run JavaScript in page
86
- vite-browser logs # Show console logs
87
- vite-browser errors # Show Vite errors
88
- vite-browser network # List network requests
89
- vite-browser network <idx> # Inspect specific request
90
- ```
91
-
92
- ## Architecture
93
-
94
- - Daemon + Socket: Background process with socket communication
95
- - Playwright: Headed Chromium browser
96
- - One Browser, One Page: Single persistent browser instance
97
- - Auto-start: Daemon starts automatically on first command
98
-
99
- ## Requirements
100
-
101
- - Node.js 20+
102
- - Chromium (via Playwright)
103
- - Vite dev server running
104
- - Vue/React/Svelte app for framework-specific commands
105
-
106
- ## Documentation
107
-
108
- See [SKILL.md](./skills/SKILL.md) for complete command reference and usage examples.
109
-
110
- ## License
111
-
112
- MIT
1
+ # vite-browser
2
+
3
+ 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.
4
+
5
+ ## Skills
6
+
7
+ ```bash
8
+ npx skills add MapleCity1314/vite-browser
9
+ ```
10
+
11
+ ## CLI Installation (Optional)
12
+
13
+ ```bash
14
+ npm install -g @presto1314w/vite-devtools-browser
15
+ npx playwright install chromium
16
+ ```
17
+
18
+ ## Quick Start
19
+
20
+ ```bash
21
+ # Start your Vite dev server
22
+ cd my-vue-app
23
+ npm run dev
24
+
25
+ # In another terminal
26
+ vite-browser open http://localhost:5173
27
+ vite-browser detect # vue@3.5.29 / react@19.x / svelte@x
28
+ vite-browser vue tree # Vue component tree
29
+ vite-browser react tree # React component tree
30
+ vite-browser svelte tree # Svelte component tree (best effort)
31
+ vite-browser screenshot # Take screenshot
32
+ vite-browser logs # Console logs
33
+ vite-browser network # Network requests
34
+ vite-browser close
35
+ ```
36
+
37
+ ## Features
38
+
39
+ - Framework Detection: Auto-detect Vue, React, Svelte and versions (best effort)
40
+ - Vue DevTools: Component tree, props, state, computed properties, source locations
41
+ - React DevTools: Component tree + component inspection (props/hooks/state/context)
42
+ - Svelte Support: Component tree + component detail inspection when runtime metadata is available
43
+ - Pinia Integration: Inspect store state and getters
44
+ - Vue Router: Current route, params, query, all routes
45
+ - Network Monitoring: Track requests, headers, bodies, and response payloads
46
+ - Console Logs: Capture console.log, warn, error, debug
47
+ - Screenshots: Full-page PNG screenshots
48
+ - JavaScript Evaluation: Run arbitrary JS in page context
49
+ - Vite Integration: Error tracking, HMR monitoring
50
+
51
+ ## Commands
52
+
53
+ ### Browser Control
54
+ ```bash
55
+ vite-browser open <url> # Launch browser and navigate
56
+ vite-browser close # Close browser and daemon
57
+ vite-browser goto <url> # Navigate to URL
58
+ vite-browser back # Go back
59
+ vite-browser reload # Reload page
60
+ ```
61
+
62
+ ### Framework Detection
63
+ ```bash
64
+ vite-browser detect # Detect framework and version
65
+ ```
66
+
67
+ ### Vue DevTools
68
+ ```bash
69
+ vite-browser vue tree # Show component tree
70
+ vite-browser vue tree <id> # Inspect component details
71
+ vite-browser vue pinia # List all Pinia stores
72
+ vite-browser vue pinia <store> # Inspect specific store
73
+ vite-browser vue router # Show router information
74
+ ```
75
+
76
+ ### React DevTools
77
+ ```bash
78
+ vite-browser react tree # Show React component tree
79
+ vite-browser react tree <id> # Inspect props/hooks/state/context/source
80
+ ```
81
+
82
+ ### Svelte
83
+ ```bash
84
+ vite-browser svelte tree # Show Svelte component tree
85
+ vite-browser svelte tree <id> # Inspect Svelte component details
86
+ ```
87
+
88
+ ### Debugging
89
+ ```bash
90
+ vite-browser screenshot # Take full-page screenshot
91
+ vite-browser eval <script> # Run JavaScript in page
92
+ vite-browser logs # Show console logs
93
+ vite-browser errors # Show Vite errors
94
+ vite-browser network # List network requests
95
+ vite-browser network <idx> # Inspect specific request
96
+ ```
97
+
98
+ ## Architecture
99
+
100
+ - Daemon + Socket: Background process with socket communication
101
+ - Playwright: Headed Chromium browser
102
+ - One Browser, One Page: Single persistent browser instance
103
+ - Auto-start: Daemon starts automatically on first command
104
+
105
+ ## Requirements
106
+
107
+ - Node.js 20+
108
+ - Chromium (via Playwright)
109
+ - Vite dev server running
110
+ - Vue/React/Svelte app for framework-specific commands
111
+
112
+ ## Documentation
113
+
114
+ See [SKILL.md](./skills/SKILL.md) for complete command reference and usage examples.
115
+
116
+ ## License
117
+
118
+ MIT
package/dist/browser.js CHANGED
@@ -19,15 +19,7 @@ const consoleLogs = [];
19
19
  const MAX_LOGS = 200;
20
20
  let lastReactSnapshot = [];
21
21
  export async function open(url) {
22
- if (!context) {
23
- context = await launch();
24
- page = context.pages()[0] ?? (await context.newPage());
25
- attachListeners(page);
26
- networkLog.attach(page);
27
- }
28
- const currentPage = page;
29
- if (!currentPage)
30
- throw new Error("browser not open");
22
+ const currentPage = await ensurePage();
31
23
  if (url) {
32
24
  await currentPage.goto(url, { waitUntil: "domcontentloaded" });
33
25
  await detectFramework();
@@ -48,6 +40,31 @@ export async function close() {
48
40
  networkLog.clear();
49
41
  lastReactSnapshot = [];
50
42
  }
43
+ async function ensurePage() {
44
+ if (!contextUsable(context)) {
45
+ await close();
46
+ context = await launch();
47
+ }
48
+ if (!context)
49
+ throw new Error("browser not open");
50
+ if (!page || page.isClosed()) {
51
+ page = context.pages()[0] ?? (await context.newPage());
52
+ attachListeners(page);
53
+ networkLog.attach(page);
54
+ }
55
+ return page;
56
+ }
57
+ function contextUsable(current) {
58
+ if (!current)
59
+ return false;
60
+ try {
61
+ current.pages();
62
+ return true;
63
+ }
64
+ catch {
65
+ return false;
66
+ }
67
+ }
51
68
  async function launch() {
52
69
  if (hasReactExtension && installHook) {
53
70
  const ctx = await chromium.launchPersistentContext("", {
@@ -78,22 +95,19 @@ function attachListeners(currentPage) {
78
95
  });
79
96
  }
80
97
  export async function goto(url) {
81
- if (!page)
82
- throw new Error("browser not open");
83
- await page.goto(url, { waitUntil: "domcontentloaded" });
98
+ const currentPage = await ensurePage();
99
+ await currentPage.goto(url, { waitUntil: "domcontentloaded" });
84
100
  await detectFramework();
85
- return page.url();
101
+ return currentPage.url();
86
102
  }
87
103
  export async function back() {
88
- if (!page)
89
- throw new Error("browser not open");
90
- await page.goBack({ waitUntil: "domcontentloaded" });
104
+ const currentPage = await ensurePage();
105
+ await currentPage.goBack({ waitUntil: "domcontentloaded" });
91
106
  }
92
107
  export async function reload() {
93
- if (!page)
94
- throw new Error("browser not open");
95
- await page.reload({ waitUntil: "domcontentloaded" });
96
- return page.url();
108
+ const currentPage = await ensurePage();
109
+ await currentPage.reload({ waitUntil: "domcontentloaded" });
110
+ return currentPage.url();
97
111
  }
98
112
  export async function detectFramework() {
99
113
  if (!page)
package/dist/cli.js CHANGED
@@ -13,6 +13,7 @@ if (cmd === "open") {
13
13
  console.error("usage: vite-browser open <url> [--cookies-json <file>]");
14
14
  process.exit(1);
15
15
  }
16
+ const url = normalizeUrl(arg);
16
17
  const cookieIdx = args.indexOf("--cookies-json");
17
18
  const cookieFile = cookieIdx >= 0 ? args[cookieIdx + 1] : undefined;
18
19
  if (cookieFile) {
@@ -21,15 +22,15 @@ if (cmd === "open") {
21
22
  exit(res, "");
22
23
  const raw = readFileSync(cookieFile, "utf-8");
23
24
  const cookies = JSON.parse(raw);
24
- const domain = new URL(arg).hostname;
25
+ const domain = new URL(url).hostname;
25
26
  const cRes = await send("cookies", { cookies, domain });
26
27
  if (!cRes.ok)
27
28
  exit(cRes, "");
28
- await send("goto", { url: arg });
29
- exit(res, `opened -> ${arg} (${cookies.length} cookies for ${domain})`);
29
+ await send("goto", { url });
30
+ exit(res, `opened -> ${url} (${cookies.length} cookies for ${domain})`);
30
31
  }
31
- const res = await send("open", { url: arg });
32
- exit(res, `opened -> ${arg}`);
32
+ const res = await send("open", { url });
33
+ exit(res, `opened -> ${url}`);
33
34
  }
34
35
  if (cmd === "close") {
35
36
  const res = await send("close");
@@ -40,7 +41,7 @@ if (cmd === "goto") {
40
41
  console.error("usage: vite-browser goto <url>");
41
42
  process.exit(1);
42
43
  }
43
- const res = await send("goto", { url: arg });
44
+ const res = await send("goto", { url: normalizeUrl(arg) });
44
45
  exit(res, res.ok ? `-> ${res.data}` : "");
45
46
  }
46
47
  if (cmd === "back") {
@@ -166,3 +167,8 @@ OPTIONS
166
167
  -h, --help Show this help message
167
168
  `);
168
169
  }
170
+ function normalizeUrl(value) {
171
+ if (value.includes("://"))
172
+ return value;
173
+ return `http://${value}`;
174
+ }
package/dist/client.js CHANGED
@@ -40,7 +40,7 @@ function daemonAlive() {
40
40
  }
41
41
  catch {
42
42
  rmSync(pidFile, { force: true });
43
- rmSync(socketPath, { force: true });
43
+ removeSocketFile();
44
44
  return false;
45
45
  }
46
46
  }
@@ -70,3 +70,8 @@ function ok(s) {
70
70
  function no() {
71
71
  return false;
72
72
  }
73
+ function removeSocketFile() {
74
+ if (process.platform === "win32")
75
+ return;
76
+ rmSync(socketPath, { force: true });
77
+ }
package/dist/daemon.js CHANGED
@@ -3,7 +3,7 @@ import { mkdirSync, writeFileSync, rmSync } from "node:fs";
3
3
  import * as browser from "./browser.js";
4
4
  import { socketDir, socketPath, pidFile } from "./paths.js";
5
5
  mkdirSync(socketDir, { recursive: true, mode: 0o700 });
6
- rmSync(socketPath, { force: true });
6
+ removeSocketFile();
7
7
  rmSync(pidFile, { force: true });
8
8
  writeFileSync(pidFile, String(process.pid));
9
9
  const server = createServer((socket) => {
@@ -127,6 +127,12 @@ function shutdown() {
127
127
  process.exit(0);
128
128
  }
129
129
  function cleanup() {
130
- rmSync(socketPath, { force: true });
130
+ removeSocketFile();
131
131
  rmSync(pidFile, { force: true });
132
132
  }
133
+ function removeSocketFile() {
134
+ // Windows named pipes are not filesystem entries, so unlinking them fails with EPERM.
135
+ if (process.platform === "win32")
136
+ return;
137
+ rmSync(socketPath, { force: true });
138
+ }
package/package.json CHANGED
@@ -1,8 +1,16 @@
1
1
  {
2
2
  "name": "@presto1314w/vite-devtools-browser",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "CLI for programmatic access to Vue/React DevTools in Vite applications",
5
5
  "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/MapleCity1314/vite-browser.git"
9
+ },
10
+ "homepage": "https://github.com/MapleCity1314/vite-browser#readme",
11
+ "bugs": {
12
+ "url": "https://github.com/MapleCity1314/vite-browser/issues"
13
+ },
6
14
  "type": "module",
7
15
  "engines": {
8
16
  "node": ">=20"
@@ -14,7 +22,7 @@
14
22
  "vite-browser": "./dist/cli.js"
15
23
  },
16
24
  "scripts": {
17
- "start": "node --loader tsx src/cli.ts",
25
+ "start": "node --import tsx src/cli.ts",
18
26
  "dev": "tsx src/cli.ts",
19
27
  "typecheck": "tsc --noEmit",
20
28
  "build": "tsc -p tsconfig.build.json",