Add toggle to unpatch global console

Author: Jchinonso

fixtures/devtools/standalone/index.html

@@ -18,7 +18,7 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {
   getAppendComponentStack,
-  getEnableDoubleLogging,
+  getsuppressDoubleLogging,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
 } from 'react-devtools-shared/src/utils';
@@ -299,8 +299,8 @@ function startServer(
       window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
         getAppendComponentStack(),
       )};
-      window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = ${JSON.stringify(
-        getEnableDoubleLogging(),
+      window.__REACT_DEVTOOLS_SUPPRESS_DOUBLE_LOGGING__ = ${JSON.stringify(
+        getsuppressDoubleLogging(),
       )};
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
         getBreakOnConsoleErrors(),

packages/react-devtools-core/src/standalone.js

@@ -7,7 +7,7 @@ import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
 import {
-  getEnableDoubleLogging,
+  getsuppressDoubleLogging,
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
@@ -31,15 +31,15 @@ let panelCreated = false;
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
   const appendComponentStack = getAppendComponentStack();
-  const enableDoubleLogging = getEnableDoubleLogging();
+  const suppressDoubleLogging = getsuppressDoubleLogging();
   const breakOnConsoleErrors = getBreakOnConsoleErrors();
   const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
       appendComponentStack,
     )};
-    window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = ${JSON.stringify(
-      enableDoubleLogging,
+    window.__REACT_DEVTOOLS_SUPPRESS_DOUBLE_LOGGING__ = ${JSON.stringify(
+      suppressDoubleLogging,
     )};
     window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
       breakOnConsoleErrors,

packages/react-devtools-extensions/src/main.js

@@ -22,14 +22,14 @@ function startActivation(contentWindow: window) {
 
         const {
           appendComponentStack,
-          enableDoubleLogging,
+          suppressDoubleLogging,
           breakOnConsoleErrors,
           componentFilters,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
-        contentWindow.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = enableDoubleLogging;
+        contentWindow.__REACT_DEVTOOLS_SUPPRESS_DOUBLE_LOGGING__ = suppressDoubleLogging;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
 
         // TRICKY
@@ -41,7 +41,7 @@ function startActivation(contentWindow: window) {
         if (contentWindow !== window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
-          window.__REACT_DEVTOOLS_ENABLE_DOUBLE_LOGGING__ = enableDoubleLogging;
+          window.__REACT_DEVTOOLS_SUPPRESS_DOUBLE_LOGGING__ = suppressDoubleLogging;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
         }
 

packages/react-devtools-inline/src/backend.js

@@ -9,7 +9,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
-  getEnableDoubleLogging,
+  getsuppressDoubleLogging,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -40,7 +40,7 @@ export function initialize(
           {
             type: MESSAGE_TYPE_SAVED_PREFERENCES,
             appendComponentStack: getAppendComponentStack(),
-            enableDoubleLogging: getEnableDoubleLogging(),
+            suppressDoubleLogging: getsuppressDoubleLogging(),
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
           },

packages/react-devtools-inline/src/frontend.js

@@ -446,11 +446,11 @@ export default class Agent extends EventEmitter<{|
   updateConsolePatchSettings = ({
     appendComponentStack,
     breakOnConsoleErrors,
-    enableDoubleLogging,
+    suppressDoubleLogging,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
-    enableDoubleLogging: boolean,
+    suppressDoubleLogging: boolean,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-

packages/react-devtools-shared/src/backend/agent.js

@@ -88,7 +88,7 @@ type NativeStyleEditor_SetValueParams = {|
 type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
-  enableDoubleLogging: boolean,
+  suppressDoubleLogging: boolean,
 |};
 
 type BackendEvents = {|

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

@@ -31,7 +31,7 @@ export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
   'React::DevTools::breakOnConsoleErrors';
 
 export const LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING =
-  'React::DevTools::enableDoubleLogging';
+  'React::DevTools::suppressDoubleLogging';
 
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';

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

@@ -17,8 +17,8 @@ export default function DebuggingSettings(_: {||}) {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
-    enableDoubleLogging,
-    setEnableDoubleLogging,
+    suppressDoubleLogging,
+    setsuppressDoubleLogging,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
   } = useContext(SettingsContext);
@@ -41,12 +41,12 @@ export default function DebuggingSettings(_: {||}) {
         <label>
           <input
             type="checkbox"
-            checked={enableDoubleLogging}
+            checked={!suppressDoubleLogging}
             onChange={({currentTarget}) =>
-              setEnableDoubleLogging(currentTarget.checked)
+              setsuppressDoubleLogging(!currentTarget.checked)
             }
           />{' '}
-          Enable double logging
+          Suppress console during development-only second render pass
         </label>
       </div>
       <div className={styles.Setting}>

packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js

@@ -39,8 +39,8 @@ type Context = {|
   // Specified as a separate prop so it can trigger a re-render of FixedSizeList.
   lineHeight: number,
 
-  enableDoubleLogging: boolean,
-  setEnableDoubleLogging: (value: boolean) => void,
+  suppressDoubleLogging: boolean,
+  setsuppressDoubleLogging: (value: boolean) => void,
 
   appendComponentStack: boolean,
   setAppendComponentStack: (value: boolean) => void,
@@ -85,8 +85,8 @@ function SettingsContextController({
   );
 
   const [
-    enableDoubleLogging,
-    setEnableDoubleLogging,
+    suppressDoubleLogging,
+    setsuppressDoubleLogging,
   ] = useLocalStorage<boolean>(
     LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
     false,
@@ -160,9 +160,14 @@ function SettingsContextController({
     bridge.send('updateConsolePatchSettings', {
       appendComponentStack,
       breakOnConsoleErrors,
-      enableDoubleLogging,
+      suppressDoubleLogging,
     });
-  }, [bridge, appendComponentStack, breakOnConsoleErrors, enableDoubleLogging]);
+  }, [
+    bridge,
+    appendComponentStack,
+    breakOnConsoleErrors,
+    suppressDoubleLogging,
+  ]);
 
   useEffect(() => {
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
@@ -172,15 +177,15 @@ function SettingsContextController({
     () => ({
       appendComponentStack,
       breakOnConsoleErrors,
-      enableDoubleLogging,
+      suppressDoubleLogging,
       displayDensity,
       lineHeight:
         displayDensity === 'compact'
           ? COMPACT_LINE_HEIGHT
           : COMFORTABLE_LINE_HEIGHT,
       setAppendComponentStack,
       setBreakOnConsoleErrors,
-      setEnableDoubleLogging,
+      setsuppressDoubleLogging,
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
@@ -191,10 +196,10 @@ function SettingsContextController({
       appendComponentStack,
       breakOnConsoleErrors,
       displayDensity,
-      enableDoubleLogging,
+      suppressDoubleLogging,
       setAppendComponentStack,
       setBreakOnConsoleErrors,
-      setEnableDoubleLogging,
+      setsuppressDoubleLogging,
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -262,14 +262,14 @@ export function getBreakOnConsoleErrors(): boolean {
   return false;
 }
 
-export function setEnableDoubleLogging(value: boolean): void {
+export function setsuppressDoubleLogging(value: boolean): void {
   localStorageSetItem(
     LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING,
     JSON.stringify(value),
   );
 }
 
-export function getEnableDoubleLogging(): boolean {
+export function getsuppressDoubleLogging(): boolean {
   try {
     const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_ENABLE_DOUBLE_LOGGING);
     if (raw != null) {

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

@@ -11,6 +11,7 @@
 // replaying on render function. This currently only patches the object
 // lazily which won't cover if the log function was extracted eagerly.
 // We could also eagerly patch the method.
+import {canUseDOM} from './ExecutionEnvironment';
 
 let disabledDepth = 0;
 let prevLog;
@@ -20,65 +21,85 @@ let prevError;
 let prevGroup;
 let prevGroupCollapsed;
 let prevGroupEnd;
+const {__REACT_DEVTOOLS_SUPPRESS_DOUBLE_LOGGING__: suppressLog} = canUseDOM
+  ? window
+  : global;
 
 function disabledLog() {}
 disabledLog.__reactDisabledLog = true;
 
+function patchConsole() {
+  /* eslint-disable react-internal/no-production-logging */
+  prevLog = console.log;
+  prevInfo = console.info;
+  prevWarn = console.warn;
+  prevError = console.error;
+  prevGroup = console.group;
+  prevGroupCollapsed = console.groupCollapsed;
+  prevGroupEnd = console.groupEnd;
+  // https://github.com/facebook/react/issues/19099
+  const props = {
+    configurable: true,
+    enumerable: true,
+    value: disabledLog,
+    writable: true,
+  };
+  // $FlowFixMe Flow thinks console is immutable.
+  Object.defineProperties(console, {
+    info: props,
+    log: props,
+    warn: props,
+    error: props,
+    group: props,
+    groupCollapsed: props,
+    groupEnd: props,
+  });
+  /* eslint-disable react-internal/no-production-logging */
+}
+
+function unPatchConsole() {
+  /* eslint-disable react-internal/no-production-logging */
+  const props = {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+  };
+  // $FlowFixMe Flow thinks console is immutable.
+  Object.defineProperties(console, {
+    log: {...props, value: prevLog},
+    info: {...props, value: prevInfo},
+    warn: {...props, value: prevWarn},
+    error: {...props, value: prevError},
+    group: {...props, value: prevGroup},
+    groupCollapsed: {...props, value: prevGroupCollapsed},
+    groupEnd: {...props, value: prevGroupEnd},
+  });
+  /* eslint-enable react-internal/no-production-logging */
+}
+
+let suppressDoubleLogging = suppressLog;
 export function disableLogs(): void {
   if (__DEV__) {
     if (disabledDepth === 0) {
-      /* eslint-disable react-internal/no-production-logging */
-      prevLog = console.log;
-      prevInfo = console.info;
-      prevWarn = console.warn;
-      prevError = console.error;
-      prevGroup = console.group;
-      prevGroupCollapsed = console.groupCollapsed;
-      prevGroupEnd = console.groupEnd;
-      // https://github.com/facebook/react/issues/19099
-      const props = {
-        configurable: true,
-        enumerable: true,
-        value: disabledLog,
-        writable: true,
-      };
-      // $FlowFixMe Flow thinks console is immutable.
-      Object.defineProperties(console, {
-        info: props,
-        log: props,
-        warn: props,
-        error: props,
-        group: props,
-        groupCollapsed: props,
-        groupEnd: props,
-      });
-      /* eslint-enable react-internal/no-production-logging */
+      if (!suppressDoubleLogging) {
+        patchConsole();
+      }
     }
-    disabledDepth++;
   }
+  disabledDepth++;
 }
 
 export function reenableLogs(): void {
   if (__DEV__) {
     disabledDepth--;
     if (disabledDepth === 0) {
-      /* eslint-disable react-internal/no-production-logging */
-      const props = {
-        configurable: true,
-        enumerable: true,
-        writable: true,
-      };
-      // $FlowFixMe Flow thinks console is immutable.
-      Object.defineProperties(console, {
-        log: {...props, value: prevLog},
-        info: {...props, value: prevInfo},
-        warn: {...props, value: prevWarn},
-        error: {...props, value: prevError},
-        group: {...props, value: prevGroup},
-        groupCollapsed: {...props, value: prevGroupCollapsed},
-        groupEnd: {...props, value: prevGroupEnd},
-      });
-      /* eslint-enable react-internal/no-production-logging */
+      try {
+        if (!suppressDoubleLogging) {
+          unPatchConsole();
+        }
+      } finally {
+        suppressDoubleLogging = suppressLog;
+      }
     }
     if (disabledDepth < 0) {
       console.error(