Skip to content

Commit

Permalink
Don't disconnect DevTools WebSocket connection on Cmd+D
Browse files Browse the repository at this point in the history
Summary:
When the React Native Cmd+D menu is opened, something re-runs module initialization code (including DevTools backend initialization) which recreates the `WebSocket` and kills any already-connected frontend.

It's not clear to me why this is done. (Intentional? Accident?) But it makes it difficult to connect the React Native Inspector and DevTools together without multiple reloads. This Diff prevents the Cmd+D menu from killing the `WebSocket` connection as a workaround. A better long-term fix would (probably) be to not eagerly re-run these modules.

## Changelog

[General] [Fixed] - Don't disconnect DevTools WebSocket connection on Cmd+D

Reviewed By: fkgozali, sammy-SC

Differential Revision: D27742376

fbshipit-source-id: 60ab3e4763da6b055c28c7aafc6d460e7f4a601d
  • Loading branch information
Brian Vaughn authored and facebook-github-bot committed Apr 14, 2021
1 parent 73b9f78 commit 60a18c1
Showing 1 changed file with 18 additions and 1 deletion.
19 changes: 18 additions & 1 deletion Libraries/Core/setUpReactDevTools.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,19 @@
'use strict';

if (__DEV__) {
let isWebSocketOpen = false;
let ws = null;

const reactDevTools = require('react-devtools-core');
const connectToDevTools = () => {
if (ws !== null && isWebSocketOpen) {
// If the DevTools backend is already connected, don't recreate the WebSocket.
// This would break the connection.
// If there isn't an active connection, a backend may be waiting to connect,
// in which case it's okay to make a new one.
return;
}

// not when debugging in chrome
// TODO(t12832058) This check is broken
if (!window.document) {
Expand All @@ -39,7 +50,13 @@ if (__DEV__) {
: 8097;

const WebSocket = require('../WebSocket/WebSocket');
const ws = new WebSocket('ws://' + host + ':' + port);
ws = new WebSocket('ws://' + host + ':' + port);
ws.addEventListener('close', event => {
isWebSocketOpen = false;
});
ws.addEventListener('open', event => {
isWebSocketOpen = true;
});

const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
reactDevTools.connectToDevTools({
Expand Down

0 comments on commit 60a18c1

Please sign in to comment.