[devtools] Ensure Chrome DevTools workspace can connect with proxy rewrites (#86289)

eps1lon · web-flow · commit a7b0b5fa9e38 · 2025-11-19T19:47:46.000+01:00
diff --git a/packages/next/src/server/lib/chrome-devtools-workspace.ts b/packages/next/src/server/lib/chrome-devtools-workspace.ts
@@ -1,6 +1,5 @@
 import type { ServerResponse } from 'http'
 import type { NextConfigComplete } from '../config-shared'
-import type { NextUrlWithParsedQuery } from '../request-meta'
 
 import { randomUUID } from 'crypto'
 import * as fs from 'fs'
@@ -11,9 +10,9 @@ import { getStorageDirectory } from '../cache-dir'
 let workspaceUUID: string | null = null
 
 export function isChromeDevtoolsWorkspaceUrl(
-  url: NextUrlWithParsedQuery
+  pathname: string | undefined
 ): boolean {
-  return url.pathname === '/.well-known/appspecific/com.chrome.devtools.json'
+  return pathname === '/.well-known/appspecific/com.chrome.devtools.json'
 }
 
 export async function handleChromeDevtoolsWorkspaceRequest(
diff --git a/packages/next/src/server/lib/router-server.ts b/packages/next/src/server/lib/router-server.ts
@@ -575,7 +575,8 @@ export async function initialize(opts: {
         )
       }
 
-      if (opts.dev && isChromeDevtoolsWorkspaceUrl(parsedUrl)) {
+      // We want the original pathname without any basePath or proxy rewrites.
+      if (opts.dev && isChromeDevtoolsWorkspaceUrl(req.url)) {
         await handleChromeDevtoolsWorkspaceRequest(res, opts, config)
         return
       }
diff --git a/test/e2e/chrome-devtools-workspace/chrome-devtools-workspace.test.ts b/test/e2e/chrome-devtools-workspace/chrome-devtools-workspace.test.ts
@@ -30,3 +30,33 @@ describe('chrome-devtools-workspace default', () => {
     }
   })
 })
+
+describe('chrome-devtools-workspace proxy', () => {
+  const { isNextDev, next } = nextTestSetup({
+    files: path.join(__dirname, 'fixtures', 'proxy'),
+  })
+
+  it('should be able to connect to Chrome DevTools in dev', async () => {
+    const devtoolsResponse = await next.fetch(
+      '/.well-known/appspecific/com.chrome.devtools.json'
+    )
+    if (isNextDev) {
+      const json = await devtoolsResponse.json()
+      expect(json).toEqual({
+        workspace: {
+          uuid: expect.any(String),
+          root: next.testDir,
+        },
+      })
+
+      const pageReload = await next.fetch(
+        '/.well-known/appspecific/com.chrome.devtools.json'
+      )
+      // The UUID should be stable across reloads.
+      // Otherwise you'd have to reconnect every-time.
+      expect(await pageReload.json()).toEqual(json)
+    } else {
+      expect({ status: devtoolsResponse.status }).toEqual({ status: 404 })
+    }
+  })
+})
diff --git a/test/e2e/chrome-devtools-workspace/fixtures/proxy/app/[lang]/page.js b/test/e2e/chrome-devtools-workspace/fixtures/proxy/app/[lang]/page.js
@@ -0,0 +1,4 @@
+export default async function Page({ params }) {
+  const { lang } = await params
+  return `Hello, ${lang} Dave!`
+}
diff --git a/test/e2e/chrome-devtools-workspace/fixtures/proxy/app/layout.js b/test/e2e/chrome-devtools-workspace/fixtures/proxy/app/layout.js
@@ -0,0 +1,11 @@
+import { Suspense } from 'react'
+
+export default function Root({ children }) {
+  return (
+    <html>
+      <body>
+        <Suspense fallback="loading">{children}</Suspense>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/chrome-devtools-workspace/fixtures/proxy/next.config.js b/test/e2e/chrome-devtools-workspace/fixtures/proxy/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/chrome-devtools-workspace/fixtures/proxy/proxy.js b/test/e2e/chrome-devtools-workspace/fixtures/proxy/proxy.js
@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server'
+
+export function proxy(request, context) {
+  const url = new URL(request.url)
+  url.pathname = `/en-EN${url.pathname}`
+
+  return NextResponse.rewrite(url)
+}
+
+export const config = {
+  // Matcher ignoring `/_next/`, `/api/`, static assets, favicon, etc.
+  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
+}

Original file line number	Diff line number	Diff line change
`@@ -575,7 +575,8 @@ export async function initialize(opts: {`
`575`	`575`	`)`
`576`	`576`	`}`
`577`	`577`
`578`		`- if (opts.dev && isChromeDevtoolsWorkspaceUrl(parsedUrl)) {`
	`578`	`+ // We want the original pathname without any basePath or proxy rewrites.`
	`579`	`+ if (opts.dev && isChromeDevtoolsWorkspaceUrl(req.url)) {`
`579`	`580`	`await handleChromeDevtoolsWorkspaceRequest(res, opts, config)`
`580`	`581`	`return`
`581`	`582`	`}`