Skip to content

Commit 60a30cf

Browse files
lunaruanlunaruan
authored
Console Logging for StrictMode Double Rendering (#22030)
React currently suppress console logs in StrictMode during double rendering. However, this causes a lot of confusion. This PR moves the console suppression logic from React into React Devtools. Now by default, we no longer suppress console logs. Instead, we gray out the logs in console during double render. We also add a setting in React Devtools to allow developers to hide console logs during double render if they choose.
1 parent 8456457 commit 60a30cf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+799
-180
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
getBreakOnConsoleErrors,
2222
getSavedComponentFilters,
2323
getShowInlineWarningsAndErrors,
24+
getHideConsoleLogsInStrictMode,
2425
} from 'react-devtools-shared/src/utils';
2526
import {Server} from 'ws';
2627
import {join} from 'path';
@@ -310,6 +311,9 @@ function startServer(
310311
)};
311312
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
312313
getShowInlineWarningsAndErrors(),
314+
)};
315+
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
316+
getHideConsoleLogsInStrictMode(),
313317
)};`;
314318

315319
response.end(

‎packages/react-devtools-core/webpack.backend.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -60,6 +66,12 @@ module.exports = {
6066
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
6167
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6268
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
69+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
70+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
71+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
72+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
73+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
74+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
6375
}),
6476
],
6577
optimization: {

‎packages/react-devtools-core/webpack.standalone.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
const {resolve} = require('path');
22
const {DefinePlugin} = require('webpack');
33
const {
4+
DARK_MODE_DIMMED_WARNING_COLOR,
5+
DARK_MODE_DIMMED_ERROR_COLOR,
6+
DARK_MODE_DIMMED_LOG_COLOR,
7+
LIGHT_MODE_DIMMED_WARNING_COLOR,
8+
LIGHT_MODE_DIMMED_ERROR_COLOR,
9+
LIGHT_MODE_DIMMED_LOG_COLOR,
410
GITHUB_URL,
511
getVersionString,
612
} = require('react-devtools-extensions/utils');
@@ -67,6 +73,12 @@ module.exports = {
6773
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6874
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
6975
'process.env.NODE_ENV': `"${NODE_ENV}"`,
76+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
77+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
78+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
79+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
80+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
81+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7082
}),
7183
],
7284
module: {

‎packages/react-devtools-extensions/src/injectGlobalHook.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,9 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
8888

8989
// Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
9090
// Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
91+
// We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
92+
// to the webpage's window, so in order to access front end settings
93+
// and communicate with React, we must inject this code into the webpage
9194
if ('text/html' === document.contentType) {
9295
injectCode(
9396
';(' +

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
getBreakOnConsoleErrors,
1212
getSavedComponentFilters,
1313
getShowInlineWarningsAndErrors,
14+
getHideConsoleLogsInStrictMode,
1415
} from 'react-devtools-shared/src/utils';
1516
import {
1617
localStorageGetItem,
@@ -42,6 +43,12 @@ function syncSavedPreferences() {
4243
)};
4344
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
4445
getShowInlineWarningsAndErrors(),
46+
)};
47+
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
48+
getHideConsoleLogsInStrictMode(),
49+
)};
50+
window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
51+
getBrowserTheme(),
4552
)};`,
4653
);
4754
}

‎packages/react-devtools-extensions/src/utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/* global chrome */
22

3+
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
4+
35
const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
46

57
export type BrowserName = 'Chrome' | 'Firefox';
@@ -8,8 +10,6 @@ export function getBrowserName(): BrowserName {
810
return IS_CHROME ? 'Chrome' : 'Firefox';
911
}
1012

