Next.js Discord

Discord Forum

How do I use React DevTools with Next.js?

Answered
yolocat posted this in #help-forum
Open in Discord
yolocatOP
I'm trying to use react-devtools with my Next.js (v15) app, but it's getting stuck at Loading React Element Tree...

I've tried both react-devtools@^5 and react-devtools@^6 (latest), no luck there. I've also tried changing strategy to afterInteractive but that didn't help. Any help would be appreciated!

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
    return (
        <html lang="en">
            <body>
                { children }
                <Script src="http://localhost:8097" strategy="beforeInteractive" />
            </body>
        </html>
    );
}
Answered by Asian black bear
Alternatively don't rely on the Next' Script tag at all and manually use it like this:
<head>
  <script src="http://localhost:8097" />
</head>
View full answer

7 Replies

Asian black bear
Easiest way is to the browser extension instead of the standalone DevTools because they make it really difficult to work with.
Asian black bear
Alternatively don't rely on the Next' Script tag at all and manually use it like this:
<head>
  <script src="http://localhost:8097" />
</head>
Answer
@Asian black bear Easiest way is to the browser extension instead of the standalone DevTools because they make it really difficult to work with.
yolocatOP
well that sucks, cuz they don't have a safari extension and I'd prefer keeping everything in the same place
@yolocat well that sucks, cuz they don't have a safari extension and I'd prefer keeping everything in the same place
Asian black bear
You'll have to test your app against multiple browsers anyways 🤷‍♂️
@Asian black bear You'll have to test your app against multiple browsers anyways 🤷‍♂️
yolocatOP
that's true, but the regular html script tag seems to work so I'll keep my dev environment small until I'm closer to launch
thanks for your help though!