Skip to content
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

New React Native debugger support #530

Merged
merged 7 commits into from
Sep 11, 2024
Merged

New React Native debugger support #530

merged 7 commits into from
Sep 11, 2024

Conversation

kmagiera
Copy link
Member

@kmagiera kmagiera commented Sep 9, 2024

This PR adds the new React Native debugger support to IDE. The new debugger will be enabled starting from RN 0.76, but it can be used in prior versions (0.72 even) after enabling build configuration flag.

Here's the gist of the changes:

  1. We updated the way we lookup websocket debugger URL after reading the list of available pages from /list/json endpoint. The old debugger had a different format for page IDs that we used to detect the runtime that supported reloads. With the new debugger this is no longer necessary as c++ adapter handles that and gives us a stable device id hash. To make this compatible across different RN versions, we now use the new lookup mechanism, and if we don't find any matches we fallback to the old lookup method
  2. The new debugger uses a project alias when compiling source maps. Instead of using absolute paths for filenames, it now uses a prefix "/[metro-project]". This needs to be taken into account when transforming file names the editor uses. We account for this in debug adapter implementation that takes a new configuration option. When launching the debugger, we detect whether it uses new or old debugger (based on the page naming) and sets up the alias processing when necessary.

Caveat

The path resolution bit may not work on Windows yet as we use "/[metro-project" as prefix, and I'm not sure if metro uses backslash on Windows or not, and if it does I don't know if path.join will handle this. So this change needs to be tested and fixed on Windows.

Test plan

This has been tested with RN 76 test app from #535 on Android and iOS by adding some breakpoints in the app code.
Also test old debugger flow, especially on Android, as we touched some lines of code that were there to translate debugger endpoints to local network addresses.

Copy link

vercel bot commented Sep 9, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-native-ide ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 11, 2024 10:16am

packages/vscode-extension/src/debugging/DebugAdapter.ts Outdated Show resolved Hide resolved
packages/vscode-extension/src/project/metro.ts Outdated Show resolved Hide resolved
@kmagiera kmagiera merged commit 38dff46 into main Sep 11, 2024
3 checks passed
@kmagiera kmagiera deleted the kmagiera/new-debugger branch September 11, 2024 10:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants