SvelteKit config

[deshartman]

Is there a way to enable DevTools for SvelteKit?

[vhscom]

For grins I added the following to my SvelteKit config only half-expecting it to work:

import svelte from 'rollup-plugin-svelte';

const config = {
  kit: {
    adapter: adapter(),
    vite: {
      build: {
        rollupOptions: {
          plugins: [ svelte({ compilerOptions: { dev: true } }) ]
        }
      },
      /* snip */
    }
  }
}

But nada.

I didn't dig any deeper as the inspector in DevTools proper is enough for my needs. Though I thought it would be nice to get a more focused slice of the data while I was building a model. If this does or were to work with SvelteKit, I would expect it to work out of the box with no additional peer dependency installation required.

[Jakeii]

SvelteKit works out of the box for me, always has!

[vhscom]

15 upvotes since late February suggests either a browser update or SvelteKit version change caused the issue. @Jakeii what browser are you using that still works today on current builds of SvelteKit with this extension?

[Jakeii]

@vhscom works out of the box on firefox 99.0.1

Just checked chrome and I see it doesn't work there

[vhscom]

Just checked chrome and I see it doesn't work there

Thank you @Jakeii. I can confirm this works with LibreWolf Version 97.0-2 (64-bit) as well. Seems to be a Chromium-specific issue. I'm fairly confident it was working a few months ago on Chromium under Linux. Right now I'm on macOS. Will wait for others to chime in with more environment info to help isolate the issue. Cheers.

[vhscom]

There's now a hot key activated inspector built into vite-plugin-svelte. Unlike this tool it utilizes a popover which is novel but I'd still like to see all of my data together in one under dev tools.

[vhscom]

There's now a hot key activated inspector built into vite-plugin-svelte.

I learned from @dominikg how to enable it.

experimental: {
  inspector: true
}

Add the above to svelte.config.js at the same level as kit and save the file. Press Cmd+Shift to activate or customize options.

Reference config to example. See StackBlitz for demo.

[nrthbound]

There's now a hot key activated inspector built into vite-plugin-svelte.

I learned from @dominikg how to enable it.

experimental: {
  inspector: true
}

Add the above to svelte.config.js at the same level as kit and save the file. Press Cmd+Shift to activate or customize options.

Reference config to example. See StackBlitz for demo.

This doesn't really do anything useful as far as I can tell though. I can't monitor variables and see what the data is doing as I work through some testing scenarios. Am I missing something about this? After setting it up, it just lets me click the little Svelte logo and click on something on the page, which will take me to that line in VS Code. Not sure what I'm missing.

[mshamaseen]

Any fix for this so far? experimental didn't work for me.

[mgrubinger]

@mshamaseen – Did you update to @sveltejs/kit@next and vite@latest? experimental now needs to be wrapped in vitePlugin which is a sibling of the kit key, like this:

const config = {
  kit: {
    // [....] kit options
  },
  vitePlugin: {
    experimental: {
      inspector: {
        showToggleButton: "always",
        toggleButtonPos: "bottom-right",
      },
    },
  },
};

see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#experimental-options

[mshamaseen]

@mgrubinger here is my svelte.conf.js file:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        adapter: adapter()
    },
    vitePlugin: {
        experimental: {
            inspector: {
                showToggleButton: "always",
                toggleButtonPos: "bottom-right",
            },
        }
    }
};

export default config;

Now I can see the Svelte icon on the bottom-right, but I expected it to show information on the browser inspection. It keeps saying To connect to Svelte perform a hard refresh (ctrl+F5) or click here.

I tried to click on it and click on an item on the page, but nothing happened on the browser inspection side.

[dominikg]

svelte inspector is a different tool, not related to svelte-devtools and not a browser extension.

[mshamaseen]

@dominikg Oh, I see. I'm looking to activate the dev tool, I'm using Chrome (Version 106.0.5249.91 (Official Build) (64-bit)) on Linux 22.04 and the dev tool doesn't work. I tried Firefox tho, it is working there.

Any info I can provide to help?