No Svelte app detected on SvelteKit

SapiensAnatis commented 6 months ago

Thanks for making this extension! In my day job I find the react devtools to be very useful so was excited to learn there is something similar for Svelte. Unfortunately I cannot get it to work on my system :(

Describe the bug The extension panel is visible, but the dev tools will not open

To Reproduce This happens on my main project, but I was able to reproduce with the template:

$ pnpm create svelte@latest my-app
$ cd my-app 
$ pnpm install
$ pnpm run dev -- --open

then in Firefox and Chromium I get

Svelte DevTools

No Svelte app detected

Not working? Did you...

    Build with dev mode enabled?
    Use Svelte version ^4.0.0?

The options I used in the template were

create-svelte version 6.2.0

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  No
│
◇  Select additional options (use arrow keys/space bar)
│  none
│
└  Your project is ready!

The package.json of the demo app shows it is Svelte 4,

{
        "name": "my-app",
        "version": "0.0.1",
        "scripts": {
                "dev": "vite dev",
                "build": "vite build",
                "preview": "vite preview"
        },
        "devDependencies": {
                "@fontsource/fira-mono": "^4.5.10",
                "@neoconfetti/svelte": "^1.0.0",
                "@sveltejs/adapter-auto": "^3.0.0",
                "@sveltejs/kit": "^2.0.0",
                "@sveltejs/vite-plugin-svelte": "^3.0.0",
                "svelte": "^4.2.7",
                "vite": "^5.0.3"
        },
        "type": "module"
}

And SvelteKit should set the dev mode automatically (indeed, import { dev } from '$app/environment' is true)

Expected behavior The dev tools appear and allow me to inspect my app

Environment

Browser version: Firefox 126 / Chromium 125
OS version: Linux / OpenSUSE Tumbleweed
Devtools version: 2.2.1, downloaded from https://github.com/sveltejs/svelte-devtools/releases/tag/v2.2.1 or Chrome Web store
Svelte version: 4.2.17 (based on pnpm-lock.yaml)

ignatiusmb commented 6 months ago

Hey, thanks for giving it a try! If the panel is visible, then the extension should be working as expected. Can you try...

with no other extensions enabled, or
on a fresh install of a browser with just the devtools, or
on a different machine/OS?

Otherwise, I don't really know what else could be causing the issue there, I might need you to install from a temporary branch with some logging and see if it prints anything for you. I'll create and push it when all the following above doesn't work.

On that note, if you're downloading from the releases tab and installing it from the .zip file (not .xpi), you're probably running it as an unpacked extension, and it might have limited site access or some other restricted permissions that needs to be enabled in the settings.

SapiensAnatis commented 5 months ago

Ah - I got it to work, I needed to click on the extension menu and grant it permissions for localhost. 🤦

Sorry for the user error!

t1u1 commented 3 months ago

I am facing the same problem on Firefox and I have tried granting it permissions for localhost as well as all websites. But it still shows the same error: "No Svelte app detected"

Firefox 128.0.3 Svelte Devtools 2.2.2 installed from releases page Svelte 4.2.18 Svelte-kit 2.5.18

I have tried in both Incognito tab as well as normal tab.

Edit: Sorry, I just now tried again in normal tab and it is working fine. Not working in incognito tab even though I have granted the permission.

sveltejs / svelte-devtools

No Svelte app detected on SvelteKit #219