react · huntie · Aug 17, 2023 · react · huntie · Aug 17, 2023
diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */

diff --git a/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js b/flow-typed/npm/@react-native-community/cli-server-api_v12.x.x.js
@@ -23,9 +23,7 @@ declare module '@react-native-community/cli-server-api' {
  ): {
  middleware: Server,
  websocketEndpoints: {
- '/debugger-proxy': ws$WebSocketServer,
- '/message': ws$WebSocketServer,
- '/events': ws$WebSocketServer,
+ [path: string]: ws$WebSocketServer,
  },
  debuggerProxyEndpoint: {
  server: ws$WebSocketServer,

diff --git a/flow-typed/npm/debug_v2.x.x.js b/flow-typed/npm/debug_v2.x.x.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// https://github.com/visionmedia/debug
+// https://www.npmjs.com/package/debug
+
+declare module 'debug' {
+ declare module.exports: (namespace: string) => (...Array<mixed>) => void;
+}
diff --git a/packages/dev-middleware/README.md b/packages/dev-middleware/README.md
@@ -1,11 +1,82 @@
 # @react-native/dev-middleware
 
-![https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package](https://www.npmjs.com/package/@react-native/dev-middleware)
+![npm package](https://img.shields.io/npm/v/@react-native/dev-middleware?color=brightgreen&label=npm%20package)
 
 Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
 
-## Endpoints
+## Usage
 
-### `/open-debugger`
+Middleware can be attached to a dev server (e.g. [Metro](https://facebook.github.io/metro/docs/getting-started)) using the `createDevMiddleware` API.
+
+```js
+import { createDevMiddleware } from '@react-native/dev-middleware';
+
+function myDevServerImpl(args) {
+ ...
+
+ const {middleware, websocketEndpoints} = createDevMiddleware({
+ host: args.host,
+ port: metroConfig.server.port,
+ projectRoot: metroConfig.projectRoot,
+ logger,
+ });
+
+ await Metro.runServer(metroConfig, {
+ host: args.host,
+ ...,
+ unstable_extraMiddleware: [
+ middleware,
+ // Optionally extend with additional HTTP middleware
+ ],
+ websocketEndpoints: {
+ ...websocketEndpoints,
+ // Optionally extend with additional WebSocket endpoints
+ },
+ });
+}
+```
+
+## Included middleware
+
+`@react-native/dev-middleware` is designed for integrators such as [`@expo/dev-server`](https://www.npmjs.com/package/@expo/dev-server) and [`@react-native/community-cli-plugin`](https://github.com/facebook/react-native/tree/main/packages/community-cli-plugin). It provides a common default implementation for core React Native dev server responsibilities.
+
+We intend to keep this to a narrow set of functionality, based around:
+
+- **Debugging** — The [Chrome DevTools protocol (CDP)](https://chromedevtools.github.io/devtools-protocol/) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
+- **Dev actions** — Endpoints implementing core [Dev Menu](https://reactnative.dev/docs/debugging#accessing-the-dev-menu) actions, e.g. reloading the app, opening the debugger frontend.
+
+### HTTP endpoints
+
+<small>`DevMiddlewareAPI.middleware`</small>
+
+These are exposed as a [`connect`](https://www.npmjs.com/package/connect) middleware handler, assignable to `Metro.runServer` or other compatible HTTP servers.
+
+#### GET `/json/list`, `/json` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns the list of available WebSocket targets for all connected React Native app sessions.
+
+#### GET `/json/version` ([CDP](https://chromedevtools.github.io/devtools-protocol/#endpoints))
+
+Returns version metadata used by Chrome DevTools.
+
+#### POST `/open-debugger`
 
 Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
+
+<details>
+<summary>Example</summary>
+
+ curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
+</details>
+
+### WebSocket endpoints
+
+<small>`DevMiddlewareAPI.websocketEndpoints`</small>
+
+#### `/inspector/device`
+
+WebSocket handler for registering device connections.
+
+#### `/inspector/debug`
+
+WebSocket handler that proxies CDP messages to/from the corresponding device.
diff --git a/packages/dev-middleware/package.json b/packages/dev-middleware/package.json
@@ -24,6 +24,7 @@
  "dependencies": {
  "chrome-launcher": "^0.15.2",
  "connect": "^3.6.5",
+ "debug": "^2.2.0",
  "node-fetch": "^2.2.0",
  "temp-dir": "^2.0.0"
  },

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */
@@ -14,18 +14,36 @@ import type {Logger} from './types/Logger';
 
 import connect from 'connect';
 import openDebuggerMiddleware from './middleware/openDebuggerMiddleware';
+import InspectorProxy from './inspector-proxy/InspectorProxy';
 
 type Options = $ReadOnly<{
+ host: string,
+ port: number,
+ projectRoot: string,
  logger?: Logger,
 }>;
 
-export default function createDevMiddleware({logger}: Options = {}): {
+type DevMiddlewareAPI = $ReadOnly<{
  middleware: NextHandleFunction,
-} {
- const middleware = connect().use(
- '/open-debugger',
- openDebuggerMiddleware({logger}),
- );
+ websocketEndpoints: {[path: string]: ws$WebSocketServer},
+}>;
+
+export default function createDevMiddleware({
+ host,
+ port,
+ projectRoot,
+ logger,
+}: Options): DevMiddlewareAPI {
+ const inspectorProxy = new InspectorProxy(projectRoot);
+
+ const middleware = connect()
+ .use('/open-debugger', openDebuggerMiddleware({logger}))
+ .use((...args) => inspectorProxy.processRequest(...args));
 
- return {middleware};
+ return {
+ middleware,
+ websocketEndpoints: inspectorProxy.createWebSocketListeners(
+ `${host}:${port}`,
+ ),
+ };
 }
diff --git a/packages/dev-middleware/src/index.flow.js b/packages/dev-middleware/src/index.flow.js
@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict
+ * @flow strict-local
  * @format
  * @oncall react_native
  */