Allow to use the Profiler when no client is connected in standalone DevTools (#22551)
Gabriel Trompiz committed
Oct 14, 2021 at 07:31 UTC
a45533cc2511cffa972bf58b68789c9b8aeea516
4 files changed
+43
-2
packages/react-devtools-core/src/standalone.js
+20
-1
@@ -30,7 +30,11 @@ import {readFileSync} from 'fs';
30
import {installHook} from 'react-devtools-shared/src/hook';
31
import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
32
import {doesFilePathExist, launchEditor} from './editor';
33
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
33
+import {
34
+ __DEBUG__,
35
+ LOCAL_STORAGE_DEFAULT_TAB_KEY,
36
+} from 'react-devtools-shared/src/constants';
37
+import {localStorageSetItem} from '../../react-devtools-shared/src/storage';
38
39
import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
40
import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -179,6 +183,20 @@ function onError({code, message}) {
183
}
184
}
185
186
+function openProfiler() {
187
+ // Mocked up bridge and store to allow the DevTools to be rendered
188
+ bridge = new Bridge({listen: () => {}, send: () => {}});
189
+ store = new Store(bridge, {});
190
+
191
+ // Ensure the Profiler tab is shown initially.
192
+ localStorageSetItem(
193
+ LOCAL_STORAGE_DEFAULT_TAB_KEY,
194
+ JSON.stringify('profiler'),
195
+ );
196
+
197
+ reload();
198
+}
199
+
200
function initialize(socket: WebSocket) {
201
const listeners = [];
202
socket.onmessage = event => {
@@ -372,6 +390,7 @@ const DevtoolsUI = {
390
setProjectRoots,
391
setStatusListener,
392
startServer,
393
+ openProfiler,
394
};
395
396
export default DevtoolsUI;
packages/react-devtools-shared/src/constants.js
+2
@@ -20,6 +20,8 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
20
export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;
21
export const TREE_OPERATION_REMOVE_ROOT = 6;
22
23
+export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
24
+
25
export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
26
'React::DevTools::componentFilters';
27
packages/react-devtools-shared/src/devtools/views/DevTools.js
+2
-1
@@ -38,6 +38,7 @@ import UnsupportedVersionDialog from './UnsupportedVersionDialog';
38
import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
39
import {useLocalStorage} from './hooks';
40
import ThemeProvider from './ThemeProvider';
41
+import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants';
42
43
import styles from './DevTools.css';
44
@@ -143,7 +144,7 @@ export default function DevTools({
144
hideViewSourceAction,
145
}: Props) {
146
const [currentTab, setTab] = useLocalStorage<TabID>(
146
- 'React::DevTools::defaultTab',
147
+ LOCAL_STORAGE_DEFAULT_TAB_KEY,
148
defaultTab,
149
);
150
packages/react-devtools/app.html
+19
@@ -142,6 +142,16 @@
142
<strong>before</strong> importing React DOM.
143
</div>
144
</div>
145
+ <div class="box">
146
+ <div class="box-header">Profiler</div>
147
+ <div class="box-content">
148
+ Open the <a
149
+ id="profiler"
150
+ class="link"
151
+ href="#"
152
+ >Profiler tab</a> to inspect saved profiles.
153
+ </div>
154
+ </div>
155
<div id="loading-status">Starting the server…</div>
156
</div>
157
</div>
@@ -201,6 +211,12 @@
211
}
212
}
213
214
+ function openProfiler() {
215
+ window.devtools
216
+ .setContentDOMNode(document.getElementById("container"))
217
+ .openProfiler();
218
+ }
219
+
220
const link = $('#rn-help-link');
221
link.addEventListener('click', event => {
222
event.preventDefault();
@@ -217,6 +233,9 @@
233
$byIp.addEventListener('click', selectAllAndCopy);
234
$byIp.addEventListener('focus', selectAllAndCopy);
235
236
+ const $profiler = $("#profiler");
237
+ $profiler.addEventListener('click', openProfiler);
238
+
239
let devtools;
240
try {
241
devtools = require("react-devtools-core/standalone").default;