116-7
ab81c16b65
Summary: … request to local pathname comparator variables to fix issue with other rightward elements of url such as query or fragment entering the comparison and causing 404 errors for key debugging routes. A change in Chromium appended the query "?for_tabs" to the /json/list request made by Chrome DevTools to find remote debugger targets. The current comparison in InspectorProxy.js compares the entire node IncomingMessage url field to the local pathname constants. The issue arises as url can also contain the query and fragment portions so the original comparison of "/json/list" === "/json/list" which resolved as true would become "/json/list?for_tabs" === "/json/list" and evaluate to false ultimately resulting in a 404 for the request. In summary, all these changes/issues caused remote debugging of Hermes code in React Native apps to become unavailable, greatly impacting developer experience. ## Changelog: [GENERAL] [FIXED] JS Debugging: Fix inspector-proxy to allow for DevTools requests with query strings Pull Request resolved: https://github.com/facebook/react-native/pull/41005 Reviewed By: NickGerleman Differential Revision: D50342265 Pulled By: robhogan fbshipit-source-id: a65f2908f0bea9fc15e1e3e4e6d31a3b9598e81f
@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.