React Native调试源码分析——Debuger

最新推荐文章于 2023-01-11 22:35:46 发布

置顶

smallnewQaQ

最新推荐文章于 2023-01-11 22:35:46 发布

阅读量971

点赞数

分类专栏： react naitve 文章标签： RN debuger

本文链接：https://blog.csdn.net/tyro_smallnew/article/details/89341164

版权

本文深入探讨React Native应用在Debug模式下，如何通过Chrome进行源码调试。从App开启Debug模式，到Chrome作为代理执行代码，再到debuggerWorker线程的角色，详细阐述了JS代码的加载、更新和断点设置过程。通过WebSocket Server，实现了App与Chrome之间的通信，利用sourceMapping映射源码位置，实现高效便捷的调试。

摘要由CSDN通过智能技术生成

1、前言

我们都知道我们在调试的时候都会开一个chrome，在chrome的调试界面中打断点、看log，本节就主要了解以下Debuger模式下js代码是如何加载的、js代码如何更新、如何断点源码。

2、App开启Debug模式

跟着Debug JS Remotely按钮走，直接上reloadJSInProxyMode函数

//DevSupportManagerImpl.java

private void reloadJSInProxyMode() {
    // When using js proxy, there is no need to fetch JS bundle as proxy executor will do that
    // anyway
    mDevServerHelper.launchJSDevtools();//0<--

    JavaJSExecutor.Factory factory = new JavaJSExecutor.Factory() {
      @Override
      public JavaJSExecutor create() throws Exception {
        WebsocketJavaScriptExecutor executor = new WebsocketJavaScriptExecutor();//1<--
        SimpleSettableFuture<Boolean> future = new SimpleSettableFuture<>();
        executor.connect(//2<--
                mDevServerHelper.getWebsocketProxyURL(),
                getExecutorConnectCallback(future));
        // TODO(t9349129) Don't use timeout
        try {
          future.get(90, TimeUnit.SECONDS);//3<--
          return executor;
        } catch (ExecutionException e) {
          throw (Exception) e.getCause();
        } catch (InterruptedException | TimeoutException e) {
          throw new RuntimeException(e);
        }
      }
    };
    mReactInstanceManagerHelper.onReloadWithJSDebugger(factory);//4<--
  }

可以看到这个函数名叫做reloadJSInProxyMode，也就是说js环境是被代理的

0、launchJSDevtools,这里就是启动chrome的操作

1、这里创建了一个由websocket实现的js代码运行环境，说明js代码是远程执行的

2、让executor去连接远程远程的WebSokcetServer

3、连接等待时间是90s，超时则算失败

4、使用这个远程js运行环境去reload我们的js代码