sveltejs / svelte-devtools

A browser extension to inspect Svelte application by extending your browser devtools capabilities

Svelte DevTools

Svelte DevTools is a browser extension for the Svelte framework. It allows you to inspect the Svelte state and component hierarchies in the Developer Tools.

After installing you will see a new tab in Developer Tools. This tab displays a tree of Svelte components, HTMLx blocks, and DOM elements that were rendered on the page. By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right.

For Firefox users, you can grab the .zip file of the latest version from the GitHub releases page and load it as a temporary extension. Note that you may need to enable "Always Allow on localhost" in the extension settings.

Requirements

The svelte-devtools extension requires the following to be true:

• Chrome or Firefox version 121 or higher
• Application running Svelte version ^4.0.0
• Application compiled with dev: true (SvelteKit does this automatically for you)

Development

Clone this repository, setup and run the build script

git clone https://github.com/sveltejs/svelte-devtools.git
cd svelte-devtools
pnpm install
pnpm build

This will build the codebase and output all the required files in the build directory. To load the extension for development, follow these steps:

1. Navigate to the extensions settings page
2. Turn on the 'Developer mode' switch
3. Click 'Load Unpacked' and select the build directory

Acknowledgements

• This extension was initially created and developed by RedHatter

svelte-devtools's Issues

question about #anchor

What are "anchors"? I see that I can enable and disable showing this from the eyeball menu. When enabled I see lots of lines containing "#anchor" on the left side. They don't seem related to HTML tags. What do they represent? Maybe add this to the README.

Can't get working svelte devtools in Chrome with svelte new version 3.46.4

Describe the bug
I just update svelte latest version: 3.46.4 and dev: true in rollup.config.js.
But It can't work svelte dev tools in Chrome, I rerun many times and config same as the document: https://github.com/RedHatter/svelte-devtools

Environment

• Ubuntu 20.04
• Browser with version: Chrome Version 99.0.4844.51
• Devtools version: 1.3.0
• Svelte version: 3.46.4

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

Describe the bug
I just updated to version 3.0.0 of svelte-loader and I noticed that it broke dev tools. When I downgraded back to ^2.13.0 everything works fine.

To Reproduce
Steps to reproduce the behavior:

1. Update to "svelte-loader": "^3.0.0"
2. Build your app in dev mode
3. Open the dev tools
4. You will get the Svelte DevTools Not Working error

Additional context
I believe it has to do with this change in the new svelte-loader: compiler options must now be specified under compilerOptions. I have not tested this supposition though.

Thanks for your work with the devtools. It's been so helpful that I am not updating svelte-loader yet for just this reason.

Make svelte devtools respect console zoom?

I am getting up there in age and I like to make my fonts bigger, however in the Firefox console when I zoom the Svelte tab does not respect the zoom setting and the font remains tiny. Any chance this could be fixed?

Properties panel overflow

Describe the bug
The properties panel overflow behavior is overlapping the viewport.

To Reproduce

svelte-devtools-overflow.mp4

Expected behavior

svelte-devtools-overflow-fix.mp4

Environment

• Chrome 87.0.4280.141
• Devtools version: 1.3.0
• Svelte version: 3.31.2

Additional context
null

put into chrome web store

this is great! thanks much for your work!

in order to boost adoption and use, are you planning on putting in chome's web store, much like the myriad of other dev tools such as react dev tools etc.?

Devtools breaks app

Unknown root component:

Console error:

code: https://github.com/bravecow/svelte-devtools-issue

1. yarn
2. yarn watch (for building JS)
3. yarn start (for SSR)

Thanks.

Devtools appears to disconnect when the URL changes

Describe the bug
Devtools mount successfully at first, but when svelte-routing, any change in the URL results in the devtools losing contact with svelte and needing a refresh.

To Reproduce
Steps to reproduce the behavior:

1. Clone the svelte-routing example.
2. Update it to svelte 3.12.1, and modify rollup.config.js to set dev: true
3. npm run start, and connect the dev tools to the page
4. Click "About", and observe that the dev tools disconnected.

