Svelte DevTools shows the "Not Working?" text in Electron

[andrejp88]

Describe the bug When running this extension in electron, the Svelte DevTool panel does not show any Svelte debug information (see screenshot below).

To Reproduce

1. Create a Svelte + Electron app using svelte-electron-boilerplate
2. Install electron-devtools-installer
3. Configure the installer to install svelte-devtools.
4. Run the app (yarn electron-dev)

At this point, a warning will print in the console:

ExtensionLoadWarning: Warnings loading extension at /home/...[snip]: Unrecognized manifest key 'update_url'. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

5. In the running app, open the developer tools and select the Svelte panel. It should look like this:

6. Click "click here", or click "View -> Force Reload", but it doesn't fix it.

I have double-checked the version of Svelte that yarn installs (3.24.1), and made sure it's running in dev mode (by changing dev: !production to dev: true in the rollup config).

Expected behavior Svelte-devtools loads without issue and is usable from the devtools panel.

Environment

• Electron version 9.2.1 (same issue occurs with 11.2.3)
• Devtools version 1.3.0 (according to the manifest.json in the path shown in the above warning).
• Svelte version 3.24.1

Additional Context Visiting localhost:5000 in an actual Chromium browser with the extension installed works fine. The DevTools panel does show the "Not Working?" text at first, but after a refresh it works as expected.

[santiagogdo]

Yeah, I'm having this issue too. In my case, I configured electron manually to load the svelte devtools instead of using the svelte-electron-boilerplate package. Would love some help with this!

[RedHatter]

Supporting electron for the browser package is non-trivial and is not planned. However the recently released Svelte DevTools Standalone should work fine.

The only caveat is that nativeWindowOpen must be enabled.

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    nativeWindowOpen: true
  }
});

After that simply add the script tag to the top of your head.

<script src="https://cdn.jsdelivr.net/gh/redhatter/svelte-devtools-standalone@master/dist/standalone.js"></script>

I apologize for the late reply, I have been developing Svelte DevTools Standalone and wanted to make sure it was working and usable with electron before I responded. Let me know if you have any issue.

[santiagogdo]

@RedHatter I'm trying it and so far it seems to be working great! The only issue I noticed is that if the electron app has frame disabled, the devtool window can't be dragged (nor closed, maximized or minimized of course). I'm not sure how difficult would be to fix this, but for the moment, the workaround is enabling the frame.

Thanks for the good work!