-
Notifications
You must be signed in to change notification settings - Fork 8.4k
fix(cli): use new @react-native/dev-middleware
for debugging
#25649
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
@@ -1,6 +0,0 @@ | |||
import { unstable_Device } from '@react-native/dev-middleware'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Generated TS types in the React Native repo! 😉🚀
Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>
1ea6862
to
3312f06
Compare
…t Native JS Inspector (#25671) # Why Follow-up of #25649 # How This PR changes two things 1. When pressing `j` in terminal, allow users to select a device using a select UI. This is copied from the multiple dev tools, and uses the (known) device name. This replaces the "open all app debuggers" to confuse users less. 2. When using `EXPO_USE_UNSTABLE_DEBUGGER=true`, the React Native JS Inspector is used instead of the "classic" Chrome DevTools from SDK <=49. It also cleans up the older middleware that handled `/inspector`. This is now handled by the CDP-spec-compliant `/json/list`. We could also move everything under `_expo/inspector/...` if this is a problem. # Test Plan - `$ bun create expo ./test-debugger --template blank` - `$ bun expo install expo@canary` - `$ bun expo install --fix` - `$ bun expo run:ios` - Or `$ EXPO_USE_UNSTABLE_DEBUGGER=true bun expo run:ios` # Checklist <!-- Please check the appropriate items below if they apply to your diff. This is required for changes to Expo modules. --> - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Evan Bacon <bacon@expo.io> Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>
…25649) # Why This PR re-implements the debugging tools, temporarily removed to merge the React Native `0.73.0-rc.x` upgrade. In this re-implementation, we are also trying to move over to the new React Native JS Inspector, the one shipped with React Native 0.73.x.  # TODO There are still pending/follow-up tasks to complete the full debugging transition. - [ ] (Optional) try to get rid of the last proxy workarounds, besides using different `Device` class - [ ] Fix `@react-native/dev-middleware` not responding to `/open-debugger` (request times out, but works) - [ ] Enable network inspector inside Chrome DevTools from `@react-native/dev-middleware` - [ ] Use file tree instead of snippet workspaces, under `sources` tab in Chrome DevTools from `@react-native/dev-middleware` - [ ] Update `vscode-expo-tools` to provide `?userAgent=`, since we don't get any `user-agent` header from the extension. # How - Refactored existing `InspectorProxy`, `InspectorDevice`, and all handles into new `debugging` group under `src/start/server/metro/debugging`. - Integrated `@react-native/dev-middleware` into separate `createDebugMiddleware` function - Extend `InspectorProxy` instead of wrapping it - Cleaned up no-longer-necessary workarounds and overwrites in `InspectorProxy` and `InspectorDevice` # Test Plan Prepare the current template as npm tarball - `$ cd .../expo/expo` - `$ cd ./templates/expo-template-bare-minimum/` - `$ npm pack` Prepare a new canary project - `$ bun create expo ./test-debug --template blank` - `$ bun expo install expo@canary` - `$ expod install --fix` (_`expod` → run `@expo/cli` from source_) - `$ expod prebuild --template ./<tarball-from-above>.tgz` - `$ expod run:ios` - Open the _two_ debuggers: - **Press J in terminal** → Current Expo Chrome DevTools implementation - `$ curl -X POST "http://localhost:8081/open-debugger"` → Experimental Chrome DevTools - `$ curl -X POST "http://localhost:8081/open-debugger?appId=<bundleIdentifier>"` → Experimental Chrome DevTools - `$ curl -X POST "http://localhost:8081/open-debugger?device=<deviceIdentifier>"` → Experimental Chrome DevTools (see [device ID for android](https://github.com/facebook/react-native/blob/c0375b8dadaafc0e0c11bbe676a61c44ac9fab1d/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevServerHelper.java#L317C20-L317C40)) # Checklist <!-- Please check the appropriate items below if they apply to your diff. This is required for changes to Expo modules. --> - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>
…t Native JS Inspector (expo#25671) # Why Follow-up of expo#25649 # How This PR changes two things 1. When pressing `j` in terminal, allow users to select a device using a select UI. This is copied from the multiple dev tools, and uses the (known) device name. This replaces the "open all app debuggers" to confuse users less. 2. When using `EXPO_USE_UNSTABLE_DEBUGGER=true`, the React Native JS Inspector is used instead of the "classic" Chrome DevTools from SDK <=49. It also cleans up the older middleware that handled `/inspector`. This is now handled by the CDP-spec-compliant `/json/list`. We could also move everything under `_expo/inspector/...` if this is a problem. # Test Plan - `$ bun create expo ./test-debugger --template blank` - `$ bun expo install expo@canary` - `$ bun expo install --fix` - `$ bun expo run:ios` - Or `$ EXPO_USE_UNSTABLE_DEBUGGER=true bun expo run:ios` # Checklist <!-- Please check the appropriate items below if they apply to your diff. This is required for changes to Expo modules. --> - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin). --------- Co-authored-by: Evan Bacon <bacon@expo.io> Co-authored-by: Expo Bot <34669131+expo-bot@users.noreply.github.com>
Why
This PR re-implements the debugging tools, temporarily removed to merge the React Native
0.73.0-rc.x
upgrade.In this re-implementation, we are also trying to move over to the new React Native JS Inspector, the one shipped with React Native 0.73.x.
TODO
There are still pending/follow-up tasks to complete the full debugging transition.
Device
class@react-native/dev-middleware
not responding to/open-debugger
(request times out, but works)@react-native/dev-middleware
sources
tab in Chrome DevTools from@react-native/dev-middleware
vscode-expo-tools
to provide?userAgent=
, since we don't get anyuser-agent
header from the extension.How
InspectorProxy
,InspectorDevice
, and all handles into newdebugging
group undersrc/start/server/metro/debugging
.@react-native/dev-middleware
into separatecreateDebugMiddleware
functionInspectorProxy
instead of wrapping itInspectorProxy
andInspectorDevice
Test Plan
Prepare the current template as npm tarball
$ cd .../expo/expo
$ cd ./templates/expo-template-bare-minimum/
$ npm pack
Prepare a new canary project
$ bun create expo ./test-debug --template blank
$ bun expo install expo@canary
$ expod install --fix
(expod
→ run@expo/cli
from source)$ expod prebuild --template ./<tarball-from-above>.tgz
$ expod run:ios
$ curl -X POST "http://localhost:8081/open-debugger"
→ Experimental Chrome DevTools$ curl -X POST "http://localhost:8081/open-debugger?appId=<bundleIdentifier>"
→ Experimental Chrome DevTools$ curl -X POST "http://localhost:8081/open-debugger?device=<deviceIdentifier>"
→ Experimental Chrome DevTools (see device ID for android)Checklist
npx expo prebuild
& EAS Build (eg: updated a module plugin).