mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Emily Janzer
e7f6210d5d
Summary: When testing out the NetworkOverlay, I noticed that we were creating a lot of WebSocket connections for localhost:8097. Rick found that this is because we're trying to connect to React devtools every 2 seconds: https://github.com/facebook/react/blob/master/packages/react-devtools-core/src/backend.js#L67 and it appears we create a new WebSocket every time. Dan suggested that we use opening the dev menu as a trigger for attempting to connect to React devtools. This diff uses RCTNativeAppEventEmitter to emit an event from native when the dev menu/dialog is shown, and listening to that event in JS to attempt to connect to devtools. I'm also making the change of passing in a websocket instead of just passing in the host + port; this way it will only attempt to connect once on each call to `connectToDevTools` (otherwise, we would attempt to reconnect every 2 seconds as soon as the dev menu is opened, and then the next time the menu is opened we'd so start that *again*, and so on - I could have it keep track of whether it's already connecting and avoid doing it again, but this is easier and should be sufficient, I think). We should probably also update the suggested troubleshooting tips on the devtools page to reflect this change, so that people don't get confused. Changelog: [General] [Fixed] Fix issue where we attempt to connect to React devtools every 2 seconds Reviewed By: mmmulani Differential Revision: D17919808 fbshipit-source-id: 4658d995c274574d22f2f54ea06d7f29ef2f54dc
87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow strict-local
|
|
* @format
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import Platform from '../Utilities/Platform';
|
|
|
|
declare var console: typeof console & {
|
|
_isPolyfilled: boolean,
|
|
};
|
|
|
|
/**
|
|
* Sets up developer tools for React Native.
|
|
* You can use this module directly, or just require InitializeCore.
|
|
*/
|
|
if (__DEV__) {
|
|
// TODO (T45803484) Enable devtools for bridgeless RN
|
|
if (!global.RN$Bridgeless) {
|
|
if (!global.__RCTProfileIsProfiling) {
|
|
require('./setUpReactDevTools');
|
|
|
|
// Set up inspector
|
|
const JSInspector = require('../JSInspector/JSInspector');
|
|
JSInspector.registerAgent(require('../JSInspector/NetworkAgent'));
|
|
}
|
|
|
|
// Note we can't check if console is "native" because it would appear "native" in JSC and Hermes.
|
|
// We also can't check any properties that don't exist in the Chrome worker environment.
|
|
// So we check a navigator property that's set to a particular value ("Netscape") in all real browsers.
|
|
const isLikelyARealBrowser =
|
|
global.navigator != null &&
|
|
/* _
|
|
* | |
|
|
* _ __ ___| |_ ___ ___ __ _ _ __ ___
|
|
* | '_ \ / _ \ __/ __|/ __/ _` | '_ \ / _ \
|
|
* | | | | __/ |_\__ \ (_| (_| | |_) | __/
|
|
* |_| |_|\___|\__|___/\___\__,_| .__/ \___|
|
|
* | |
|
|
* |_|
|
|
*/
|
|
global.navigator.appName === 'Netscape'; // Any real browser
|
|
|
|
if (!Platform.isTesting) {
|
|
const HMRClient = require('../Utilities/HMRClient');
|
|
|
|
if (console._isPolyfilled) {
|
|
// We assume full control over the console and send JavaScript logs to Metro.
|
|
[
|
|
'trace',
|
|
'info',
|
|
'warn',
|
|
'log',
|
|
'group',
|
|
'groupCollapsed',
|
|
'groupEnd',
|
|
'debug',
|
|
].forEach(level => {
|
|
const originalFunction = console[level];
|
|
// $FlowFixMe Overwrite console methods
|
|
console[level] = function(...args) {
|
|
HMRClient.log(level, args);
|
|
originalFunction.apply(console, args);
|
|
};
|
|
});
|
|
} else {
|
|
// We assume the environment has a real rich console (like Chrome), and don't hijack it to log to Metro.
|
|
// It's likely the developer is using rich console to debug anyway, and hijacking it would
|
|
// lose the filenames in console.log calls: https://github.com/facebook/react-native/issues/26788.
|
|
HMRClient.log('log', [
|
|
`JavaScript logs will appear in your ${
|
|
isLikelyARealBrowser ? 'browser' : 'environment'
|
|
} console`,
|
|
]);
|
|
}
|
|
}
|
|
|
|
require('./setUpReactRefresh');
|
|
}
|
|
}
|