Addressed PR feedback and tweaked a few things:

* Removed "render scheduled" message; it was the only one outside of the <Mode> and just didn't feel worth the added noise.
* Added SSR pass through (and tests)
* Add promise resolution/rejection logging
* Removed debug mode from "react-is" package
* Export  for the symbol if the feature flag is off

Author: Brian Vaughn

packages/react-devtools-shared/src/utils.js

@@ -16,7 +16,6 @@ import {
   ForwardRef,
   Fragment,
   Lazy,
-  DebugTraceMode,
   Memo,
   Portal,
   Profiler,
@@ -433,8 +432,6 @@ export function getDisplayNameForReactElement(
       return 'Fragment';
     case Lazy:
       return 'Lazy';
-    case DebugTraceMode:
-      return 'DebugTraceMode';
     case Memo:
       return 'Memo';
     case Portal:

packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js

@@ -39,6 +39,53 @@ describe('ReactDOMServerIntegration', () => {
     resetModules();
   });
 
+  // Test pragmas don't support itRenders abstraction
+  if (require('shared/ReactFeatureFlags').enableDebugTracing) {
+    describe('React.DebugTraceMode', () => {
+      beforeEach(() => {
+        spyOnDevAndProd(console, 'log');
+      });
+
+      itRenders('with one child', async render => {
+        const e = await render(
+          <React.DebugTraceMode>
+            <div>text1</div>
+          </React.DebugTraceMode>,
+        );
+        const parent = e.parentNode;
+        expect(parent.childNodes[0].tagName).toBe('DIV');
+      });
+
+      itRenders('mode with several children', async render => {
+        const Header = props => {
+          return <p>header</p>;
+        };
+        const Footer = props => {
+          return (
+            <React.DebugTraceMode>
+              <h2>footer</h2>
+              <h3>about</h3>
+            </React.DebugTraceMode>
+          );
+        };
+        const e = await render(
+          <React.DebugTraceMode>
+            <div>text1</div>
+            <span>text2</span>
+            <Header />
+            <Footer />
+          </React.DebugTraceMode>,
+        );
+        const parent = e.parentNode;
+        expect(parent.childNodes[0].tagName).toBe('DIV');
+        expect(parent.childNodes[1].tagName).toBe('SPAN');
+        expect(parent.childNodes[2].tagName).toBe('P');
+        expect(parent.childNodes[3].tagName).toBe('H2');
+        expect(parent.childNodes[4].tagName).toBe('H3');
+      });
+    });
+  }
+
   describe('React.StrictMode', () => {
     itRenders('a strict mode with one child', async render => {
       const e = await render(

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -28,6 +28,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import {
+  REACT_DEBUG_TRACE_MODE_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_STRICT_MODE_TYPE,
@@ -1002,6 +1003,7 @@ class ReactDOMServerRenderer {
       }
 
       switch (elementType) {
+        case REACT_DEBUG_TRACE_MODE_TYPE:
         case REACT_STRICT_MODE_TYPE:
         case REACT_PROFILER_TYPE:
         case REACT_SUSPENSE_LIST_TYPE:

packages/react-is/src/ReactIs.js

@@ -15,7 +15,6 @@ import {
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_LAZY_TYPE,
-  REACT_DEBUG_TRACE_MODE_TYPE,
   REACT_MEMO_TYPE,
   REACT_PORTAL_TYPE,
   REACT_PROFILER_TYPE,
@@ -66,7 +65,6 @@ export const Element = REACT_ELEMENT_TYPE;
 export const ForwardRef = REACT_FORWARD_REF_TYPE;
 export const Fragment = REACT_FRAGMENT_TYPE;
 export const Lazy = REACT_LAZY_TYPE;
-export const DebugTraceMode = REACT_DEBUG_TRACE_MODE_TYPE;
 export const Memo = REACT_MEMO_TYPE;
 export const Portal = REACT_PORTAL_TYPE;
 export const Profiler = REACT_PROFILER_TYPE;
@@ -127,9 +125,6 @@ export function isFragment(object: any) {
 export function isLazy(object: any) {
   return typeOf(object) === REACT_LAZY_TYPE;
 }
-export function isDebugTraceMode(object: any) {
-  return typeOf(object) === REACT_DEBUG_TRACE_MODE_TYPE;
-}
 export function isMemo(object: any) {
   return typeOf(object) === REACT_MEMO_TYPE;
 }

packages/react-reconciler/src/DebugTrace.js

@@ -68,15 +68,49 @@ export function logCommitStopped(): void {
   groupEnd();
 }
 
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+// $FlowFixMe: Flow cannot handle polymorphic WeakMaps
+const wakeableIDs: WeakMap<Wakeable, number> = new PossiblyWeakMap();
+let wakeableID: number = 0;
+function getWakeableID(wakeable: Wakeable): number {
+  if (!wakeableIDs.has(wakeable)) {
+    wakeableIDs.set(wakeable, wakeableID++);
+  }
+  return ((wakeableIDs.get(wakeable): any): number);
+}
+
 export function logComponentSuspended(
   componentName: string,
   wakeable: Wakeable,
 ): void {
+  const id = getWakeableID(wakeable);
+  const display = (wakeable: any).displayName || wakeable;
   log(
     `%c⚛️%c ${componentName} suspended`,
     REACT_LOGO_STYLE,
     'color: #80366d; font-weight: bold;',
-    wakeable,
+    id,
+    display,
+  );
+  wakeable.then(
+    () => {
+      log(
+        `%c⚛️%c ${componentName} resolved`,
+        REACT_LOGO_STYLE,
+        'color: #80366d; font-weight: bold;',
+        id,
+        display,
+      );
+    },
+    () => {
+      log(
+        `%c⚛️%c ${componentName} rejected`,
+        REACT_LOGO_STYLE,
+        'color: #80366d; font-weight: bold;',
+        id,
+        display,
+      );
+    },
   );
 }
 
@@ -131,15 +165,6 @@ export function logForceUpdateScheduled(
   );
 }
 
-export function logRenderScheduled(priorityLabel: string): void {
-  log(
-    `%c⚛️%c render scheduled%c (priority: ${priorityLabel})`,
-    REACT_LOGO_STYLE,
-    'color: #0265e3; font-weight: bold;',
-    '',
-  );
-}
-
 export function logStateUpdateScheduled(
   componentName: string,
   priorityLabel: string,

packages/react-reconciler/src/ReactFiberReconciler.new.js

@@ -36,7 +36,6 @@ import {
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {enableDebugTracing} from 'shared/ReactFeatureFlags';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
   findCurrentUnmaskedContext,
@@ -65,7 +64,6 @@ import {
   warnIfUnmockedScheduler,
   IsThisRendererActing,
   act,
-  priorityLevelToLabel,
 } from './ReactFiberWorkLoop.new';
 import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.new';
 import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
@@ -78,7 +76,6 @@ import {
   Sync,
   ContinuousHydration,
   computeInteractiveExpiration,
-  inferPriorityFromExpirationTime,
 } from './ReactFiberExpirationTime.new';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 import {
@@ -87,7 +84,6 @@ import {
   setRefreshHandler,
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.new';
-import {logRenderScheduled} from './DebugTrace';
 
 export {createPortal} from './ReactPortal';
 
@@ -246,17 +242,6 @@ export function updateContainer(
     suspenseConfig,
   );
 
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      const priorityLevel = inferPriorityFromExpirationTime(
-        currentTime,
-        expirationTime,
-      );
-      const label = priorityLevelToLabel(priorityLevel);
-      logRenderScheduled(label);
-    }
-  }
-
   const context = getContextForSubtree(parentComponent);
   if (container.context === null) {
     container.context = context;

packages/react-reconciler/src/ReactFiberReconciler.old.js

@@ -36,7 +36,6 @@ import {
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {enableDebugTracing} from 'shared/ReactFeatureFlags';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
   findCurrentUnmaskedContext,
@@ -65,7 +64,6 @@ import {
   warnIfUnmockedScheduler,
   IsThisRendererActing,
   act,
-  priorityLevelToLabel,
 } from './ReactFiberWorkLoop.old';
 import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.old';
 import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
@@ -78,7 +76,6 @@ import {
   Sync,
   ContinuousHydration,
   computeInteractiveExpiration,
-  inferPriorityFromExpirationTime,
 } from './ReactFiberExpirationTime.old';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
 import {
@@ -87,7 +84,6 @@ import {
   setRefreshHandler,
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.old';
-import {logRenderScheduled} from './DebugTrace';
 
 export {createPortal} from './ReactPortal';
 
@@ -246,17 +242,6 @@ export function updateContainer(
     suspenseConfig,
   );
 
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      const priorityLevel = inferPriorityFromExpirationTime(
-        currentTime,
-        expirationTime,
-      );
-      const label = priorityLevelToLabel(priorityLevel);
-      logRenderScheduled(label);
-    }
-  }
-
   const context = getContextForSubtree(parentComponent);
   if (container.context === null) {
     container.context = context;

packages/react-reconciler/src/ReactTypeOfMode.js

@@ -11,9 +11,9 @@ export type TypeOfMode = number;
 
 export const NoMode = 0b00000;
 export const StrictMode = 0b00001;
-export const DebugTraceMode = 0b10000;
 // TODO: Remove BlockingMode and ConcurrentMode by reading from the root
 // tag instead
 export const BlockingMode = 0b00010;
 export const ConcurrentMode = 0b00100;
 export const ProfileMode = 0b01000;
+export const DebugTraceMode = 0b10000;