React Native调试源码分析——Debuger

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代码

3、chr