Initialize backend/frontend early in devtools shell so settings are synced during initial render

Author: lunaruan

packages/react-devtools-shell/src/devtools.js

@@ -17,8 +17,17 @@ const {contentDocument, contentWindow} = iframe;
 // Helps with positioning Overlay UI.
 contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
 
+// Initialize the backend and frontend early so that we have the messages that we
+// need during initial render
 initializeBackend(contentWindow);
 
+// Activate the backend only once the DevTools frontend Store has been initialized.
+// Otherwise the Store may miss important initial tree op codes.
+// activateBackend(contentWindow);
+const DevTools = initializeFrontend(contentWindow);
+
+activateBackend(contentWindow);
+
 const container = ((document.getElementById('devtools'): any): HTMLElement);
 
 let isTestAppMounted = true;
@@ -45,12 +54,6 @@ mountButton.addEventListener('click', function() {
 inject('dist/app.js', () => {
   initDevTools({
     connect(cb) {
-      const DevTools = initializeFrontend(contentWindow);
-
-      // Activate the backend only once the DevTools frontend Store has been initialized.
-      // Otherwise the Store may miss important initial tree op codes.
-      activateBackend(contentWindow);
-
       const root = createRoot(container);
       root.render(
         createElement(DevTools, {