Expected behavior
Devtools stay connected as the url changes

Environment

• Browser with version: Chrome Version 78.0.3904.87 (Official Build) (64-bit)
• Devtools version: 1.2.1, installed from app store
• Svelte version: 3.12.1

svelte-devtools not working with svelte-webpack-template

Describe the bug
I'm creating a new Svelte template (https://github.com/Carlosxell/svelte-base) based in webpack template for Svelte (https://github.com/sveltejs/template-webpack), but with some differences to work with routes and others stuffs for default....and the svelte-devtools don't work as should be.... I want to know what is the config i should do to svelte-devtools recognize the application as in development mode, because i want to put svelte-devtools as one of the default packages

To Reproduce
Steps to reproduce the behavior:

1. Just have the svelte-devtools installed
2. Clone the repo(https://github.com/Carlosxell/svelte-base)
3. Install packages with npm or yarn
4. go to terminal and call the comand 'npm run dev' or 'yarn dev'

Lights up on sites not using svelte

Is it possible to have the badge grayscale on sites that aren't using svelte, and red when a site is using it (even in production mode -- similar to vue and react's devtools)? It'd be a nice addition to be able to see what sites are actually using svelte

The extension doesn't connects to Svelte (3.12.1)

Steps to reproduce:

• install the extension (from v2 release)
• clone and install Sapper Template
  • npx degit "sveltejs/sapper-template#rollup" my-app
  • npm i
• run the app
  • npm run dev
• navigate to localhost:3000
• goto Svelte panel
• reload the page
• constat that the panel still says "Refresh the page to connect to svelte."

I tested on Chrome and FIrefox, the result is the same

• In Firefox, there's an error message in console: "=TypeError: blockId is undefined (privilegedContent.js:291:23)

Did I missed something ?
Any help would be really welcome ! Thanks

Add notice in "Not working?" panel about restrictive csp in sveltekit blocking the extension from working

If you completely lock down your app and add:

		csp: {
			directives: {
				'script-src': ['self']
			}
		},

to your kit config, it will block the extension from working.

Adding a bullet point asking if they are using an overly restrictive csp in svelte-kit would point this out to them.

https://kit.svelte.dev/docs/configuration#csp

Svelte Devtools not working with Chrome Extension.

I suppose this is because this extension is made to be used with Svelte Web Apps rather than Svelte Chrome Extensions.

But In my opinion the support for Chrome Extensions should be added.

Error loading svelt app built with webpack

Hello,

I've been developing a svelte app bundled with the webpack template sveltejs/svelte-loader#112 (comment). I set svelte compiler options to 'dev:true' and finally I got a successful connection.

It seems to load the root component correctly... However, I get an error that prevents the rest of the component hierarchy to load.

VM309:396 Uncaught TypeError: internal.props.reduce is not a function at serializeNode (<anonymous>:396:38) at Object.add (<anonymous>:461:15) at addNode (<anonymous>:42:51) at Object.block.m (<anonymous>:159:9) at mount_component (index.mjs:1273) at mount (App.svelte:10) at Object.block.m (<anonymous>:164:7) at mount_component (index.mjs:1273) at init (index.mjs:1358) at new App (App.svelte:90)

Do you have an idea of what may be causing this?

Thanks,
FØ

SvelteKit config

Is there a way to enable DevTools for SvelteKit?

Blocked by client

Hey, tried loading this extension today, and chrome is actually blocking the app from loading when I have the dev tools open.

So if I have the dev tools menu open, and the svelte tab selected, reloading the gives me:

If I close the dev tools, everything loads normally. Same error in development.

Any ideas?

Integrate with svelte repl

It would be cool to integrate this devtools into https://svelte.dev/repl.

would be great if you could give some pointers on how I can help to make this happen.

information about how to enable dev mode

