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:

• "+ Coletar" button (always visible, next to the Svelte logo): click it once to enter collector mode, then click any element on the page to add its file:line:column to the list. No keyboard shortcut needed. Click the button again to exit.
• Ctrl+click (or Cmd+click on macOS) on an element with the inspector active → also adds file:line:column to the list. Use this if you prefer the keyboard-modifier flow over the dedicated button.
• A small badge appears showing how many paths are collected. Click it 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 (no modifier, no collector mode) 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.