Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SvelteKit config #68

Closed
deshartman opened this issue Feb 23, 2022 · 13 comments · Fixed by #137
Closed

SvelteKit config #68

deshartman opened this issue Feb 23, 2022 · 13 comments · Fixed by #137

Comments

@deshartman
Copy link

Is there a way to enable DevTools for SvelteKit?

@vhscom
Copy link

vhscom commented Apr 11, 2022

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
Copy link

Jakeii commented Apr 22, 2022

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

@vhscom
Copy link

vhscom commented Apr 22, 2022

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
Copy link

Jakeii commented Apr 22, 2022

@vhscom works out of the box on firefox 99.0.1
Screenshot 2022-04-22 at 18 25 39

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

@vhscom
Copy link

vhscom commented Apr 23, 2022

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
Copy link

vhscom commented May 9, 2022

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
Copy link

vhscom commented May 27, 2022

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
Copy link

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
Copy link

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

@mgrubinger
Copy link

@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
Copy link

@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.

image

@dominikg
Copy link
Member

dominikg commented Oct 3, 2022

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

@mshamaseen
Copy link

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants