diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index c37bb945338c2..fae70937ea0aa 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -30,7 +30,11 @@ import {readFileSync} from 'fs'; import {installHook} from 'react-devtools-shared/src/hook'; import DevTools from 'react-devtools-shared/src/devtools/views/DevTools'; import {doesFilePathExist, launchEditor} from './editor'; -import {__DEBUG__} from 'react-devtools-shared/src/constants'; +import { + __DEBUG__, + LOCAL_STORAGE_DEFAULT_TAB_KEY, +} from 'react-devtools-shared/src/constants'; +import {localStorageSetItem} from '../../react-devtools-shared/src/storage'; import type {FrontendBridge} from 'react-devtools-shared/src/bridge'; import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types'; @@ -179,6 +183,20 @@ function onError({code, message}) { } } +function openProfiler() { + // Mocked up bridge and store to allow the DevTools to be rendered + bridge = new Bridge({listen: () => {}, send: () => {}}); + store = new Store(bridge, {}); + + // Ensure the Profiler tab is shown initially. + localStorageSetItem( + LOCAL_STORAGE_DEFAULT_TAB_KEY, + JSON.stringify('profiler'), + ); + + reload(); +} + function initialize(socket: WebSocket) { const listeners = []; socket.onmessage = event => { @@ -372,6 +390,7 @@ const DevtoolsUI = { setProjectRoots, setStatusListener, startServer, + openProfiler, }; export default DevtoolsUI; diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index 60ce987e267f5..40c28a0f6abdf 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -20,6 +20,8 @@ export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4; export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5; export const TREE_OPERATION_REMOVE_ROOT = 6; +export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab'; + export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY = 'React::DevTools::componentFilters'; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js index 0fa4a440136aa..781ad9d902f68 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.js +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js @@ -38,6 +38,7 @@ import UnsupportedVersionDialog from './UnsupportedVersionDialog'; import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected'; import {useLocalStorage} from './hooks'; import ThemeProvider from './ThemeProvider'; +import {LOCAL_STORAGE_DEFAULT_TAB_KEY} from '../../constants'; import styles from './DevTools.css'; @@ -143,7 +144,7 @@ export default function DevTools({ hideViewSourceAction, }: Props) { const [currentTab, setTab] = useLocalStorage( - 'React::DevTools::defaultTab', + LOCAL_STORAGE_DEFAULT_TAB_KEY, defaultTab, ); diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html index c2193698fca75..fc631cea1ca6a 100644 --- a/packages/react-devtools/app.html +++ b/packages/react-devtools/app.html @@ -142,6 +142,16 @@ before importing React DOM. +
+
Profiler
+
+ Open the Profiler tab to inspect saved profiles. +
+
Starting the server…
@@ -201,6 +211,12 @@ } } + function openProfiler() { + window.devtools + .setContentDOMNode(document.getElementById("container")) + .openProfiler(); + } + const link = $('#rn-help-link'); link.addEventListener('click', event => { event.preventDefault(); @@ -217,6 +233,9 @@ $byIp.addEventListener('click', selectAllAndCopy); $byIp.addEventListener('focus', selectAllAndCopy); + const $profiler = $("#profiler"); + $profiler.addEventListener('click', openProfiler); + let devtools; try { devtools = require("react-devtools-core/standalone").default;