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 Giant panda
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

Giant panda
Easiest way is to the browser extension instead of the standalone DevTools because they make it really difficult to work with.
Giant panda
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
@Giant panda 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
Giant panda
You'll have to test your app against multiple browsers anyways 🤷‍♂️
@Giant panda 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!