11-
export type BrowserTheme = 'dark' | 'light';
12-
1313
export function getBrowserTheme(): BrowserTheme {
1414
if (IS_CHROME) {
1515
// chrome.devtools.panels added in Chrome 18.

‎packages/react-devtools-extensions/utils.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ const {execSync} = require('child_process');
99
const {readFileSync} = require('fs');
1010
const {resolve} = require('path');
1111

12+
const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
13+
const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
14+
const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
15+
const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
16+
const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
17+
const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
18+
1219
const GITHUB_URL = 'https://github.com/facebook/react';
1320

1421
function getGitCommit() {
@@ -36,6 +43,12 @@ function getVersionString() {
3643
}
3744

3845
module.exports = {
46+
DARK_MODE_DIMMED_WARNING_COLOR,
47+
DARK_MODE_DIMMED_ERROR_COLOR,
48+
DARK_MODE_DIMMED_LOG_COLOR,
49+
LIGHT_MODE_DIMMED_WARNING_COLOR,
50+
LIGHT_MODE_DIMMED_ERROR_COLOR,
51+
LIGHT_MODE_DIMMED_LOG_COLOR,
3952
GITHUB_URL,
4053
getGitCommit,
4154
getVersionString,

‎packages/react-devtools-extensions/webpack.backend.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22

33
const {resolve} = require('path');
44
const {DefinePlugin} = require('webpack');
5-
const {GITHUB_URL, getVersionString} = require('./utils');
5+
const {
6+
DARK_MODE_DIMMED_WARNING_COLOR,
7+
DARK_MODE_DIMMED_ERROR_COLOR,
8+
DARK_MODE_DIMMED_LOG_COLOR,
9+
LIGHT_MODE_DIMMED_WARNING_COLOR,
10+
LIGHT_MODE_DIMMED_ERROR_COLOR,
11+
LIGHT_MODE_DIMMED_LOG_COLOR,
12+
GITHUB_URL,
13+
getVersionString,
14+
} = require('./utils');
615
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
716

817
const NODE_ENV = process.env.NODE_ENV;
@@ -54,10 +63,16 @@ module.exports = {
5463
new DefinePlugin({
5564
__DEV__: true,
5665
__PROFILE__: false,
57-
__EXPERIMENTAL__: true,
66+
__DEV____DEV__: true,
5867
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
5968
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
6069
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
70+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
71+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
72+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
73+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
74+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
75+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
6176
}),
6277
],
6378
module: {

‎packages/react-devtools-extensions/webpack.config.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22

33
const {resolve} = require('path');
44
const {DefinePlugin} = require('webpack');
5-
const {GITHUB_URL, getVersionString} = require('./utils');
5+
const {
6+
DARK_MODE_DIMMED_WARNING_COLOR,
7+
DARK_MODE_DIMMED_ERROR_COLOR,
8+
DARK_MODE_DIMMED_LOG_COLOR,
9+
LIGHT_MODE_DIMMED_WARNING_COLOR,
10+
LIGHT_MODE_DIMMED_ERROR_COLOR,
11+
LIGHT_MODE_DIMMED_LOG_COLOR,
12+
GITHUB_URL,
13+
getVersionString,
14+
} = require('./utils');
615
const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
716

817
const NODE_ENV = process.env.NODE_ENV;
@@ -76,6 +85,12 @@ module.exports = {
7685
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7786
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7887
'process.env.NODE_ENV': `"${NODE_ENV}"`,
88+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
89+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
90+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
91+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
92+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
93+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7994
}),
8095
],
8196
module: {

‎packages/react-devtools-inline/README.md‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,15 @@ const { contentWindow } = iframe;
8383
// This must be called before React is loaded into that frame.
8484
initializeBackend(contentWindow);
8585

86-
// React application can be injected into <iframe> at any time now...
87-
// Note that this would need to be done via <script> tag injection,
88-
// as setting the src of the <iframe> would load a new page (without the injected backend).
89-
9086
// Initialize DevTools UI to listen to the hook we just installed.
9187
// This returns a React component we can render anywhere in the parent window.
88+
// This also must be called before React is loaded into the iframe
9289
const DevTools = initializeFrontend(contentWindow);
9390

91+
// React application can be injected into <iframe> at any time now...
92+
// Note that this would need to be done via <script> tag injection,
93+
// as setting the src of the <iframe> would load a new page (without the injected backend).
94+
9495
// <DevTools /> interface can be rendered in the parent window at any time now...
9596
// Be sure to use either ReactDOM.createRoot()
9697
// or ReactDOM.createSyncRoot() to render this component.

0 commit comments

Comments
 (0)