Alex Hunt
c430083fa0
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46780 This is primarily a debugger server change to better-align the `title` and `description` fields (visible in via the CDP `/json/list` endpoint), reporting them directly from the device. For React Native users, the net effect of this change is to improve/align the display name for each debugger target in the CLI multi-select menu (`j` to debug). This change may also be useful for discovery in non-Fusebox frontends such as VS Code (`vscode-expo` extension). Changes: - Rename `title` prop on `InspectorPageDescription`/`IInspector::addPage` to `description` (no call site changes). - Add `deviceName` param to `InspectorPackagerConnection`. - Move the page `description` to the `description` JSON field. - Update `InspectorPackagerConnection::Impl::pages()` to return new `title` and `description` fields. - Align `OpenDebuggerKeyboardHandler` to display `title` field. - Deprecate the nonstandard `deviceName` field. **Before** ``` [ { "id": "3c9f24bedab0e73fca6a1b295030e7af9346a8c0-1", "title": "React Native Bridgeless [C++ connection]", "description": "com.facebook.RNTester", ... } ``` The `description` field was previously the closest thing we had to a target identifier. Today, this is not needed, since we have the stable `reactNative.logicalDeviceId` field. **After** ``` [ { "id": "3c9f24bedab0e73fca6a1b295030e7af9346a8c0-1", "title": "com.facebook.RNTester (iPhone 16 Pro)", "description": "React Native Bridgeless [C++ connection]", ... } ``` The `title` field is now more human readable and aligned with what we render in the window title of React Native DevTools. The `description` field describes the type of debugger target (the specific React Native implementation). Changelog: [Internal] Reviewed By: vzaidman Differential Revision: D63329456 fbshipit-source-id: cfe98f77e31c729431005925cfc66e2780ef8c72
@react-native/dev-middleware
Dev server middleware supporting core React Native development features. This package is preconfigured in all React Native projects.
Usage
Middleware can be attached to a dev server (e.g. Metro) using the createDevMiddleware API.
import { createDevMiddleware } from '@react-native/dev-middleware';
function myDevServerImpl(args) {
...
const {middleware, websocketEndpoints} = createDevMiddleware({
projectRoot: metroConfig.projectRoot,
serverBaseUrl: `http://${args.host}:${args.port}`,
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 and @react-native/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) endpoints supported by React Native, including the Inspector Proxy, which facilitates connections with multiple devices.
- Dev actions — Endpoints implementing core Dev Menu actions, e.g. reloading the app, opening the debugger frontend.
HTTP endpoints
DevMiddlewareAPI.middleware
These are exposed as a connect middleware handler, assignable to Metro.runServer or other compatible HTTP servers.
GET /json/list, /json (CDP)
Returns the list of available WebSocket targets for all connected React Native app sessions.
GET /json/version (CDP)
Returns version metadata used by Chrome DevTools.
GET /debugger-frontend
Subpaths of this endpoint are reserved to serve the JavaScript debugger frontend.
POST /open-debugger
Open the JavaScript debugger for a given CDP target (direct Hermes debugging).
Example
curl -X POST 'http://localhost:8081/open-debugger?appId=com.meta.RNTester'
WebSocket endpoints
DevMiddlewareAPI.websocketEndpoints
/inspector/device
WebSocket handler for registering device connections.
/inspector/debug
WebSocket handler that proxies CDP messages to/from the corresponding device.
Contributing
Changes to this package can be made locally and tested against the rn-tester app, per the Contributing guide. During development, this package is automatically run from source with no build step.