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

+4
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

+12
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

+12
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

+3
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

+7
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

+2-2
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

+13
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

+17-2
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

+16-1
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

+5-4
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.

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

+3
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@ function startActivation(contentWindow: window) {
2525
breakOnConsoleErrors,
2626
componentFilters,
2727
showInlineWarningsAndErrors,
28+
hideConsoleLogsInStrictMode,
2829
} = data;
2930

3031
contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
3132
contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
3233
contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
3334
contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
35+
contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
3436

3537
// TRICKY
3638
// 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) {
4345
window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
4446
window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
4547
window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
48+
window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
4649
}
4750

4851
finishActivation(contentWindow);

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

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
getBreakOnConsoleErrors,
1111
getSavedComponentFilters,
1212
getShowInlineWarningsAndErrors,
13+
getHideConsoleLogsInStrictMode,
1314
} from 'react-devtools-shared/src/utils';
1415
import {
1516
MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -88,6 +89,7 @@ export function initialize(
8889
breakOnConsoleErrors: getBreakOnConsoleErrors(),
8990
componentFilters: getSavedComponentFilters(),
9091
showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
92+
hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
9193
},
9294
'*',
9395
);

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

+12
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');
@@ -70,6 +76,12 @@ module.exports = {
7076
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
7177
'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
7278
'process.env.NODE_ENV': `"${NODE_ENV}"`,
79+
'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
80+
'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
81+
'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
82+
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
83+
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
84+
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
7385
}),
7486
],
7587
module: {

0 commit comments

Comments
 (0)