diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 2e9e6a1056bf1..35d21b3a8a2ee 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -21,6 +21,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -310,6 +311,9 @@ function startServer(
       )};
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
         getShowInlineWarningsAndErrors(),
+      )};
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
+        getHideConsoleLogsInStrictMode(),
       )};`;
 
     response.end(
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 9b09448c55b2e..4a034b33bd67c 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -60,6 +66,12 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   optimization: {
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 4d1f8544047c9..e7d2d3af89777 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -67,6 +73,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 980fe21f96d51..e34197af35499 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -88,6 +88,9 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 
 // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
 // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
+// We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
+// to the webpage's window, so in order to access front end settings
+// and communicate with React, we must inject this code into the webpage
 if ('text/html' === document.contentType) {
   injectCode(
     ';(' +
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 7cb92c27b6cb9..06c227d7e4cbe 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -11,6 +11,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -42,6 +43,12 @@ function syncSavedPreferences() {
     )};
     window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
       getShowInlineWarningsAndErrors(),
+    )};
+    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
+      getHideConsoleLogsInStrictMode(),
+    )};
+    window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
+      getBrowserTheme(),
     )};`,
   );
 }
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 4fc27de2ee6a1..2c67e2cf047b4 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -1,5 +1,7 @@
 /* global chrome */
 
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
 
 export type BrowserName = 'Chrome' | 'Firefox';
@@ -8,8 +10,6 @@ export function getBrowserName(): BrowserName {
   return IS_CHROME ? 'Chrome' : 'Firefox';
 }
 
