Issues with Chrome as a DebuggerThe entire debugger setup is pretty clever as it brings the classic web development workflow to mobile. However, there are a few issues with this setup
- Communication during debug mode is over a web socket, which is inherently asynchronous. This poses a problem for cases when native modules expose synchronous APIs. The issue only gets larger Fabric and TurboModules, which have many more synchronous methods.
- Many developers currently using the JS Profiler in Chrome to understand the performance of their React Native app. The profiles are not accurate since they have that web socket layer, introducing a level of network latency, which is not present in the real app.
To work around this, we an use inline sourcemap that can be enabled by a single line change in the Appdelegate.m file.
In the file sourceURLForBridge, replace return [[RCTBundleURLProvider sharedSettings]... with the following
[NSURL URLWithString:[[[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil] absoluteString] stringByAppendingString:@"&inlineSourceMap=true" ]];
This line simply appends a inlineSourceMap=true, making metro return the sourecmaps with the index.bundle file.
Once this is setup, Safari can successfully recognize the sourcecmaps and open the source files correctly.
Note that this method works with emulators, it does not work with the device. Now that we have Safari working, I would also like to get the JS Profiler in Safari, to give us accurate JS execution information, which should help improving performance of the apps.