koba04 / swr-devtools

A DevTool for SWR

swr-devtools

A DevTools for SWR

This only supports SWR v1 or later versions.

How to use

Install the SWRDevTools extension

• Chrome
  • https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned
• Firefox
  • https://addons.mozilla.org/en-US/firefox/addon/swr-devtools/

(SWR v1) Wrap your application in the SWRDevTools component

This instruction is only required with SWR v1

⚠️ If you use SWR v2 or later versions, you don't need to install swr-devtools and wrap your application. SWR Devtools does it for you.

npm install swr-devtools
# Install peerDependencies
npm install react swr

import { createRoot } from "react-dom/client";
import { SWRDevTools } from "swr-devtools";

createRoot(document.getElementById("app")).render(
  <SWRDevTools>
    <MainApp />
  </SWRDevTools>,
  document.getElementById("app")
);

Packages

package	description
swr-devtools	A React component to inject your application
swr-devtools-extensions	A Chrome extension for the SWR DevTools
swr-devtools-panel	A React component for the SWR DevTools panel

Online Demo

https://swr-devtools.vercel.app

LICENSE

MIT

swr-devtools's Issues

Empty extension

Hi!

I'm using latest Nextjs, with 2.0.0-beta.6 of SWR and the extension never displays anything.

Do you know how I could debug this?

Update the manifest version to v3

https://developer.chrome.com/blog/mv2-transition/

Emoji

Error: ❌
Loading: ⏳
Validating: ⚠️
Infinite: ♾️

feat: waterfall chart

Hi! I think it would be useful to have a new tab that shows all SWR hooks horizontally like waterfalls, similar to the Chrome DevTools network tab.

I'm happy to work on this feature and contribute a PR :)

Firefox extensions

Use the activeTab permission instead of all_urls

https://developer.chrome.com/docs/extensions/mv3/manifest/activeTab/

Persist state between Cache/History and Network

Currently, displayed data is reset when we move from Cache/History to Network and vice versa.
To fix this, we have to store state in an upper tree.

Should we publish the Devtool Panel?

Hi @koba04

Could you publish the private package and opt-out for PRODUCTION build as react-query devtools does?
https://react-query.tanstack.com/devtools

Let me what you thought about this idea. Thanks.

Chrome extension not working with Next.js v11

Trying to get this working with Next.js 11+ and not having any luck.

I downloaded and ran the example site, but when I upgraded it from Next 10.0.6 -> 11.0.0 the Chrome extension stopped working (it just shows "Haven't received any cache data from SWRDevTools"). The React panel continues to work as expected after the upgrade. Tried to figure out what is going wrong, but no luck.

Love the promise of this package! Thanks for all of your work on it, it's the biggest thing I'm missing with SWR.

Theme Switcher dosn't work

I've applied overflow: scroll into the header, so the switcher can't overflow from the header. I should the select element insread of div.

Support error values

Online Demo

This is an awesome project! Do you consider to deploy a demo somewhere while applying updates so that user can play with it online? Thanks

revalidateFirstPage has been never resolved

The request for the revalidateFIrstPage has been never resolved.

Steps to reproduce

1. http://localhost:3000/infinite
2. Open Network Panel
3. Press the "Load more" button.
4. The request has been never resolved.

feat: mutate from devtool panels

test: add tests

How to inject runtime code?

Currently, SWR DevTools injects runtime code by inserting a script element from the content script. It's great because applications don't have to set up anything for SWR DevTools. This way is based on what Redux DevTools does.
But I'm not sure this is a good way for that.

But I could also provide the runtime as an npm package.

import { setup } from "swr-devtools";
if (process.env.NODE_ENV === "development") {
  // Could use Dynamic Import here
  // const module = import("swr-devtools");
  setup(cache);
}

In this way, developers have to install swr-devtools as a dependency. The downside is that I cannot control the version of the runtime code, so SWR Devtools has to care about old versions of the runtime script.

SWRDevTools tab doesn't render anything

Chrome 109.0.5414.119 on macOS 13.1 Beta (22C5050e)

DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:266743
    at rs (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:143860)
    at xu (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:163982)
    at chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:160586
    at x (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:190548)
    at MessagePort.T (chrome-extension://liidbicegefhheghhjbomajjaehnjned/app.js:2:191080)

swr-devtools not working on edge.

Edge version: Version 107.0.1418.62 (Official build) (64-bit)
swr version: "swr": "^2.0.0-rc.3",

code:

import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json())

export const useCustomSWR=()=>{
    const { data } = useSWR('https://jsonplaceholder.typicode.com/todos/1',fetcher)
    return { data }
}

import {useCustomSWR} from "./customHook";

function App() {
  const {data} = useCustomSWR()
  return (
    <div className="App">
      {data?.userId}
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);`

I can't find the swr panel.

Hello, I have installed and activated the swr devtools chome extension.
But I can't find the panel and use it. how can i resolve it

Extension causing pages to error.

Try visiting https://dashboard.clerk.com/ with this extension enabled on Firefox, other browsers/websites not tested.

ced2eb8edb6521c4.mp4

Apply styles for a dialog in the Network panel

Performance Issue with large data

I've got the feedback that SWRDevTools gets applications slow with large data.
I haven't found out the cause of the problem yet, but stringify of superjson seems to be slow, which is introduced by #90.

Todos

• run the DevTools middleware only the DevTools panel is open
• make cache updates batched
• make enhanced serialization optional

Dark mode support

Refactoring to use CSS variables is required to work on this.

Use SVG files instead of Emoji

We use Emojis for showing status like isValidating, error, infinite keys, and so on. I prefer to use SVG files because it depends on the environment.

doesn't work in nextjs13 project with chrome

using [email protected] and [email protected]

I wrapped the SWRDevTools at the top client component and there's no errors up in chrome console, but it seems nothing happened at the swr panels when I fetch some data.

Is it supported in nextjs app?

refactor: define message event objects sent by postMessage

Currently, the event objects become the various types of objects, which is not type-safe and hard to track the communication between panels and contents.
It would be nice if those has a concrete interface like { type: "***" , payload: { ... } }

Avoid throwing an Error when passing non-serializable values

Currently, SWRDevTools throws an Error when we store non-serializable values like Symbol into the SWR cache.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

It's a limitation of postMessage, but I'd like to avoid throwing an Error even though we can't pass the non-serializable values into the devtool panel.
I think it's ok to display a Symbol object as a string like "Symbol".

After a short period of time, Cache and History tabs stop updating

I'm not sure what the exact issue is, but I just started using SWR and the devtools, and I've noticed that I have to close and re-open my devtools pane after maybe ~30 minutes/1 hour because the Cache and History tabs stop receiving updates.

I'm on version 2.0.0 of swr and 1.2.0 of the devtools installed on Chrome 108.0.5359.124.

Is there any known issue with this? Let me know if there's more info I can provide to help. When I open the devtools for the extension's service worker I don't see any errors, and I still see the pane connection events being logged even when the SWR devtools pane stops updating.

Cache Format

SWR >2.0.0

type Entry = {
  key: Key,
  value: {
    data?: Data,
    error?:  any,
    isLoading: boolean
    isValidating: boolean
  }
}

SWR ^1.3.0

$swr${key}

type Entry = {
  key: Key,
  value: {
    error: any,
    isValidating: boolean
  }
}

{key}

type Entry  = {
  key: Key,
  value: Data
}

SWR <1.3.0 && >=1.0.0

$req${key}

type Entry = {
  key: Key
  value: boolean // isValidating?
}

$err${key}

type Entry = {
  key: Key,
  value: any
}

{key}

type Entry = {
  key: Key,
  value: Data
}

Add a test to guarantee web-accessible.js doesn't not include React

If web-accessible.js included React, the application is broken by the error due to the mutilple React instances error.

Specify the supported version in the README

This package does not work with swr v0.x.
I think a lot of projects are currently migrating from swr v0.x to v1.x.
I think it would be more helpful to write down the supported versions.

use TypeScript Project References

https://www.typescriptlang.org/docs/handbook/project-references.html

Support SSR

I face the following message

error - ReferenceError: window is not defined
    at /Users/user/workspace/loan-web/node_modules/swr-devtools/src/createSWRDevTools.ts:88:5
    at Map.cache.set (/Users/user/workspace/loan-web/node_modules/swr-devtools/src/swr-cache.ts:23:7)

You need to support the ssr!
Can you fix it?

Feat: Add manual dark mode support

While reading the source code I played around it a little bit and added dark mode support to the panel. I think it will be more convenient to let users choose the theme of the panel on their own instead of only depending on system's theme.

color-mode-demo.webm

Currently swr-devtools-panel depends on system's preference to enable dark mode manual dark mode has option for that too.

@koba04, should i open a PR for this.

How to disable SWR-devtools on Production

It seems that SWR-devtools (with swr 2.x version) is also working for Production builds.
Is there any option/idea for how to disable it for Production?

Thanks.

Doesn't work on brave browser without SWRDevTools component

Although brave browser is a chromium based browser, extension doesn't work on it without using SWRDevTools.

swr version v2

Support multiple tabs

Currently, SWR DevTools shares the cache store in the Devtools panel between multiple tabs, which is very confusing.

swr-devtools.vercel.app has been blocked

This is due to the usage of API calls in the demo app.

I should remove the API calls and contact the support.

Support `useSWRSubscription`

useSWRSubscription uses a special key internally, so DevTools has to handle it correctly.
https://swr.vercel.app/docs/subscription

Support SWR v1

swr has already published the version of v1 beta at the npm registry. the v1 version is no longer exposing a global cache object, so I have to find out another way to access the swr cache object.

I guess swr-devtools would require to receive a cache object through an argument like the following.

window.__SWR_DEVTOOLS_EXTENSION__(cache)

fix: reset a panel view when a new page is opened

Currently, SWR Devtools keeps a devtool panel even if a new page is opened. I should reset the panel view at that time.

feat: filter keys in a devtools panel

It's very useful that we would filter cache data by an input.

Convert to Web Extensions

Currently, swr-devtools is built as a Component, which is designed to be rendered with an application component.
This has some drawbacks like overwrapping the UI and conflicting CSS styles.

I think a panel in browsers' devtools is the most suitable place for swr-devtools, so I'll convert this to a Web Extension.

Uncaught Error: Extension context invalidated

problem

I try swr devtool extension but, occur the error and show white screen

content.ts:20 Uncaught Error: Extension context invalidated.
    at a (content.ts:20:13)
    at content.ts:49:18

and sometime show proper screen but not showing query history.

env

swr: 2.1.0
next: 13.2.4 

I try erase and install all chrom extension
but not work 😢

History Tab is not useless

Currently, The DevTools stores the history of updating the cache store by inspecting setter functions.
I think it might be helpful to record histories of fetching results.

Display config values

Is this useful?

https://github.com/koba04/swr-devtools/tree/feat-display-config-object

Pretty Printed Key?

I'm using SWR with GraphQL and feel that keys are not easy to read because newlines(\n) are printed as it is.
For example, a key is shown as

@"\n query GetUser(\n $id: ID ) {\n getUser(\n id: $id\n ) {\n name\n }\n }\n",#id:"xyz",

And I prefer

query GetUser(
  $id: ID
) {
  getUser(
    id: $id
  ) {
     name
  }
}
id: "xyz"

Is there a plan to enable it?

Injecting the middleware automatically

To inject the DevTools middleware to the application, we currently have to wrap it with <SWRDevTools> when rendering. This is a great solution but not perfect due to the restrictions:

• Users have to include SWRDevTools in their app bundle to debug production
• The application will always run the SWRDevTools code (even if no SWRDevTools is installed)

It would be great to inject the middleware automatically to all SWR apps, from the extension side. So I opened vercel/swr#2003 to discuss this idea. In extension’s content, we create the middleware and add it to __SWR_DEVTOOLS_USE__:

global.__SWR_DEVTOOLS_USE__ = global.__SWR_DEVTOOLS_USE__ || []
global.__SWR_DEVTOOLS_USE__.push(devtoolsMiddleware)

And then SWR will always use the middleware if defined.

The only thing is to make sure the injection runs before application code to avoid mismatching of number of hooks. I think "run_at": "document_start" already does that but not 100% sure.