-export type BrowserTheme = 'dark' | 'light';
-
 export function getBrowserTheme(): BrowserTheme {
   if (IS_CHROME) {
     // chrome.devtools.panels added in Chrome 18.
diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index 1babd93f568ea..a096b39b2283c 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -9,6 +9,13 @@ const {execSync} = require('child_process');
 const {readFileSync} = require('fs');
 const {resolve} = require('path');
 
+const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
+const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
+const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
+const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
+const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
+const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
+
 const GITHUB_URL = 'https://github.com/facebook/react';
 
 function getGitCommit() {
@@ -36,6 +43,12 @@ function getVersionString() {
 }
 
 module.exports = {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getGitCommit,
   getVersionString,
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 6f5a1d3860933..1644d0b9843e8 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -2,7 +2,16 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
-const {GITHUB_URL, getVersionString} = require('./utils');
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+  GITHUB_URL,
+  getVersionString,
+} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
@@ -54,10 +63,16 @@ module.exports = {
     new DefinePlugin({
       __DEV__: true,
       __PROFILE__: false,
-      __EXPERIMENTAL__: true,
+      __DEV____DEV__: true,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 664ec8267c353..7f9e632ffab19 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -2,7 +2,16 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
-const {GITHUB_URL, getVersionString} = require('./utils');
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+  GITHUB_URL,
+  getVersionString,
+} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
@@ -76,6 +85,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 22cff37fb7500..88b2c93b7cb05 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -83,14 +83,15 @@ const { contentWindow } = iframe;
 // This must be called before React is loaded into that frame.
 initializeBackend(contentWindow);
 
-// React application can be injected into <iframe> at any time now...
-// Note that this would need to be done via <script> tag injection,
-// as setting the src of the <iframe> would load a new page (without the injected backend).
-
 // Initialize DevTools UI to listen to the hook we just installed.
 // This returns a React component we can render anywhere in the parent window.
+// This also must be called before React is loaded into the iframe
 const DevTools = initializeFrontend(contentWindow);
 
+// React application can be injected into <iframe> at any time now...
+// Note that this would need to be done via <script> tag injection,
+// as setting the src of the <iframe> would load a new page (without the injected backend).
+
 // <DevTools /> interface can be rendered in the parent window at any time now...
 // Be sure to use either ReactDOM.createRoot()
 // or ReactDOM.createSyncRoot() to render this component.
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index 7a5bd57b928eb..a6466d82709fc 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -25,12 +25,14 @@ function startActivation(contentWindow: window) {
           breakOnConsoleErrors,
           componentFilters,
           showInlineWarningsAndErrors,
+          hideConsoleLogsInStrictMode,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
         contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+        contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
 
         // TRICKY
         // The backend entry point may be required in the context of an iframe or the parent window.
@@ -43,6 +45,7 @@ function startActivation(contentWindow: window) {
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
           window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
         }
 
         finishActivation(contentWindow);
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 79bda7ecd8fb8..0249fb878f9bb 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -10,6 +10,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -88,6 +89,7 @@ export function initialize(
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
             showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
+            hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
           },
           '*',
         );
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 040cc629b822d..169484f8cc271 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -70,6 +76,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 3d539f286aa9d..b79301f4f4b54 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -9,6 +9,7 @@
 
 describe('console', () => {
   let React;
+  let ReactDOM;
   let act;
   let fakeConsole;
   let legacyRender;
@@ -48,6 +49,7 @@ describe('console', () => {
       appendComponentStack: true,
       breakOnWarn: false,
       showInlineWarningsAndErrors: false,
+      hideDoubleLogsInStrictLegacy: false,
     });
 
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
@@ -58,6 +60,7 @@ describe('console', () => {
     };
 
     React = require('react');
+    ReactDOM = require('react-dom');
 
     const utils = require('./utils');
     act = utils.act;
@@ -73,10 +76,10 @@ describe('console', () => {
     );
   }
 
-  it('should not patch console methods that do not receive component stacks', () => {
+  it('should not patch console methods that are not explicitly overriden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
-    expect(fakeConsole.log).toBe(mockLog);
+    expect(fakeConsole.log).not.toBe(mockLog);
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
@@ -465,4 +468,88 @@ describe('console', () => {
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
   });
+
+  it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: false,
+    });
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockLog.mock.calls[1]).toHaveLength(2);
+    expect(mockLog.mock.calls[1][0]).toBe('%clog');
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
+
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('%cerror');
+  });
+
+  it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: true,
+    });
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
index 7bbb693628418..e8b0fa74c8116 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -1,5 +1,14 @@
 'use strict';
 
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+} = require('react-devtools-extensions/utils');
+
 // DevTools stores preferences between sessions in localStorage
 if (!global.hasOwnProperty('localStorage')) {
   global.localStorage = require('local-storage-fallback').default;
@@ -8,3 +17,10 @@ if (!global.hasOwnProperty('localStorage')) {
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 global.__TEST__ = true;
+
+global.process.env.DARK_MODE_DIMMED_WARNING_COLOR = DARK_MODE_DIMMED_WARNING_COLOR;
+global.process.env.DARK_MODE_DIMMED_ERROR_COLOR = DARK_MODE_DIMMED_ERROR_COLOR;
+global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index f5a91e0d7c16a..9eea501cbdd0a 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -25,7 +25,7 @@ import {
   initialize as setupTraceUpdates,
   toggleEnabled as setTraceUpdatesEnabled,
 } from './views/TraceUpdates';
-import {patch as patchConsole, unpatch as unpatchConsole} from './console';
+import {patch as patchConsole} from './console';
 import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
@@ -40,6 +40,7 @@ import type {
 } from './types';
 import type {ComponentFilter} from '../types';
 import {isSynchronousXHRSupported} from './utils';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -635,28 +636,26 @@ export default class Agent extends EventEmitter<{|
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
     showInlineWarningsAndErrors: boolean,
+    hideConsoleLogsInStrictMode: boolean,
+    browserTheme: BrowserTheme,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
-    // then install or uninstall the console overrides.
+    // then reinstall the console overrides.
     // It's safe to call these methods multiple times, so we don't need to worry about that.
-    if (
-      appendComponentStack ||
-      breakOnConsoleErrors ||
-      showInlineWarningsAndErrors
-    ) {
-      patchConsole({
-        appendComponentStack,
-        breakOnConsoleErrors,
-        showInlineWarningsAndErrors,
-      });
-    } else {
-      unpatchConsole();
-    }
+    patchConsole({
+      appendComponentStack,
+      breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    });
   };
 
   updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index fcfb944bce230..c6449c8d22faf 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -9,11 +9,14 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import {format} from './utils';
 
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 
-const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];
+const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
+const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
 
 // React's custom built component stack strings match "\s{4}in"
 // Chrome's prefix matches "\s{4}at"
@@ -39,6 +42,7 @@ const injectedRenderers: Map<
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
+    getIsStrictMode: ?() => boolean,
   |},
 > = new Map();
 
@@ -50,6 +54,11 @@ for (const method in console) {
 
 let unpatchFn: null | (() => void) = null;
 
+let isNode = false;
+try {
+  isNode = this === global;
+} catch (error) {}
+
 // Enables e.g. Jest tests to inject a mock console object.
 export function dangerous_setTargetConsoleForTesting(
   targetConsoleForTesting: Object,
@@ -72,6 +81,7 @@ export function registerRenderer(
   const {
     currentDispatcherRef,
     getCurrentFiber,
+    getIsStrictMode,
     findFiberByHostInstance,
     version,
   } = renderer;
@@ -89,6 +99,7 @@ export function registerRenderer(
     injectedRenderers.set(renderer, {
       currentDispatcherRef,
       getCurrentFiber,
+      getIsStrictMode,
       workTagMap: ReactTypeOfWork,
       onErrorOrWarning,
     });
@@ -99,24 +110,31 @@ const consoleSettingsRef = {
   appendComponentStack: false,
   breakOnConsoleErrors: false,
   showInlineWarningsAndErrors: false,
+  hideConsoleLogsInStrictMode: false,
 };
 
 // Patches console methods to append component stack for the current fiber.
 // Call unpatch() to remove the injected behavior.
+// NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInExtension
 export function patch({
   appendComponentStack,
   breakOnConsoleErrors,
   showInlineWarningsAndErrors,
+  hideConsoleLogsInStrictMode,
+  browserTheme,
 }: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
 }): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
   consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
   consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
+  consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode;
 
   if (unpatchFn !== null) {
     // Don't patch twice.
@@ -134,68 +152,78 @@ export function patch({
     }
   };
 
-  APPEND_STACK_TO_METHODS.forEach(method => {
+  OVERRIDE_CONSOLE_METHODS.forEach(method => {
     try {
-      const originalMethod = (originalConsoleMethods[method] =
-        targetConsole[method]);
+      const originalMethod = (originalConsoleMethods[method] = targetConsole[
+        method
+      ].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+        ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+        : targetConsole[method]);
 
       const overrideMethod = (...args) => {
         let shouldAppendWarningStack = false;
-        if (consoleSettingsRef.appendComponentStack) {
-          const lastArg = args.length > 0 ? args[args.length - 1] : null;
-          const alreadyHasComponentStack =
-            typeof lastArg === 'string' && isStringComponentStack(lastArg);
-
-          // If we are ever called with a string that already has a component stack,
-          // e.g. a React error/warning, don't append a second stack.
-          shouldAppendWarningStack = !alreadyHasComponentStack;
+        if (method !== 'log') {
+          if (consoleSettingsRef.appendComponentStack) {
+            const lastArg = args.length > 0 ? args[args.length - 1] : null;
+            const alreadyHasComponentStack =
+              typeof lastArg === 'string' && isStringComponentStack(lastArg);
+
+            // If we are ever called with a string that already has a component stack,
+            // e.g. a React error/warning, don't append a second stack.
+            shouldAppendWarningStack = !alreadyHasComponentStack;
+          }
         }
 
         const shouldShowInlineWarningsAndErrors =
           consoleSettingsRef.showInlineWarningsAndErrors &&
           (method === 'error' || method === 'warn');
 
-        if (shouldAppendWarningStack || shouldShowInlineWarningsAndErrors) {
-          // Search for the first renderer that has a current Fiber.
-          // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-          // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-          for (const {
-            currentDispatcherRef,
-            getCurrentFiber,
-            onErrorOrWarning,
-            workTagMap,
-          } of injectedRenderers.values()) {
-            const current: ?Fiber = getCurrentFiber();
-            if (current != null) {
-              try {
-                if (shouldShowInlineWarningsAndErrors) {
-                  // patch() is called by two places: (1) the hook and (2) the renderer backend.
-                  // The backend is what implements a message queue, so it's the only one that injects onErrorOrWarning.
-                  if (typeof onErrorOrWarning === 'function') {
-                    onErrorOrWarning(
-                      current,
-                      ((method: any): 'error' | 'warn'),
-                      // Copy args before we mutate them (e.g. adding the component stack)
-                      args.slice(),
-                    );
-                  }
-                }
+        let isInStrictMode = false;
 
-                if (shouldAppendWarningStack) {
-                  const componentStack = getStackByFiberInDevAndProd(
-                    workTagMap,
+        // Search for the first renderer that has a current Fiber.
+        // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+        for (const {
+          currentDispatcherRef,
+          getCurrentFiber,
+          onErrorOrWarning,
+          workTagMap,
+          getIsStrictMode,
+        } of injectedRenderers.values()) {
+          const current: ?Fiber = getCurrentFiber();
+          if (current != null) {
+            try {
+              if (typeof getIsStrictMode === 'function' && getIsStrictMode()) {
+                isInStrictMode = true;
+              }
+
+              if (shouldShowInlineWarningsAndErrors) {
+                // patch() is called by two places: (1) the hook and (2) the renderer backend.
+                // The backend is what implements a message queue, so it's the only one that injects onErrorOrWarning.
+                if (typeof onErrorOrWarning === 'function') {
+                  onErrorOrWarning(
                     current,
-                    currentDispatcherRef,
+                    ((method: any): 'error' | 'warn'),
+                    // Copy args before we mutate them (e.g. adding the component stack)
+                    args.slice(),
                   );
-                  if (componentStack !== '') {
-                    args.push(componentStack);
-                  }
                 }
-              } catch (error) {
-                // Don't let a DevTools or React internal error interfere with logging.
-              } finally {
-                break;
               }
+
+              if (shouldAppendWarningStack) {
+                const componentStack = getStackByFiberInDevAndProd(
+                  workTagMap,
+                  current,
+                  currentDispatcherRef,
+                );
+                if (componentStack !== '') {
+                  args.push(componentStack);
+                }
+              }
+            } catch (error) {
+              // Don't let a DevTools or React internal error interfere with logging.
+            } finally {
+              break;
             }
           }
         }
@@ -209,7 +237,46 @@ export function patch({
           debugger;
         }
 
-        originalMethod(...args);
+        if (isInStrictMode) {
+          if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
+            // Dim the text color of the double logs if we're not
+            // hiding them.
+            if (isNode) {
+              originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args));
+            } else {
+              let color;
+              switch (method) {
+                case 'warn':
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                      : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                  break;
+                case 'error':
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                      : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                  break;
+                case 'log':
+                default:
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                      : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                  break;
+              }
+
+              if (color) {
+                originalMethod(`%c${format(...args)}`, `color: ${color}`);
+              } else {
+                throw Error('Console color is not defined');
+              }
+            }
+          }
+        } else {
+          originalMethod(...args);
+        }
       };
 
       overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 62341ce300ec0..3f03315fa5ce7 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -740,17 +740,17 @@ export function attach(
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
     const showInlineWarningsAndErrors =
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-    if (
-      appendComponentStack ||
-      breakOnConsoleErrors ||
-      showInlineWarningsAndErrors
-    ) {
-      patchConsole({
-        appendComponentStack,
-        breakOnConsoleErrors,
-        showInlineWarningsAndErrors,
-      });
-    }
+    const hideConsoleLogsInStrictMode =
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+    const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
+
+    patchConsole({
+      appendComponentStack,
+      breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    });
   }
 
   const debug = (
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 27bbc8ce253c8..0a7166d040983 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -136,6 +136,8 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
+
+  getIsStrictMode?: () => boolean,
   // 17.0.2+
   reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 60fabfa03c893..4b40645595d1c 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -159,6 +159,7 @@ export function serializeToString(data: any): string {
 // based on https://github.com/tmpfs/format-util/blob/0e62d430efb0a1c51448709abd3e2406c14d8401/format.js#L1
 // based on https://developer.mozilla.org/en-US/docs/Web/API/console#Using_string_substitutions
 // Implements s, d, i and f placeholders
+// NOTE: KEEP IN SYNC with src/hook.js
 export function format(
   maybeMessage: any,
   ...inputArgs: $ReadOnlyArray<any>
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index cfcfa79e1f2d5..ae5abf7c4f2b5 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -17,6 +17,7 @@ import type {
   RendererID,
 } from 'react-devtools-shared/src/backend/types';
 import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const BATCH_DURATION = 100;
 
@@ -164,6 +165,8 @@ type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
 |};
 
 export type BackendEvents = {|
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2b6c3b6f0539a..29d805890dedb 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -47,6 +47,9 @@ export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 
+export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
+  'React::DevTools::hideConsoleLogsInStrictMode';
+
 export const PROFILER_EXPORT_VERSION = 5;
 
 export const CHANGE_LOG_URL =
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index 8d5da190be457..46b8b343721ff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -17,10 +17,12 @@ export default function DebuggingSettings(_: {||}) {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
+    hideConsoleLogsInStrictMode,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
     setShowInlineWarningsAndErrors,
     showInlineWarningsAndErrors,
+    sethideConsoleLogsInStrictMode,
   } = useContext(SettingsContext);
 
   return (
@@ -64,8 +66,17 @@ export default function DebuggingSettings(_: {||}) {
         </label>
       </div>
 
-      <div className={styles.ConsoleAPIWarning}>
-        These settings require DevTools to override native console APIs.
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={hideConsoleLogsInStrictMode}
+            onChange={({currentTarget}) =>
+              sethideConsoleLogsInStrictMode(currentTarget.checked)
+            }
+          />{' '}
+          Hide logs during second render in Strict Mode
+        </label>
       </div>
     </div>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index a433ac220ffe3..7f8cfe614b0cc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -23,6 +23,7 @@ import {
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -49,6 +50,9 @@ type Context = {|
   parseHookNames: boolean,
   setParseHookNames: (value: boolean) => void,
 
+  hideConsoleLogsInStrictMode: boolean,
+  sethideConsoleLogsInStrictMode: (value: boolean) => void,
+
   showInlineWarningsAndErrors: boolean,
   setShowInlineWarningsAndErrors: (value: boolean) => void,
 
@@ -104,6 +108,13 @@ function SettingsContextController({
     LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
     false,
   );
+  const [
+    hideConsoleLogsInStrictMode,
+    sethideConsoleLogsInStrictMode,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    false,
+  );
   const [
     showInlineWarningsAndErrors,
     setShowInlineWarningsAndErrors,
@@ -169,12 +180,16 @@ function SettingsContextController({
       appendComponentStack,
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
     });
   }, [
     bridge,
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
   ]);
 
   useEffect(() => {
@@ -199,6 +214,8 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
+      sethideConsoleLogsInStrictMode,
+      hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
       traceUpdatesEnabled,
@@ -216,6 +233,8 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
+      sethideConsoleLogsInStrictMode,
+      hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
       traceUpdatesEnabled,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 58ad5d15d37ad..3ddaf13907702 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -128,8 +128,7 @@
   background-color: var(--color-toggle-text);
 }
 
-.ReleaseNotes,
-.ConsoleAPIWarning {
+.ReleaseNotes {
   width: 100%;
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 4ba54fe31085c..8ef821967d6d9 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -2,11 +2,16 @@
  * Install the hook on window, which is an event emitter.
  * Note because Chrome content scripts cannot directly modify the window object,
  * we are evaling this function by inserting a script tag.
- * That's why we have to inline the whole event emitter implementation here.
+ * That's why we have to inline the whole event emitter implementation,
+ * the string format implementation, and part of the console implementation here.
  *
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactRenderer} from './backend/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
@@ -152,6 +157,158 @@ export function installHook(target: any): DevToolsHook | null {
     } catch (err) {}
   }
 
+  // NOTE: KEEP IN SYNC with src/backend/utils.js
+  function format(
+    maybeMessage: any,
+    ...inputArgs: $ReadOnlyArray<any>
+  ): string {
+    const args = inputArgs.slice();
+
+    // Symbols cannot be concatenated with Strings.
+    let formatted: string =
+      typeof maybeMessage === 'symbol'
+        ? maybeMessage.toString()
+        : '' + maybeMessage;
+
+    // If the first argument is a string, check for substitutions.
+    if (typeof maybeMessage === 'string') {
+      if (args.length) {
+        const REGEXP = /(%?)(%([jds]))/g;
+
+        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+          let arg = args.shift();
+          switch (flag) {
+            case 's':
+              arg += '';
+              break;
+            case 'd':
+            case 'i':
+              arg = parseInt(arg, 10).toString();
+              break;
+            case 'f':
+              arg = parseFloat(arg).toString();
+              break;
+          }
+          if (!escaped) {
+            return arg;
+          }
+          args.unshift(arg);
+          return match;
+        });
+      }
+    }
+
+    // Arguments that remain after formatting.
+    if (args.length) {
+      for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
+
+        // Symbols cannot be concatenated with Strings.
+        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      }
+    }
+
+    // Update escaped %% values.
+    formatted = formatted.replace(/%{2,2}/g, '%');
+
+    return '' + formatted;
+  }
+
+  // NOTE: KEEP IN SYNC with src/backend/console.js:patch
+  function patchConsoleForInitialRenderInExtension(
+    renderer: ReactRenderer,
+    {
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
+  ): void {
+    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+    if (__EXTENSION__) {
+      const targetConsole = console;
+
+      const originalConsoleMethods = {};
+
+      overrideConsoleMethods.forEach(method => {
+        try {
+          const originalMethod = (originalConsoleMethods[
+            method
+          ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+            ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+            : targetConsole[method]);
+
+          const overrideMethod = (...args) => {
+            let isInStrictMode = false;
+
+            // Search for the first renderer that has a current Fiber.
+            // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
+            const {getCurrentFiber, getIsStrictMode} = renderer;
+            if (typeof getCurrentFiber !== 'function') {
+              return;
+            }
+
+            const current: ?Fiber = getCurrentFiber();
+            if (current != null) {
+              try {
+                if (
+                  typeof getIsStrictMode === 'function' &&
+                  getIsStrictMode()
+                ) {
+                  isInStrictMode = true;
+                }
+              } catch (error) {
+                // Don't let a DevTools or React internal error interfere with logging.
+              }
+            }
+
+            if (isInStrictMode) {
+              if (!hideConsoleLogsInStrictMode) {
+                // Dim the text color of the double logs if we're not
+                // hiding them.
+                let color;
+                switch (method) {
+                  case 'warn':
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                    break;
+                  case 'error':
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                    break;
+                  case 'log':
+                  default:
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                    break;
+                }
+
+                if (color) {
+                  originalMethod(`%c${format(...args)}`, `color: ${color}`);
+                } else {
+                  throw Error('Console color is not defined');
+                }
+              }
+            } else {
+              originalMethod(...args);
+            }
+          };
+
+          overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+          originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+
+          // $FlowFixMe property error|warn is not writable.
+          targetConsole[method] = overrideMethod;
+        } catch (error) {}
+      });
+    }
+  }
+
   let uidCounter = 0;
 
   function inject(renderer) {
@@ -164,19 +321,22 @@ export function installHook(target: any): DevToolsHook | null {
 
     // Patching the console enables DevTools to do a few useful things:
     // * Append component stacks to warnings and error messages
+    // * Disabling or marking logs during a double render in Strict Mode
     // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
     //
     // For React Native, we intentionally patch early (during injection).
     // This provides React Native developers with components stacks even if they don't run DevTools.
+    //
     // This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.
-    // In that case, we'll patch later (when the frontend attaches).
+    // In that case, we'll only patch parts of the console that are needed during the first render
+    // and patch everything else later (when the frontend attaches).
     //
     // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
     //
     // Note that because this function is inlined, this conditional check must only use static booleans.
     // Otherwise the extension will throw with an undefined error.
     // (See comments in the try/catch below for more context on inlining.)
-    if (!__EXTENSION__ && !__TEST__) {
+    if (!__TEST__) {
       try {
         const appendComponentStack =
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
@@ -184,6 +344,9 @@ export function installHook(target: any): DevToolsHook | null {
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
         const showInlineWarningsAndErrors =
           window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
+        const hideConsoleLogsInStrictMode =
+          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
@@ -192,16 +355,19 @@ export function installHook(target: any): DevToolsHook | null {
         // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
-        if (
-          appendComponentStack ||
-          breakOnConsoleErrors ||
-          showInlineWarningsAndErrors
-        ) {
+        if (!__EXTENSION__) {
           registerRendererWithConsole(renderer);
           patchConsole({
             appendComponentStack,
             breakOnConsoleErrors,
             showInlineWarningsAndErrors,
+            hideConsoleLogsInStrictMode,
+            browserTheme,
+          });
+        } else {
+          patchConsoleForInitialRenderInExtension(renderer, {
+            hideConsoleLogsInStrictMode,
+            browserTheme,
           });
         }
       } catch (error) {}
@@ -215,7 +381,11 @@ export function installHook(target: any): DevToolsHook | null {
       hook.rendererInterfaces.set(id, rendererInterface);
     }
 
-    hook.emit('renderer', {id, renderer, reactBuildType});
+    hook.emit('renderer', {
+      id,
+      renderer,
+      reactBuildType,
+    });
 
     return id;
   }
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 573679f635ab8..901aecbac6d06 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -37,6 +37,7 @@ import {
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from './constants';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
@@ -317,6 +318,25 @@ export function setBreakOnConsoleErrors(value: boolean): void {
   );
 }
 
+export function getHideConsoleLogsInStrictMode(): boolean {
+  try {
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    );
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return false;
+}
+
+export function sethideConsoleLogsInStrictMode(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    JSON.stringify(value),
+  );
+}
+
 export function getShowInlineWarningsAndErrors(): boolean {
   try {
     const raw = localStorageGetItem(
diff --git a/packages/react-devtools-shell/src/app/console.js b/packages/react-devtools-shell/src/app/console.js
index 39ee34ee5a509..9f1244bf164e1 100644
--- a/packages/react-devtools-shell/src/app/console.js
+++ b/packages/react-devtools-shell/src/app/console.js
@@ -37,3 +37,7 @@ export function ignoreErrors(errorsToIgnore: Array<string>): void {
 export function ignoreWarnings(warningsToIgnore: Array<string>): void {
   ignoreStrings('warn', warningsToIgnore);
 }
+
+export function ignoreLogs(logsToIgnore: Array<string>): void {
+  ignoreStrings('log', logsToIgnore);
+}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index d00ffde4a5ded..805cd0a2a707e 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -19,7 +19,7 @@ import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import ErrorBoundaries from './ErrorBoundaries';
 import SuspenseTree from './SuspenseTree';
-import {ignoreErrors, ignoreWarnings} from './console';
+import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';
 
 import './styles.css';
 
@@ -32,6 +32,7 @@ ignoreErrors([
   'Warning: %s is deprecated in StrictMode.', // findDOMNode
 ]);
 ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
+ignoreLogs([]);
 
 const roots = [];
 
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
index 4879e719c880a..fda4c91b74ffe 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -19,6 +19,14 @@ contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;
 
 initializeBackend(contentWindow);
 
+// Initialize the front end and activate the backend early so that we are able
+// to pass console settings in local storage to the backend before initial render
+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 container = ((document.getElementById('devtools'): any): HTMLElement);
 
 let isTestAppMounted = true;
@@ -45,12 +53,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, {
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 41fd6fa2666f1..e60a004a3b391 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -59,6 +65,12 @@ const config = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index cadf7d252d830..d9874bba34119 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -151,7 +151,11 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldError, shouldSuspend} from './ReactFiberReconciler';
+import {
+  shouldError,
+  shouldSuspend,
+  setIsStrictModeForDevtools,
+} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
@@ -235,8 +239,6 @@ import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 let didReceiveUpdate: boolean = false;
@@ -379,7 +381,7 @@ function updateForwardRef(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -390,7 +392,7 @@ function updateForwardRef(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -984,7 +986,7 @@ function updateFunctionComponent(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -995,7 +997,7 @@ function updateFunctionComponent(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -1201,11 +1203,11 @@ function finishClassComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           instance.render();
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       setIsRendering(false);
@@ -1741,7 +1743,7 @@ function mountIndeterminateComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           value = renderWithHooks(
             null,
@@ -1752,7 +1754,7 @@ function mountIndeterminateComponent(
             renderLanes,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 962f592a32556..74037fbe966f2 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -151,7 +151,11 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldError, shouldSuspend} from './ReactFiberReconciler';
+import {
+  shouldError,
+  shouldSuspend,
+  setIsStrictModeForDevtools,
+} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
@@ -235,8 +239,6 @@ import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 let didReceiveUpdate: boolean = false;
@@ -379,7 +381,7 @@ function updateForwardRef(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -390,7 +392,7 @@ function updateForwardRef(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -984,7 +986,7 @@ function updateFunctionComponent(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -995,7 +997,7 @@ function updateFunctionComponent(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -1201,11 +1203,11 @@ function finishClassComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           instance.render();
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       setIsRendering(false);
@@ -1741,7 +1743,7 @@ function mountIndeterminateComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           value = renderWithHooks(
             null,
@@ -1752,7 +1754,7 @@ function mountIndeterminateComponent(
             renderLanes,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 3d10472c0441c..490fa5f430f21 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -38,6 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -75,7 +76,6 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
@@ -175,12 +175,12 @@ function applyDerivedStateFromProps(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         // Invoke the function an extra time to help detect side-effects.
         partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     warnOnUndefinedDerivedState(ctor, partialState);
@@ -328,7 +328,7 @@ function checkShouldComponentUpdate(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           // Invoke the function an extra time to help detect side-effects.
           shouldUpdate = instance.shouldComponentUpdate(
@@ -337,7 +337,7 @@ function checkShouldComponentUpdate(
             nextContext,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       if (shouldUpdate === undefined) {
@@ -662,11 +662,11 @@ function constructClassInstance(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index ab80913c7b6b6..8c08eb581892b 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -38,6 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -75,7 +76,6 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
@@ -175,12 +175,12 @@ function applyDerivedStateFromProps(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         // Invoke the function an extra time to help detect side-effects.
         partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     warnOnUndefinedDerivedState(ctor, partialState);
@@ -328,7 +328,7 @@ function checkShouldComponentUpdate(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           // Invoke the function an extra time to help detect side-effects.
           shouldUpdate = instance.shouldComponentUpdate(
@@ -337,7 +337,7 @@ function checkShouldComponentUpdate(
             nextContext,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       if (shouldUpdate === undefined) {
@@ -662,11 +662,11 @@ function constructClassInstance(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 7e86ac98bfaa0..b19530e24b5d1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -113,6 +113,7 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+import {getIsStrictModeForDevtools} from './ReactFiberReconciler.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1021,9 +1022,9 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
     // dev, we can present a more accurate error message.
     if (__DEV__) {
       // eslint-disable-next-line react-internal/no-production-logging
-      if (console.log.__reactDisabledLog) {
-        // If the logs are disabled, this is the dev-only double render. This is
-        // only reachable if there was a mutation during render. Show a helpful
+      if (getIsStrictModeForDevtools()) {
+        // If getIsStrictModeForDevtools is true, this is the dev-only double render
+        // This is only reachable if there was a mutation during render. Show a helpful
         // error message.
         //
         // Something interesting to note: because we only double render in
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cc5fa6149a007..fb1e9b86883a9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -113,6 +113,7 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+import {getIsStrictModeForDevtools} from './ReactFiberReconciler.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1021,9 +1022,9 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
     // dev, we can present a more accurate error message.
     if (__DEV__) {
       // eslint-disable-next-line react-internal/no-production-logging
-      if (console.log.__reactDisabledLog) {
-        // If the logs are disabled, this is the dev-only double render. This is
-        // only reachable if there was a mutation during render. Show a helpful
+      if (getIsStrictModeForDevtools()) {
+        // If getIsStrictModeForDevtools is true, this is the dev-only double render
+        // This is only reachable if there was a mutation during render. Show a helpful
         // error message.
         //
         // Something interesting to note: because we only double render in
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index d25783164e984..033b9eb0adbec 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -49,6 +49,8 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdatePriority as getCurrentUpdatePriority_old,
+  getIsStrictModeForDevtools as getIsStrictModeForDevtools_old,
+  setIsStrictModeForDevtools as setIsStrictModeForDevtools_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -86,6 +88,8 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdatePriority as getCurrentUpdatePriority_new,
+  getIsStrictModeForDevtools as getIsStrictModeForDevtools_new,
+  setIsStrictModeForDevtools as setIsStrictModeForDevtools_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -190,3 +194,10 @@ export const registerMutableSourceForHydration = enableNewReconciler
 export const runWithPriority = enableNewReconciler
   ? runWithPriority_new
   : runWithPriority_old;
+
+export const getIsStrictModeForDevtools = enableNewReconciler
+  ? getIsStrictModeForDevtools_new
+  : getIsStrictModeForDevtools_old;
+export const setIsStrictModeForDevtools = enableNewReconciler
+  ? setIsStrictModeForDevtools_new
+  : setIsStrictModeForDevtools_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 90503a183d943..8760466c8cf71 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -105,6 +105,9 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
+import * as Scheduler from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -458,6 +461,8 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
+let isStrictMode = false;
+
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -707,6 +712,21 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
+export function getIsStrictModeForDevtools() {
+  return isStrictMode;
+}
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  // We're in a test because Scheduler.unstable_yieldValue only exists
+  // in SchedulerMock. To reduce the noise in strict mode tests,
+  // suppress warnings and disable scheduler yielding during the double render
+  if (typeof Scheduler.unstable_yieldValue === 'function') {
+    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+    setSuppressWarning(newIsStrictMode);
+  }
+  isStrictMode = newIsStrictMode;
+}
+
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -736,6 +756,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 2608bc260264f..687a9d7b0e808 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -105,6 +105,9 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
+import * as Scheduler from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -458,6 +461,8 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
+let isStrictMode = false;
+
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -707,6 +712,21 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
+export function getIsStrictModeForDevtools() {
+  return isStrictMode;
+}
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  // We're in a test because Scheduler.unstable_yieldValue only exists
+  // in SchedulerMock. To reduce the noise in strict mode tests,
+  // suppress warnings and disable scheduler yielding during the double render
+  if (typeof Scheduler.unstable_yieldValue === 'function') {
+    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+    setSuppressWarning(newIsStrictMode);
+  }
+  isStrictMode = newIsStrictMode;
+}
+
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -736,6 +756,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 0b694d8f68edd..a42384322fcdb 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -110,11 +110,10 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import invariant from 'shared/invariant';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -394,11 +393,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
@@ -427,11 +426,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 9456a0a7c9703..724dfa0d7171b 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -110,11 +110,10 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import invariant from 'shared/invariant';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -394,11 +393,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
@@ -427,11 +426,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
diff --git a/packages/react-reconciler/src/Scheduler.js b/packages/react-reconciler/src/Scheduler.js
index dabb5baaf64be..2176247f002d5 100644
--- a/packages/react-reconciler/src/Scheduler.js
+++ b/packages/react-reconciler/src/Scheduler.js
@@ -26,3 +26,9 @@ export const NormalPriority = Scheduler.unstable_NormalPriority;
 export const LowPriority = Scheduler.unstable_LowPriority;
 export const IdlePriority = Scheduler.unstable_IdlePriority;
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
+
+// this doesn't actually exist on the scheduler, but it *does*
+// on scheduler/unstable_mock, which we'll need for internal testing
+export const unstable_yieldValue = Scheduler.unstable_yieldValue;
+export const unstable_setDisableYieldValue =
+  Scheduler.unstable_setDisableYieldValue;
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 5bd16f9c544dd..3676d5719a0c4 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -893,8 +893,8 @@ describe('context legacy', () => {
     ReactDOM.render(<Root />, container);
   });
 
-  describe('disableLogs', () => {
-    it('disables logs once for class double render', () => {
+  describe('logging', () => {
+    it('does not disable logs for class double render', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -915,14 +915,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
       expect(console.log).toBeCalledWith('foo 1');
     });
 
-    it('disables logs once for class double ctor', () => {
+    it('does not disable logs for class double ctor', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -946,14 +946,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
       expect(console.log).toBeCalledWith('foo 1');
     });
 
-    it('disables logs once for class double getDerivedStateFromProps', () => {
+    it('does not disable logs for class double getDerivedStateFromProps', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -978,14 +978,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
       expect(console.log).toBeCalledWith('foo 1');
     });
 
-    it('disables logs once for class double shouldComponentUpdate', () => {
+    it('does not disable logs for class double shouldComponentUpdate', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -1017,14 +1017,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
       expect(console.log).toBeCalledWith('foo 1');
     });
 
-    it('disables logs once for class state updaters', () => {
+    it('does not disable logs for class state updaters', () => {
       spyOnDevAndProd(console, 'log');
 
       let inst;
@@ -1051,14 +1051,14 @@ describe('context legacy', () => {
       });
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
       expect(console.log).toBeCalledWith('foo 1');
     });
 
-    it('disables logs once for function double render', () => {
+    it('does not disable logs for function double render', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -1077,7 +1077,7 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(1);
+      expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1);
       // Note: we should display the first log because otherwise
       // there is a risk of suppressing warnings when they happen,
       // and on the next render they'd get deduplicated and ignored.
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index a229342d27fd2..21c258a6b528c 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -79,6 +79,12 @@ let isFlushing: boolean = false;
 let needsPaint: boolean = false;
 let shouldYieldForPaint: boolean = false;
 
+var disableYieldValue = false;
+
+function setDisableYieldValue(newValue) {
+  disableYieldValue = newValue;
+}
+
 function advanceTimers(currentTime) {
   // Check for tasks that are no longer delayed and add them to the queue.
   let timer = peek(timerQueue);
@@ -570,7 +576,7 @@ function unstable_flushAll(): void {
 
 function unstable_yieldValue(value: mixed): void {
   // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
+  if (console.log.name === 'disabledLog' || disableYieldValue) {
     // If console.log has been patched, we assume we're in render
     // replaying and we ignore any values yielding in the second pass.
     return;
@@ -584,7 +590,7 @@ function unstable_yieldValue(value: mixed): void {
 
 function unstable_advanceTime(ms: number) {
   // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
+  if (console.log.name === 'disabledLog' || disableYieldValue) {
     // If console.log has been patched, we assume we're in render
     // replaying and we ignore any time advancing in the second pass.
     return;
@@ -629,6 +635,7 @@ export {
   unstable_yieldValue,
   unstable_advanceTime,
   reset,
+  setDisableYieldValue as unstable_setDisableYieldValue,
 };
 
 export const unstable_Profiling = enableProfiling
diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
index 72c7e76273a78..20adcc9f3539e 100644
--- a/packages/shared/consoleWithStackDev.js
+++ b/packages/shared/consoleWithStackDev.js
@@ -7,6 +7,13 @@
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
+let suppressWarning = false;
+export function setSuppressWarning(newSuppressWarning) {
+  if (__DEV__) {
+    suppressWarning = newSuppressWarning;
+  }
+}
+
 // In DEV, calls to console.warn and console.error get replaced
 // by calls to these methods by a Babel plugin.
 //
@@ -15,13 +22,17 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 export function warn(format, ...args) {
   if (__DEV__) {
-    printWarning('warn', format, args);
+    if (!suppressWarning) {
+      printWarning('warn', format, args);
+    }
   }
 }
 
 export function error(format, ...args) {
   if (__DEV__) {
-    printWarning('error', format, args);
+    if (!suppressWarning) {
+      printWarning('error', format, args);
+    }
   }
 }
 
diff --git a/packages/shared/forks/Scheduler.umd.js b/packages/shared/forks/Scheduler.umd.js
index d836bba49ab32..133f169c54d48 100644
--- a/packages/shared/forks/Scheduler.umd.js
+++ b/packages/shared/forks/Scheduler.umd.js
@@ -31,8 +31,11 @@ const {
   unstable_forceFrameRate,
 
   // this doesn't actually exist on the scheduler, but it *does*
-  // on scheduler/unstable_mock, which we'll need inside act().
+  // on scheduler/unstable_mock, which we'll need inside act()
+  // and for internal testing
   unstable_flushAllWithoutAsserting,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 } = ReactInternals.Scheduler;
 
 export {
@@ -54,4 +57,6 @@ export {
   unstable_IdlePriority,
   unstable_forceFrameRate,
   unstable_flushAllWithoutAsserting,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 };
diff --git a/packages/shared/forks/consoleWithStackDev.www.js b/packages/shared/forks/consoleWithStackDev.www.js
index 19acc6f9ec9aa..a56faeb485671 100644
--- a/packages/shared/forks/consoleWithStackDev.www.js
+++ b/packages/shared/forks/consoleWithStackDev.www.js
@@ -8,15 +8,26 @@
 // This refers to a WWW module.
 const warningWWW = require('warning');
 
+let suppressWarning = false;
+export function setSuppressWarning(newSuppressWarning) {
+  if (__DEV__) {
+    suppressWarning = newSuppressWarning;
+  }
+}
+
 export function warn(format, ...args) {
   if (__DEV__) {
-    printWarning('warn', format, args);
+    if (!suppressWarning) {
+      printWarning('warn', format, args);
+    }
   }
 }
 
 export function error(format, ...args) {
   if (__DEV__) {
-    printWarning('error', format, args);
+    if (!suppressWarning) {
+      printWarning('error', format, args);
+    }
   }
 }
 
diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
index c8a8789de4efe..97b3f286ab987 100644
--- a/scripts/flow/react-devtools.js
+++ b/scripts/flow/react-devtools.js
@@ -9,3 +9,10 @@
 
 declare var __EXTENSION__: boolean;
 declare var __TEST__: boolean;
+
+declare var DARK_MODE_DIMMED_WARNING_COLOR: string;
+declare var DARK_MODE_DIMMED_ERROR_COLOR: string;
+declare var DARK_MODE_DIMMED_LOG_COLOR: string;
+declare var LIGHT_MODE_DIMMED_WARNING_COLOR: string;
+declare var LIGHT_MODE_DIMMED_ERROR_COLOR: string;
+declare var LIGHT_MODE_DIMMED_LOG_COLOR: string;