I think it would be rather helpful for lots of people to add a line to the docs how to enable dev mode when they start from the default svelte or sapper templates. Otherwise they would install this extension an it wouldn't work just because dev: false by default.

Feature request - Edge support!

Describe the bug
Edge is a non-adware Chromium browser that supports Chrome extensions. However the extension doesn't connect on latest svelte (3.15.0), dev: true, using Edge 80.0.334.4

To Reproduce
Install Svelte DevTools from Chrome App store onto Edge

Expected behavior
Svelte DevTools to connect.

not displaying prop values

I'm using this with a Svelte app that has components with required props.
I know the props are being passed because their values are being rendered.
But svelte-tools displays "None" under "Props" on the right side.
Is there something I need to do beside just selected a component on the left side to see its props on the right side?

Environment

• Chrome 79.0.3945.79
• Devtools version 1.2.1
• Svelte version 3.16.7

Calling "component.$destroy()" will throw an error if the component does not have a parent

Describe the bug
My understanding is that the code here is designed to remove the Svelte node from the tree when component.$destroy() is called. This line is throwing an error for me in the case where the node doesn't have a parent, because it has been created with the new Component({ target: <domNode>}, { ... }) syntax.

To Reproduce
Steps to reproduce the behavior:

1. Create a new component:

// Test.svelte
<div>test</div>

2. Create it programmatically, then destroy it

