svelte-inspector-collector

A fork of @sveltejs/vite-plugin-svelte-inspector that adds a path collector for AI-assisted workflows.

What it does

The stock Svelte Inspector lets you click any element in the browser to open its source file in your editor. This fork keeps that behavior and adds:

• Ctrl+click (or Cmd+click on macOS) on an element → adds file:line:column to a floating collector panel.
• A small badge appears next to the Svelte logo showing how many paths are collected.
• Click the badge to open the panel: list of collected paths, remove individual entries, Copy all button.
• Paste the copied list into a Claude Code prompt (or any other AI terminal/tool) to tell the model exactly which files to edit and where.

Regular click still opens the file in your editor — original behavior is preserved.

Install

npm install github:brpl20/svelte-inspector-collector --save-dev

Setup

1. Enable the stock inspector in svelte.config.js

The fork piggybacks on the stock inspector's virtual module system. You still need to enable the inspector option:

// svelte.config.js
const config = {
    // ...
    vitePlugin: {
        inspector: {
            toggleKeyCombo: 'alt-x',
            showToggleButton: 'always',
            toggleButtonPos: 'bottom-right',
            holdMode: false
        }
    }
};
export default config;

2. Register the fork plugin in vite.config.js (before sveltekit())

import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteInspectorFork } from 'svelte-inspector-collector';

export default defineConfig({
    plugins: [svelteInspectorFork(), sveltekit()]
});

That's it. Restart your dev server and the collector is active whenever the inspector is on.

How it works

The stock inspector loads its UI via a virtual Vite module:

virtual:svelte-inspector-path:Inspector.svelte

This plugin has enforce: 'pre' + apply: 'serve' and intercepts that one ID, redirecting it to the forked Inspector.svelte shipped with this package. Nothing in node_modules is patched, and the fork is only active in dev (apply: 'serve') — production builds are unaffected.

Copy format

The copy button writes one path per line:

src/routes/lessons/modulo-02/+page.md:53:5
src/lib/components/Dica.svelte:12:3

Paste straight into your AI prompt: "edit these files to change X:" followed by the list.

Upstream

Original Svelte Inspector source and documentation: https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte. Upstream MIT license preserved in LICENSE.

License

MIT — see LICENSE.