react-native-reanimated icon indicating copy to clipboard operation
react-native-reanimated copied to clipboard

Enable UI runtime debugging on v8

Open Kwasow opened this issue 3 years ago • 0 comments

Description

This PR fixes the initialization of the V8 runtime, as well as enabling debugging for Reanimated's runtime.

The debugger can be accessed at chrome://inspect at the moment, with possible support in the reanimated Flipper plugin in the future, since it is listed at localhost:8081/json.

Thanks to @Kudo for this suggestion!

Features

TL;DR: Works slightly better than Hermes, since V8 has better integration with Chrome DevTools so we get hints for global objects and inline current runtime values (see video below).

  • Setting breakpoints
  • Console is responsive
  • I did not find any regressions

FabricExample app crashes after second reload regardless of if DevTools are connected, but this also happens when enableInspector is set to false in ReanimatedRuntime.cpp so it is most likely not an issue on our end (or at least doesn't have anything to do with debugging).

https://user-images.githubusercontent.com/10947344/191940046-b45b2e22-33f1-41bc-85c9-c17d89f16fed.mp4

Checklist

  • [ ] Included code example that can be used to test this change
  • [ ] Updated TS types
  • [ ] Added TS types tests
  • [ ] Added unit / integration tests
  • [x] Updated documentation
  • [ ] Ensured that CI passes

Kwasow avatar Sep 23 '22 10:09 Kwasow