Skip to content

Conversation

@motiz88
Copy link

@motiz88 motiz88 commented Jun 2, 2025

Summary

In React Native DevTools, we currently use the frontend in hosted mode, which means InspectorFrontendHostStub is our "live" implementation of InspectorFrontendHostAPI.

We're now exploring building a custom shell for RNDT (facebook/react-native#51687, facebook/react-native#51688), where it would be useful to override certain InspectorFrontendHostAPI methods (with implementations that perform IPC calls to the host) while falling back to InspectorFrontendHostStub for everything else (generally things that are well-served by ordinary web APIs). This isn't a workflow that the current frontend code allows.

We have the following options:

  1. Supply a partial implementation of InspectorFrontendHostAPI and get some stub methods copied over - but with no guarantee they'll work on the new object (as in the case of methods accessing private members on InspectorFrontendHostStub).
  2. Supply a full implementation of InspectorFrontendHostAPI, at the cost of maintaining a fork of InspectorFrontendHostStub that could drift away from the upstream / plain hosted mode behaviour.
  3. Avoid overriding InspectorFrontendHostAPI entirely - there is a separate IPC mechanism baked into the Chromium / CDT codebase (DevToolsAPI.sendMessageToEmbedder and friends) on top of which devtools_compatibility.js can implement InspectorFrontendHostAPI methods. Again this involves maintaining a fork of InspectorFrontendHostStub's functionality (albeit forced into a different shape), plus implementing an Chromium-internal API that is even less well-documented than InspectorFrontendHostAPI.
  4. This PR's approach: give the RNDT shell a chance to mutate the InspectorFrontendHostStub instance right after it's created. (We mutate the instance as opposed to extending the class, so as to keep compatibility with the code path where InspectorFrontendHostStub is not used).

Test plan

Built the frontend locally and added the following test code in the shell's preload script:

const {contextBridge, ipcRenderer} = require('electron');

contextBridge.executeInMainWorld({
  func: ipcDevTools => {
    globalThis.reactNativeDecorateInspectorFrontendHostInstance =
      InspectorFrontendHostInstance => {
        InspectorFrontendHostInstance.bringToFront = () => {
          ipcDevTools.bringToFront();
        };
      };
  },
  args: [
    {
      bringToFront() {
        ipcRenderer.send('bringToFront');
      },
    },
  ],
});

With this, the shell launches, works as expected and foregrounds itself upon hitting a breakpoint.

  • This change maintains backwards compatibility with previous Local Storage data (it doesn't touch any code related to user settings or other persisted state).

Upstreaming plan

  • This commit should be sent as a patch to the upstream devtools-frontend repo. I've reviewed the contribution guide.
  • This commit is React Native-specific and cannot be upstreamed.

There might be a case for something like this in CDT, but I think we should get further into prototyping before we potentially involve the Chrome team. Note that if we wanted to delete this API, we could in principle fork the code for InspectorFrontendHostStub at any time and inject a full version of it from the RNDT shell (option 2). So we're not tying ourselves super strongly to this custom API.

@motiz88 motiz88 merged commit 41bf86b into facebook:main Jun 2, 2025
2 of 3 checks passed
motiz88 added a commit to motiz88/react-native that referenced this pull request Jun 2, 2025
Summary:
Changelog: [Internal]

Implements the first RNDT shell-specific feature based on facebook/react-native-devtools-frontend#168 - namely, the ability for RNDT to foreground itself when certain events occur. This is most noticeable when pausing on a breakpoint.

Differential Revision: D75795689
facebook-github-bot pushed a commit to facebook/react-native that referenced this pull request Jun 3, 2025
Summary:
Pull Request resolved: #51748

Changelog: [Internal]

Implements the first RNDT shell-specific feature based on facebook/react-native-devtools-frontend#168 - namely, the ability for RNDT to foreground itself when certain events occur. This is most noticeable when pausing on a breakpoint.

Reviewed By: huntie, vzaidman

Differential Revision: D75795689

fbshipit-source-id: a073bf8ea96ba70d835007f5af6069d49a693d81
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants