-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Enable debugging on Reanimated's runtime using Chrome DevTools #3526
Conversation
debugging.mp4 |
ios.mp4 |
Congratulations on this PR! You have completed a task that many have attempted but no one succeeded. A lot of research had to be done to make this happen. Certainly, it takes a lot of skills and patience to dive into and navigate through the deepest trenches of React Native ecosystem, in particular exploring undocumented areas of codebase of external tools such as Flipper and Metro. The solution you have proposed involves several programming languages including C++, Objective-C, Ruby, Java, Groovy, TypeScript and Flow as well as various development tools such as npm, yarn, Babel, Gradle, CMake, CocoaPods and Docusaurus. It was a pleasure to watch the progress of the work, follow your findings and conclusions, and finally discuss various aspects of the implementation, from code style to architecture and versioning. This feature is a game-changer and it will certainly be highly appreciated by the community. Thank you! |
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.
This PR broke integration with V8 engine
|
Thanks for letting us know @capezzbr, we'll definitely need to take a look at this. We don't have any V8 example app in our repo yet so there's no CI that checks V8 integration. I will try to setup the app anytime soon. |
…are-mansion#3526) ## Description This PR is related to software-mansion#1960 (and its replacement software-mansion#2047). It adds the ability to use Chrome DevTools to add breakpoints and debug worklets (or the UI context in general) both on Android and iOS. ## Major changes Runtime creation has been moved to `ReanimatedRuntime` for both Android and iOS (in the `Common/cpp/ReanimatedRuntime` directory). Before (Android) [file: `NativeProxy.cpp`]: ```cpp #if JS_RUNTIME_HERMES auto config = ::hermes::vm::RuntimeConfig::Builder().withEnableSampleProfiling(false); std::shared_ptr<jsi::Runtime> animatedRuntime = facebook::hermes::makeHermesRuntime(config.build()); #elif JS_RUNTIME_V8 … #else … #endif ``` After (shared) [file: `NativeProxy.cpp`]: ```cpp ReanimatedRuntime::make(jsQueue); ``` The custom build config has been removed, as sample profiling is set to false by default. The created `HermesRuntimeManager` object is the stored inside `ReanimatedNativeModule` as it is important that it’s lifetime is synced with the lifetime of the module. ## Testing - [x] Builds on Android - [x] Builds on Android in release mode - [x] App reloads work on Android - [x] Builds on iOS - [x] Builds on iOS in release mode - [x] App reloads work on iOS - [x] JSC still works - [x] JSC debugging in Safari with iOS still works - [x] Paper still works Versions of React-Native tested: 0.70 ## Things to look into - ~~Breakpoint labels do not appear on iOS~~ _I tested this on a new app with Flipper on the main JS thread, and it was also the case, so it seem to not be an issue on our side_ - ~~After removing a breakpoint on iOS it can't be set in the same location again~~ _This seems to be an issue with Chrome DevTools as connecting to Reanimated's runtime through Flipper fully works_ - ~~Edge-case: the app will crash if a reload is performed while the debugger is open~~ _Will be fixed in a PR to metro and [58e9e7b](https://github.com/software-mansion/react-native-reanimated/pull/3526/commits/58e9e7bcd7d3b6b590a5f6fca0db93a951eaa39e)_ - The latest release of Chrome (105) broke source maps, so only Flipper works now. I reported the issue [here](https://bugs.chromium.org/p/chromium/issues/detail?id=1360298#makechanges), and I'm waiting for a response from the Chromium team ## TODO - [x] Open PR to update debugging docs in documentation (will be included in software-mansion#3446) - [x] Open PR in [facebook/flipper](https://github.com/facebook/flipper) to enable Flipper support on custom runtimes (facebook/flipper#4047) - [x] Open PR in [facebook/metro](https://github.com/facebook/metro) to support debugger reloads on custom runtimes (facebook/metro#864)
Description
This PR is related to #1960 (and its replacement #2047). It adds the ability to use Chrome DevTools to add breakpoints and debug worklets (or the UI context in general) both on Android and iOS.
Major changes
Runtime creation has been moved to
ReanimatedRuntime
for both Android and iOS (in theCommon/cpp/ReanimatedRuntime
directory).Before (Android) [file:
NativeProxy.cpp
]:After (shared) [file:
NativeProxy.cpp
]:ReanimatedRuntime::make(jsQueue);
The custom build config has been removed, as sample profiling is set to false by default.
The created
HermesRuntimeManager
object is the stored insideReanimatedNativeModule
as it is important that it’s lifetime is synced with the lifetime of the module.Testing
Versions of React-Native tested: 0.70
Things to look into
Breakpoint labels do not appear on iOSI tested this on a new app with Flipper on the main JS thread, and it was also the case, so it seem to not be an issue on our side
After removing a breakpoint on iOS it can't be set in the same location againThis seems to be an issue with Chrome DevTools as connecting to Reanimated's runtime through Flipper fully works
Edge-case: the app will crash if a reload is performed while the debugger is openWill be fixed in a PR to metro and 58e9e7b
TODO
Hermes React Native
facebook/metro#864)