Commit Graph

25 Commits

Author SHA1 Message Date
Alex Hunt 352d4b1c83 Add default browser fallback to debugger launch flow (#44673)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44673

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57726648

fbshipit-source-id: 66eaab1dd0d53fe2befb3dc96d5deb426b86e3e7
2024-05-27 02:53:36 -07:00
Alex Hunt 5d827d83c1 Simplify debugger launch flow to invoke Chrome directly, drop kill API (#44672)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44672

Swaps out and simplifies the internals of the debugger launch flow.

We observed that we could achieve better launch/windowing behaviour by passing the `--app` argument directly to the detected Chrome path.

This shares the user's default Chrome profile:
- Fixes unwanted behaviour such as a separate dock icon on macOS (which, when clicked, would launch an unwanted empty window).
- Enables settings persistence.

This change also removes the `LaunchedBrowser.kill` API.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57726649

fbshipit-source-id: fc3a715dc852a50559048d1d1c378f64aeb2013f
2024-05-27 02:53:36 -07:00
Alex Hunt 7e0f86f34b Revert debugger launch behaviour to default profile (#44638)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44638

Reverts the debugger launch flow to use the default `ChromeLauncher` profile. This is the approach used in the current `--experimental-debugger` experiment and by Expo.

This is motivated after a review of the tradeoffs of a guest profile — which allow us to programatically quit the browser process, however takes over system URL handling.

Changelog: [Internal]

Reviewed By: hoxyq

Differential Revision: D57619542

fbshipit-source-id: 3713e1cf8eed61e7a70ed1e4eb58f02da845155f
2024-05-27 02:53:36 -07:00
Alex Hunt 185f63b0db Add experiment to configure internal debugger branding (#44388)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44388

Towards the open source rollout of the `rn_fusebox.ts` entry point.

NOTE: Requires https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/59, but can (and should) be landed safely beforehand.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D56883040

fbshipit-source-id: acee5d53c0f93ef9dc2d498001291b1e35237824
2024-05-02 09:15:30 -07:00
Moti Zilberman b1bb0bee41 Align debugger Chrome launch flags with Meta-internal version (#44180)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/44180

Changelog: [General][Changed] Update Chrome launch flags for `--experimental-debugger` launch flow

Internally at Meta, we've been testing the experimental debugger launch flow with a different set of Chrome flags than are currently shipped in open source. This diff fixes those differences:

* Removes `--disable-backgrounding-occluded-windows`
* Adds `--guest`

Reviewed By: EdmondChuiHW

Differential Revision: D56418271

fbshipit-source-id: 884c5746e93cad89f17e4ef9e3ef193a2a454eb5
2024-04-22 08:37:32 -07:00
Alex Hunt 0b23ff6631 Add capability flag to select rn_fusebox debugger frontend (#43688)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43688

Context: https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/34.

Changelog: [Internal]

Reviewed By: EdmondChuiHW

Differential Revision: D55474522

fbshipit-source-id: 4f514dba228bfa4df41a0eb9687f2525cc32b2d7
2024-04-02 10:12:49 -07:00
Edmond Chui af309127a4 Add support for launch ID (#43585)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43585

Changelog: [internal]

Related PR: https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/27

Reviewed By: hoxyq

Differential Revision: D55164646

fbshipit-source-id: 0f25f150603a24654020093697e76d85d0d8cc02
2024-03-28 13:48:30 -07:00
Moti Zilberman 1ae379c6ec Migrate back to chromium-edge-launcher since Windows fix was merged (#43562)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/43562

A resubmission of D55013623 (Pull Request resolved: https://github.com/facebook/react-native/pull/43524) with a fix for the internal `.flowconfig` issue that got the initial diff reverted.

 ---

The [Windows fix](https://github.com/cezaraugusto/chromium-edge-launcher/pull/1) was merged and published. We no longer need to use the fork.

## Changelog:

[INTERNAL] [FIXED] - Fix experimental debugger launch flow with Edge on Windows

Reviewed By: NickGerleman

Differential Revision: D55087731

fbshipit-source-id: 6fd28a32447ad07dacdf6cd77390e18489fd6cfb
2024-03-20 03:55:35 -07:00
Wendi Du ff5e1a605a Revert D55013623: Migrate back to chromium-edge-launcher since Windows fix was merged
Differential Revision:
D55013623

Original commit changeset: bff2aa2801dd

Original Phabricator Diff: D55013623

fbshipit-source-id: d7f19068327b5cf427750fbcae01d3c10f9c89b5
2024-03-18 14:29:02 -07:00
Tommy Nguyen 43ffce9fb3 Migrate back to chromium-edge-launcher since Windows fix was merged (#43524)
Summary:
The [Windows fix](https://github.com/cezaraugusto/chromium-edge-launcher/pull/1) was merged and published. We no longer need to use the fork.

## Changelog:

[INTERNAL] [FIXED] - Fix experimental debugger launch flow with Edge on Windows

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

Test Plan: n/a

Reviewed By: robhogan

Differential Revision: D55013623

Pulled By: motiz88

fbshipit-source-id: bff2aa2801dd0dcdd6975dca0a2ec2aa9864ff6f
2024-03-18 10:45:04 -07:00
Moti Zilberman 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
Edmond Chui 496724fbdb Remove URI encoding
Summary:
Changelog: [Internal]

Fixed double-encoding for the websocket url.
`URLSearchParams` already encode the values, passing a pre-encoded `encodeUriComponent` string will cause it to double-encode, making the value unreadable when decoding once.

Missed these lines while splitting the initial diff stack.
Added tests now.

Reviewed By: motiz88

Differential Revision: D53721568

fbshipit-source-id: cfaaa7eb50c40364c904e9ffc5698201df8ab22b
2024-02-14 05:20:46 -08:00
Edmond Chui 7e3e7684b1 refactor URL construction (#42948)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/42948

Changelog: [Internal]

Refactor URL construction for DevTools.

Next diffs in the stack will add additional URL query params.

Support for both absolute and relative `devServerUrl`s maintained.

Reviewed By: hoxyq

Differential Revision: D53620915

fbshipit-source-id: 4a64c49c3479ede2add9f39a24448787d8609172
2024-02-12 04:08:14 -08:00
Cedric van Putten 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 Zilberman 560e0f0005 Migrate to @rnx-kit/chromium-edge-launcher for Windows fix (#41367)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41367

Andrew Coates graciously published the Windows Edge launcher fix from https://github.com/cezaraugusto/chromium-edge-launcher/pull/1 as a new package (https://github.com/microsoft/rnx-kit/pull/2796), so let's pull that into `dev-middleware`.

Changelog: [Internal] - Fix experimental debugger launch flow with Edge on Windows

Reviewed By: robhogan

Differential Revision: D51086297

fbshipit-source-id: 3a8db351f71eb31a9609c987cdb4dc66f24f9403
2023-11-15 00:18:10 -08:00
Alex Hunt 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 Hunt 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 Zilberman 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 Zilberman 34a7526e79 Remove host/port params, construct WebSocket URL from /json request (#39394)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39394

* Constructs DevTools frontend WebSocket URLs with a client-accessible host, port and scheme derived from the initiating HTTP request (`/json` or `/open-debugger`), instead of from the static `host` and `port` parameters provided to `createDevMiddleware`. This results in more proxy-safe behaviour.
* Removes the now-unused `host` and `port` parameters from `createDevMiddleware`.

Changelog: [Internal]

Reviewed By: huntie

Differential Revision: D49158227

fbshipit-source-id: ec61d98458e5d5afba4eb937b84ff65071495cc9
2023-09-12 04:57:58 -07:00
Moti Zilberman 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 Hunt 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 Hunt 4cb9706331 Add Microsoft Edge support for opening debugger (#39146)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39146

Adds Microsoft Edge fallback for the `/open-debugger` endpoint when no Chrome installation is found.

Changelog: [Internal]

Reviewed By: motiz88

Differential Revision: D48563386

fbshipit-source-id: 74baba7c03a062bd769b2f9ac0cc35bac0b2ae65
2023-08-24 10:57:39 -07:00
Alex Hunt 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
Alex Hunt c82cf64a22 Move metro-inspector-proxy into dev-middleware (#39045)
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/39045

## Context

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

## Changes

- Relocates `metro-inspector-proxy` source from the Metro repo into the React Native repo as part of the `react-native/dev-middleware` package.
    - Drops the `runInspectorProxy` entry point.
- Attaches the Inspector Proxy to the `createDevMiddleware()` API as the new integration point for this functionality.
- Documents migrated endpoints + usage of `createDevMiddleware()` in README.

Changelog: [Internal]
Metro changelog: None (`metro-inspector-proxy` is now an internal component of `react-native`, covered in the [release notes for 0.78.1](https://github.com/facebook/metro/releases/tag/v0.78.1))

Reviewed By: motiz88, blakef

Differential Revision: D48066213

fbshipit-source-id: 3fbef5d881f6f451cb5955dcbbc362c53347437e
2023-08-18 01:38:10 -07:00
Alex Hunt 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