原文地址：blog.nparashuram.com/2019/10/deb…
发布时间：2019年10月4日
React Native有很好的开发者体验，而调试工作流程是工作流程的核心。今天，我们使用Chrome来调试React Native应用中的JavaScript。在这篇博客中，我将探讨使用Safari调试工作流的另一种方法。
今天，调试是如何工作的
要开始调试，我们打开开发者菜单（使用Cmd+D）并选择 "用Chrome浏览器调试"。这个操作告诉Metro封装器打开Chrome浏览器，JavaScript代码现在在Chrome上运行，而不是在设备上运行。Chrome浏览器和设备/模拟器之间通过metro的web套接字连接负责将JS命令传递给Chrome浏览器，并将语句的结果发送回模拟器。
将Chrome作为调试器的问题
整个调试器的设置非常聪明，因为它将经典的Web开发工作流程带到了移动端。然而，这个设置有几个问题
- 设备上运行的JS虚拟机是JavaScript Core（JSC），在调试模式下与V8/Chrome不同。这些JS虚拟机的差异可能导致难以修复的bug。
- 调试模式下的通信是通过网络套接字进行的，而网络套接字本质上是异步的。这为本地模块暴露同步API的情况带来了问题。这个问题只有在Fabric和TurboModules较大的情况下才会出现，因为它们有更多的同步方法。
- 目前许多开发者使用Chrome中的JS Profiler来了解其React Native应用的性能。这些配置文件并不准确，因为它们有那个web socket层，引入了一个级别的网络延迟，这在真实的应用中是不存在的。
使用Safari
原来，Safari可以用来连接到运行JSC的应用。对于React Native应用，我们可以使用Safari来调试JavaScript，并使用设置断点、检查变量等工作流程。然而，Safari中的JSC调试器并不使用网络栈，这意味着index.bundle文件中的sourcemap URL不会被评估，让我们不得不调试一个巨大的JS文件。
为了解决这个问题，我们在Appdelegate.m文件中修改一行就可以启用内联源码图。
在文件sourceURLForBridge中，将return [[RCTBundleURLProvider sharedSettings]...替换为以下内容。
[NSURL URLWithString:[[[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil] absoluteString] stringByAppendingString:@"&inlineSourceMap=true"]];
这一行只是简单地附加了一个inlineSourceMap=true，使得metro用index.bundle文件返回sourecmaps。 一旦设置完成，Safari就可以成功识别sourcecmaps并正确打开源文件。
接下来的步骤
需要注意的是，这个方法对仿真器有效，对设备无效。现在我们已经让Safari工作了，我还想让Safari中的JS Profiler，给我们提供准确的JS执行信息，这应该有助于提高应用程序的性能。
通过www.DeepL.com/Translator （免费版）翻译