// App.svelte
onMount(() => {
  let div = document.createElement("div");  
  div.id = "bug_example";

  let component = new Test({ target: div });

  document.body.appendChild(div);

  component.$destroy();
}

3. You will get something like
   
   

Expected behavior
I believe all that needs to be done is to return early if node.parent is null.

Environment

• Chrome Version 90.0.4430.212 (Official Build) (x86_64)
• Devtools version 1.3.0
• Svelte version 3.38.2

** Additional context **
This has been a great tool so far! Let me know how else I can help.

can't edit state

The README says "By selecting one of the nodes in the tree, you can inspect and edit its current state in the panel to the right." This isn't working for me. But I noticed that the state values do not have names, just numbers. I wonder if this is related to recent changes to the way Svelte manages the state in components, storing it in an array. Perhaps svelte-devtools just hasn't been updated to work with the new way to storing state yet.

Duplicated components when using hydratable components

In Svelte dev tools I see all the components in double when I am using hydratable components.
I don't know if I am doing something wrong.

Small repo for reproduction.
https://github.com/igorovic/svelte-devtools-hydratable

Add support for keyboard navigation

First of all, thank you for all the work on the Devtools, they're looking great and really help with day-to-day work with Svelte.

I just miss something when compared to the regular DOM Devtools, keyboard navigation! Currently, it seems that arrows up/down performs page scrolling, if the content overflows. I think it would make more sense for the arrow keys to behave as when navigating the DOM in the Elements view.

Zip file missing icons?

Installing from ZIP on chrome 75 (Linux) fails with -
manifest is missing icons.

Workaround - deleting icons section from manifest - it installs successfully.

Which directory is 'dest' directory using sapper

Your docs state

Chrome

    Navigate to chrome://extensions/.
    Turn on developer mode using the 'Developer mode' switch in the upper right hand corner of the page.
    Click 'Load Unpacked' and select the dest directory.

I am using sapper (with svelte). Which directory is now dest directory?

Make extension background non-persistent

Describe the bug
Background page should not be persistent.

To Reproduce
Steps to reproduce the behavior:

1. Install extension in Chrome and close all dev tools, including Svelte.
2. Open Chrome Task manager (click Shift+ESC).
3. See "Extension: Svelte Devtools" in the process list, even though extension is not in use.

Expected behavior
When extension is not in use, it should not consume computer resources (RAM).

Environment

• Browser: Any (Chrome 91)
• Devtools version: Any (built from master)
• Svelte version: Any (3.38.2)

Additional context
If you are interested, I can file a PR to fix this. Right now, only Chrome supports non-persistent pages, but Firefox plans to add support soon^TM.

Plan
I will break up this into a few PRs. Here is a tentative plan (no particular order):

WIP (all these are blocked on already opened PRs):

1. (TODO) Store and retreive Background context variables from chrome.storage.local when needed
2. (TODO) Optimization: let background open and close persistent ports with DevTools only when needed
3. (TODO) Declare background non-persistent in manifest.json and test it!

Review:

1. #62
   Optimization: avoid chrome.tabs.onUpdated because it is triggered for every single other tab.
   Frequent callback runs restore background into active state unnecessarily.
2. #60

Done:

1. #54 Removes pagePorts in src/background.js
2. #53 Fix: background has two handlers for 'startProfiler' (one is dead) and no handler for 'stopProfiler'
3. #53 Get rid of gloal profilerEnabledList in src/background.js
   Value of this variable is set in DevTools tab and is used in content script. It makes sense to store it in either one, but not in background.

Edit: add plan!

[Feature request] Additional button that opens the item in VSCode in the source file

Can you add a function that works like this:
https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#inspector

Meaning in the DevTools panel an additional button that opens the item in VSCode in the source file?

Inspector in vite-plugin-svelte is based on a very simple url, such as:
http://localhost:5173/__open-in-editor?file=src/lib/Views.svelte:56:3
Such url works, even if the inspector is not enabled.

So all you have to do is svelte-devtools to include this relative url and line number in the element, add a button that opens such a link, and that's all the work.

Is this abandoned?

Is this abandoned?

Trash can in profiler does not work as expected

Describe the bug
Trash can only hides log entries, but they reappear once you log one more event.

To Reproduce
Steps to reproduce the behavior:

1. Download svelte template npx degit sveltejs/template svelte-app
2. Go to directory: cd svelte-app
3. Install deps: npm i
4. Add interctivity to this demo: open svelte-app/src/App.svelte and in <script> tag add let count = 0; const add = () => count += 1; then in <main> tag add <p on:click={add}>Count {count}</p>
5. Start server with npn run dev and go to wherever that starts
6. Open Svelte DevTools, restart page, go to profiler
7. Click on "count" a few times to create a bunch of events
8. Click on "trash can" and see that all events disappeared (expected)
9. Click on "count" once more and see that all deleted measurements come back (unexpected)

Expected behavior
I expect trash can to delete all measurements, not hide them temporarily

Environment

• Browser with version Chrome 91
• Devtools version DevTools 1.3.0 and current master
• Svelte version 3.0.0

Additional context
I'm just documening everything that looks like a bug before refactoring for #44.

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

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.

privilegedContent.js error

privilegedContent.js:1 Uncaught SyntaxError: Identifier 'tag' has already been declared

Is it possible to show events before compile?

Component on:click:

Source code:

function onChip() {
  active = !active;
}

And child component:

Doesn't recognise passed onChip event from parent.

Content script injection logic does not handle the case of multiple simultanious DevTools instances

Describe the bug
A clear and concise description of what the bug is.

In src/background.js the handler for tabs.onUpdated event attachScript is added and removed without consideration for case of multiple simultanious DevTools instaces.

To Reproduce
Steps to reproduce the behavior:

1. Open tab 1 made with Svelte, open Svelte DevTools
2. Open tab 2 example.com (or any other site), open Svelte DevTools, close Svelte DevTools
3. Go to tab 1 and refresh page in any way (via F5 or CTRL+F5 shortcut, reload button, or Svelte DevTools)
4. Notice that tad 1 Svelte DevTools window still shows "Not working? Did you..." message.

Expected behavior
Tab 1 Svelte DevTools should work and not show "Not working? Did you..." message.

Environment

• Browser with version Chrome 91
• Devtools version 3.0.0
• Svelte version 1.3.0

Additional context
This issue is caused by improper port disconnect handling logic in background. It removes tabs.onUpdated event listener when tab 2 DevTools are closed at step 2, even though this listener is still needed for tab 1 DevTools at step 3 and 4.
This bug can be easily fixed by taking into account number of open ports, e.g. by adding an extra counter or just checking toolsPorts.size. I won't file a PR for this because I'm changing background logic in a larger way which will fix this bug.

[Bug] Svelte Devtools not working using Svelte + Vite (Chromium based browsers)

Describe the bug
Svelte Devtools seems not to work using Svelte with Vite.

To Reproduce
Just start a new Vite project (with Svelte) and run in dev mode. You'll see Svelte Devtools doesn't recognise you're using Svelte in this page.

Expected behavior
Svelte Devtools should work with projects created with Vite, too.

Environment

• Browser with version: Google Chrome, version 101.0.4951.67
• Devtools version: 1.3.0
• Svelte version: 3.44.0 (using Vite 2.9.7 and vite-plugin-svelte 1.0.0-next.30)

Additional context
None.

---

Update - 07/11/2022

Seems this bug doesn't occur on Firefox but it's only Chromium based browsers related.

Re-tested myself using Chrome 107.0.5304.88: this is not working with Svelte 3.52.0 (using Vite 3.1.8 and vite-plugin-svelte 1.1.0).

Publish in Edge Add-Ons directory

Not strictly required since you can change a setting in the browser to enable installs from the Chrome store, but it would be more convenient to have it listed in both places.

https://developer.microsoft.com/en-us/microsoft-edge/extensions/

Unserializable data breaks app

When using crayon router the app doesn't load anymore when using the devtools.

Error on firefox:

DataCloneError: The object could not be cloned.

Error on chrome (referenced symbol can also be something else):

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Symbol(Symbol.species) could not be cloned.

Example on codesandbox (try to load without and with devtools):
https://lk9m0.csb.app/

Source:
https://codesandbox.io/s/recursing-cori-lk9m0

Introduce swiperjs in svelte and report errors in devtool debugging

Describe the bug
Hello, I introduced swiperjs in svelte and reported an error in devtool debugging

To Reproduce
Steps to reproduce the behavior:

1. Install swiperjs
2. Introduce and use swiperjs in your code
3. Open svelte-devtool and click "click here"
4. Console reports an error and devtool cannot work normally
   

Expected behavior
An error is reported and the root element displays an exception

Environment

• Microsoft Edge version 96.0.1054.62
• Devtools version 1.3.0
• Svelte version 3.0.0
• Swiper version 7.3.4

Page near-blank after loading Svelte DevTools when using yrv router

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Using Chrome 78.0.3904.108.

Before Svelte DevTools connecting:

After Svelte DevTools connecting:

I guess I expected to see the page and the content, and the props of each component. But there's just an <Unknown /> component for the router and that's it. I can't see the page.

As routers are pretty popular (yrv is new, but getting more popular) it'd be useful for them to work with Svelte DevTools.

Chrome dev tool dark mode support

Thank you for the dev tool, would like to mention that it is hard to read when the browser is in dark mode. Would love to have dark mode support. This is not urgent since it is not a functionality issue, just a "good to have".

For your information, I am on Windows 10, and Chrome's light/dark mode is controlled by changing the Colours settings on Windows.

Doesn't use Dev Tools theme

I installed a fresh copy of Developer Edition of Firefox and installed svelte-devtools.

All the F12 panels are using a dark theme (black background) except svelte-tools which is light

Svelte-devtools should follow whichever theme is in use.

Add SvelteKit setup to readme

Describe the bug
Chromium issues as of late (#68, #69) have obviated a need to note this extension should work out of the box for SvelteKit. Currently there are set-up instructions which do not need to be performed for SvelteKit to function which could cause developer frustration as a result of the bugs (and in general).

Here's the spot that needs rewording or reorg to note SvelteKit works OOTB:
https://github.com/RedHatter/svelte-devtools#enabling-dev-mode

[Request] Change svelte badge icon to monochrome when svelte is not detected

[Request] Change svelte badge icon to monochrome when svelte is not detected in the web page.

Similar to React or Vue chrome extension where the badge icon is monochrome when its technology is not detected in current web page. Then when it is detected they display the badge in color.

Does not work on extension pop-ups

Describe the bug
The last time I used Svelte Devtools on an extension pop-up that uses Svelte (like this one), Svelte Devtools didn't pick up on the web page being Svelte.

To Reproduce
Steps to reproduce the behavior:

1. After installing the devtools, open up the extension's devtools.
   This can be done by either:
   • Opening the pop-up, right-clicking → "Inspect element"
   • 1. Going to chrome://extensions
     2. Enabling "Developer mode"
     3. Right-clicking the extension → "Inspect pop-up window"
2. 
3. Yes, "click here" doesn't help.

Expected behavior
The devtools should properly detect the Svelte instance,

Environment

• Browser with version: Edge beta 96.0.1054.13
• Devtools version: 1.3.0
• Svelte version: 3.37.0

Is update planned?

Hi, @benmccann are there any tentative plans regarding the next release?

For reference, Chromium 108 Canary fixed the bug breaking this extension, but it would be nice to have extension working before then. Also, I'll test on Chromium 108 Beta once it is released and update this issue.

Use red logo instead of black

Hey there, awesome work with the dev tools. Been using it on sapper for a while.

Any chance you could switch the black logo for the (official) red one? Or the green one from sapper for all I care. I can even do a MR and help change the colors if that helps?

Cheers.

Doesn't work on iframes

Describe the bug
If the Svelte app is running within an iframe, the extension fails to detect it.

To Reproduce
Steps to reproduce the behavior:

1. Create an app, and open it from an iframe.

Expected behavior
The app within the iframe should be detected.

Environment

• Browser with version: Chrome 78
• Devtools version: built from master
• Svelte version: 3.15.0

The requested module 'fs' does not provide an export named 'promises'

On running npm run build, the following error occurs:

> [email protected] build /Users/alacritas/Projects/Utils/svelte-devtools-master
> $npm_execpath run build:format && rollup -c && $npm_execpath run build:icon


> [email protected] build:format /Users/alacritas/Projects/Utils/svelte-devtools-master
> node --experimental-modules ./scripts/format.mjs

(node:41629) ExperimentalWarning: The ESM module loader is experimental.
file:///Users/alacritas/Projects/Utils/svelte-devtools-master/scripts/format.mjs:5
import { promises as fs } from 'fs'
         ^^^^^^^^
SyntaxError: The requested module 'fs' does not provide an export named 'promises'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:79:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:format: `node --experimental-modules ./scripts/format.mjs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build:format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alacritas/.npm/_logs/2019-09-19T22_01_48_720Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `$npm_execpath run build:format && rollup -c && $npm_execpath run build:icon`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alacritas/.npm/_logs/2019-09-19T22_01_48_757Z-debug.log

It seems to be a quirky syntax issue explained here: nodejs/node#21014

[Bug] Base size too small on HiDPI screen

Describe the bug
Svelte Devtools base size for text and elements is too small on HiDPI screens.

To Reproduce
Steps to reproduce the behavior:

1. Install Svelte Devtools on a computer using a HiDPI screen

Expected behavior
Svelte Devtools would scale properly like Chrome Devtools does.

Environment

• Brave 1.25.73
• Svelte DevTools 1.3.0 from Chrome Web Store
• Svelte 3.32.3

Additional context

Chrome DevTools :

Svelte DevTools :

---

Thanks

Error on Build

when I run npm run build (npm run package show this error too) :

(node:22714) ExperimentalWarning: The ESM module loader is experimental.
file:///home/miko/Downloads/svelte-devtools-master/scripts/format.mjs:5
import { promises as fs } from 'fs'
         ^^^^^^^^
SyntaxError: The requested module 'fs' does not provide an export named 'promises'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:79:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:format: `node --experimental-modules ./scripts/format.mjs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build:format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.