Add toggle to unpatch global console

Jchinonso · Jchinonso · commit 3ec4571e3180 · 2020-09-08T18:09:52.000+01:00
diff --git a/fixtures/devtools/standalone/index.html b/fixtures/devtools/standalone/index.html
@@ -56,14 +56,14 @@
   <body>
     <div id="root"></div>
     <script type="text/babel">
-      const { Fragment, useCallback, useState } = React;
+      const { Fragment, useCallback, useState, StrictMode } = React;
 
       function List(props) {
         const [newItemText, setNewItemText] = useState("");
         const [items, setItems] = useState([
           { id: 1, isComplete: true, text: "First" },
           { id: 2, isComplete: true, text: "Second" },
-          { id: 3, isComplete: false, text: "Third" }
+          { id: 3, isComplete: false, text: "Third" },
         ]);
         const [uid, setUID] = useState(4);
 
@@ -299,6 +299,8 @@ <h1>List</h1>
       }
 
       function App() {
+        console.warn('testing')
+        console.error('dksjdkajsd');
         return (
           <Fragment>
             <List />
@@ -307,7 +309,7 @@ <h1>List</h1>
         );
       }
 
-      ReactDOM.render(<App />, document.getElementById("root"));
+      ReactDOM.render(<StrictMode><App /></StrictMode>, document.getElementById("root"));
     </script>
   </body>
 </html>
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
@@ -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(),
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.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,
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.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;
         }
 
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.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(),
           },
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.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-
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
@@ -88,7 +88,7 @@ type NativeStyleEditor_SetValueParams = {|
 type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
-  enableDoubleLogging: boolean,
+  suppressDoubleLogging: boolean,
 |};
 
 type BackendEvents = {|
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.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';
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.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}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.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,
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.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) {
diff --git a/packages/shared/ConsolePatchingDev.js b/packages/shared/ConsolePatchingDev.js
