Commit Graph
18 Commits
Author SHA1 Message Date
Moti ZilbermanandFacebook GitHub Bot 451fffbb59 Use host-relative WebSocket URLs when launching new debugger
Summary:
Changelog: [Internal]

Uses the capability introduced in https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/4 to avoid repeating the dev server's host:port in the `ws` / `wss` parameter we pass to the Chrome DevTools frontend. This gives us more flexibility to handle port forwarding and redirects outside of `dev-middleware`. This is mostly useful in Meta's internal VS Code remoting setup, but this particular change should work equally well in open source.

Reviewed By: huntie

Differential Revision: D54107316

fbshipit-source-id: 68d4dbf4849ca431274bfb0dc8a4e05981bdd5b5
2024-02-26 05:33:18 -08:00
Alex HuntandFacebook GitHub Bot 9ba56f6f5d Remove matching of Modern/Legacy page types (#42885)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42885

## Context

We're introducing the concept of **capability flags** to provide granular control of behaviours in the Inspector Proxy, to replace the recently added `type: 'Legacy' | 'Modern'` target switch.

A capability flag disables a specific feature/hack in the Inspector Proxy layer by indicating that the target supports one or more modern CDP features.

## This diff

Following D53355413, we're now able to remove the previous `type: 'Legacy' | 'Modern'` page concept, implemented in this diff.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53358480

fbshipit-source-id: 62e53a1bd60760291ada3479121dfca9e1f6edbc
2024-02-06 04:09:53 -08:00
Alex HuntandFacebook GitHub Bot 96db0fd1b6 Add support for target capability flags (#42817)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42817

## Context

We're introducing the concept of **capability flags** to provide granular control of behaviours in the Inspector Proxy, to replace the recently added `type: 'Legacy' | 'Modern'` target switch.

A capability flag disables a specific feature/hack in the Inspector Proxy layer by indicating that the target supports one or more modern CDP features.

## This diff

- Implements capability flags in `InspectorProxy`, via an optional `"capabilities"` key returned by a device's CDP server.
- Wires up an initial flag, `nativePageReloads`, to disable the legacy "React Native Experimental (Improved Chrome Reloads)" page and emulated page reload behaviour.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D53352244

fbshipit-source-id: 622fc6028174919b9bf776e3ac52724d97ca2734
2024-02-06 04:09:53 -08:00
Moti ZilbermanandFacebook GitHub Bot ca2dde5906 Support launching experimental debugger for modern CDP targets (#42302)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42302

Changelog: [Internal][Added] Support launching experimental debugger frontend for CDP targets marked as "modern"

See the definition of "modern" targets in D50967795.

Reviewed By: hoxyq

Differential Revision: D52786332

fbshipit-source-id: 13718e9ddf3ec050049ef7ec9a77f6cf1a7f82ee
2024-01-18 07:52:51 -08:00
Cedric van PuttenandFacebook GitHub Bot 8ef807bfb2 feature(dev-middleware): add enableNetworkInspector experiment (#41787)
Summary:
This enables the network panel/inspector by passing the `unstable_enableNetworkPanel=true` to the React Native JS Inspector. (See https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/2)

By setting this inside the `experiments`, we can enable/disable network related CDP handlers within the proxy.

## Changelog:

[GENERAL] [ADDED] - Add `enableNetworkInspector` experiment to enable Network panel and CDP handlers in inspector proxy

Pull Request resolved: https://github.com/facebook/react-native/pull/41787

Test Plan: TBD, will provide a repository using an Expo canary / RN 0.73.0-rc release.

Reviewed By: NickGerleman

Differential Revision: D51811892

Pulled By: huntie

fbshipit-source-id: 541d96b6f0735104a4050a24a152e1158871ed1d
2023-12-07 08:30:03 -08:00
Moti ZilbermanandFacebook GitHub Bot d6e0bc714a Enable lint/sort-imports everywhere (#41334)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41334

TSIA.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D51025812

fbshipit-source-id: e10d437be775a6b80946483aa96460f34927f870
2023-11-06 12:59:38 -08:00
Moti ZilbermanandFacebook GitHub Bot 7009634d38 Enable launching debugger by device ID (#41154)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41154

Pull Request resolved: https://github.com/facebook/react-native/pull/41080

Building on byCedric's approach in https://github.com/facebook/metro/pull/991, adds support for passing a `device=...` argument to `/open-debugger` for more precise targeting.

Changelog: [Internal]

 ---

## Note on what "device" means in this context

In `dev-middleware` / `inspector-proxy`, "device" is something of a misnomer. It refers to a *logical device* containing one or more *pages*. In React Native, each app process forms its own logical device in which individual VMs register themselves as pages. An instance of `inspector-proxy` connects one or more *debuggers* (frontends) to one or more logical devices (one frontend to one page on one device).

The intent of the logical device ID is to help with target discovery and especially *re*discovery - to reduce the number of times users need to explicitly close and restart the debugger frontend (e.g. after an app crash).

If provided, the logical device ID:
1. SHOULD be stable for the current combination of physical device (or emulator instance) and app.
2. SHOULD be stable across installs/launches of the same app on the same device (or emulator instance), though it MAY be user-resettable (so as to not require any special privacy permissions).
3. MUST be unique across different apps on the same physical device (or emulator).
4. MUST be unique across physical devices (or emulators).
5. MUST be unique for each concurrent *instance* of the same app on the same physical device (or emulator).

NOTE: The uniqueness requirements are stronger (MUST) than the stability requirements (SHOULD). In particular, on platforms that allow multiple instances of the same app to run concurrently, requirements 1 and/or 2 MAY be violated in order to meet requirement 5. This will be relevant, for example, on desktop platforms.

In an upcoming diff, we will pass device IDs meeting these criteria from both iOS and Android.

Reviewed By: huntie, blakef

Differential Revision: D49954920

fbshipit-source-id: 45f2b50765dece34cbb93fa32abcdf3b0522391c
2023-10-23 05:50:36 -07:00
Alex HuntandFacebook GitHub Bot 9e068ac163 Add --experimental-debugger-frontend flag, restore 0.72 flow as base (#40766)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/40766

This changeset allows users to opt into the new debugger frontend experience by passing `--experimental-debugger` to `react-native start`. **We are defaulting this option to `true`** for now, but will continue to evaluate this feature before 0.73 ships. It restores Flipper (via `flipper://`) as the default handling for `/open-debugger` (matching 0.72 behaviour) when this flag is not enabled.

Detailed changes:

- Replaces `enableCustomDebuggerFrontend` experiment in `dev-middleware` with `enableNewDebugger`. The latter now hard-swaps between the Flipper and new launch flows.
    - Removes now-unused switching of `devtoolsFrontendUrl`.
- Implements `deprecated_openFlipperMiddleware` (matching previous RN CLI implementation).
- Disables "`j` to debug" key handler by default.
- Marks "`j` to debug" and `/open-debugger` console logs as experimental.

Changelog:
[Changed][General] Gate new debugger frontend behind `--experimental-debugger` flag, restore Flipper as base launch flow

Reviewed By: motiz88

Differential Revision: D50084590

fbshipit-source-id: 5234634f20110cb7933b1787bd2c86f645411fff
2023-10-10 09:37:41 -07:00
Alex HuntandFacebook GitHub Bot 850e550422 Add serverBaseUrl option, set client-accessible URL value externally (#39456)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39456

**Fixes new debugger launch flow on Android:**

D49158227 aimed to improve proxy-safe behaviour for remote dev servers by auto-detecting the appropriate server URL for clients using the `Host` header (etc) from the HTTP request. However, this approach broke the local case for Android emulators and externally connected devices since they would originate from a device-relative server hostname — e.g. `10.0.2.2` for the stock Android emulator.

https://pxl.cl/3mVmR

This commit reverts to an explicit approach where callers specify the base URL to the dev server that should be addressible from the development machine — now as a single `serverBaseUrl` option.

**Changes**

- Adds new `serverBaseUrl` option to `createDevMiddleware`, designed to be the base URL value for constructing dev server URLs returned in endpoints such as `/json/list`.
    - This changes little for the `localhost` case (now enabling `https://` URLs), but enables remote dev server setups to specify this cleanly.
- Updates call site in `community-cli-plugin`.

Changelog: [Internal]

Reviewed By: robhogan

Differential Revision: D49276125

fbshipit-source-id: 2b6a8507073649832993971aa9d0870f54c9bd44
2023-09-15 13:11:04 -07:00
Moti ZilbermanandFacebook GitHub Bot 6038598302 Experimentally support GET requests in /open-debugger (#39418)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39418

Changelog: [Internal]

Adds the `enableOpenDebuggerRedirect` experiment flag. The flag enables the handling of GET requests in the `/open-debugger` endpoint, in addition to POST requests. GET requests respond by redirecting to the debugger frontend, instead of opening it using the `BrowserLauncher` interface.

This can be useful when integrating `dev-middleware` in highly customised environments (e.g. VS Code remoting) where things like automatic port forwarding interact poorly with the `BrowserLauncher` abstraction.

WARNING: As this is gated by an experiment flag, the functionality may change or go away unannounced. In separate work, we will look into a stable solution for this use case.

Reviewed By: huntie

Differential Revision: D49144733

fbshipit-source-id: 5af6c8b2ddaa7b6e7d14c792e49fe3d0849c7a25
2023-09-14 06:08:57 -07:00
Moti ZilbermanandFacebook GitHub Bot b8e42ea7b4 Build client-accessible frontend URLs in /open-debugger (#39423)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39423

D49158227 made the CDP WebSocket URLs returned from `/json` proxy-safe by using the Host header (etc) from the HTTP request. This did *not* fully fix the related `/open-debugger` endpoint, because the original headers were being lost in the internal `fetch('/json')` call.

Here, we eliminate that `fetch` call, and instead give the `/open-debugger` handler direct access to the method on `InspectorProxy` that backs the `/json` endpoint. This allows us to pass in an appropriate base URL derived from the headers seen by `/open-debugger`.

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D49229545

fbshipit-source-id: 9036ab295721e0d1fd3cdb608d0a7cc07b8f2eeb
2023-09-14 06:08:57 -07:00
Moti ZilbermanandFacebook GitHub Bot 3ec22c1e69 Add option to enable experimental debugger frontend (#39227)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39227

Changelog: [Internal]

1. Adds an `unstable_experiments` option to `createDevMiddleware` in `react-native/dev-middleware`.
2. Adds `enableCustomDebuggerFrontend` (default `false` for now) as an experiment flag controlling whether the new debugger frontend (D48680624, D48682302) is in use. We plan to enable this by default in RN 0.73 after additional testing.

If enabled, the new debugger frontend will only be used for the `/open-debugger` flow

Reviewed By: huntie

Differential Revision: D48602725

fbshipit-source-id: 598865b559478df1f19420daf3633ee6c233362a
2023-09-04 12:21:47 -07:00
Alex HuntandFacebook GitHub Bot f688a2d4be Update /open-debugger to try first target when unspecified (#39255)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39255

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48873336

fbshipit-source-id: 8d3aac383de1cefa303a89fbfee9a23ce906a979
2023-09-04 06:36:42 -07:00
Alex HuntandFacebook GitHub Bot a5fd0f17e9 Revert to built-in devToolsFrontendUrl in target list (#39242)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39242

Reverts external behaviour of https://github.com/facebook/react-native/pull/39122.

- `/json/list` once again returns the built-in `devtools://devtools/bundled/js_app.html` URL — effectively freezing the current experience in Flipper.
- `/open-debugger` continues to use the *new* frontend via `getDevToolsFrontendUrl`.
    - *Eventually*, we'll want to align this as the returned `devtoolsFrontendUrl` value once Flipper is out of the picture.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48868767

fbshipit-source-id: 088ecebffa6ce45cb9bed44e3b02df4b7b471068
2023-08-31 09:36:00 -07:00
Alex HuntandFacebook GitHub Bot dab7738a88 Expose unstable_browserLauncher option
Summary:
Expose a `unstable_browserLauncher` option to `createDevMiddleware()`. This allows integrators to provide a custom implementation for opening URLs in a web browser, initially a `launchDebuggerAppWindow` method.

Customising the browser launcher implementation can be useful in cases where the dev server is running remotely and not on the developer's local machine.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48647750

fbshipit-source-id: ebf34106ad27899024396b13b22ec4536aad05b9
2023-08-25 10:02:12 -07:00
Alex HuntandFacebook GitHub Bot f9e936e280 Update devtoolsFrontendUrl value in target list (#39122)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39122

Updates the `devtoolsFrontendUrl` value returned in the `/json/list` endpoint, to match the fixed DevTools frontend revision we set for `/open-debugger` — which now uses this as the source of truth.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48561005

fbshipit-source-id: 19409d013366f82782a071a0ec01d1ce8fab8c38
2023-08-23 04:17:12 -07:00
Moti ZilbermanandFacebook GitHub Bot f4f18940d7 Create unstable API for event logging (#39091)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39091

Changelog: [Internal]

Adds a simple typed logging hook to `react-native/dev-middleware`. This is intended to allow integrators to receive events from the dev server, apply any relevant sampling/processing, and log them to a backend. (To be clear, the open source version of React Native does not and will not collect any data.)

WARNING: The API will evolve over the coming weeks/months and is *not guaranteed to be stable* - it might even break between patch releases.

Reviewed By: huntie

Differential Revision: D48466760

fbshipit-source-id: ed1e21fb0dac5d6199ff1ee26017a1d33d9b7d92
2023-08-21 10:31:50 -07:00
Alex HuntandFacebook GitHub Bot a991ff3837 Create dev-middleware package (#38194)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/38194

## Context

RFC: Decoupling Flipper from React Native core: https://github.com/react-native-community/discussions-and-proposals/pull/641

## Changes

Inits the `react-native/dev-middleware` package. Contains an initial implementation of `/open-debugger`, migrated from https://github.com/react-native-community/cli/commit/2535dbe2346a390b2c5034acf0b348347fce0b73.

## Attribution

This implementation is greatly inspired by `expo/dev-server`: https://github.com/expo/expo/blob/1120c716f35cb28d88800e8f5d963d2b2ac94705/packages/%40expo/dev-server/src/JsInspector.ts#L18

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D46283818

fbshipit-source-id: 7b38ad2f6d7346366a7c599d16e289e04b7bd88d
2023-07-07 09:22:09 -07:00