@samitouri / QOS-React-2 / commits / 0e0b1a45fa

Show DevTools backend and frontend versions in UI (#23399)

This information can help with bug investigation for renderers (like React Native) that embed the DevTools backend into their source (separately from the DevTools frontend, which gets run by the user). If the DevTools backend is too old to report a version, or if the version reported is the same as the frontend (as will be the case with the browser extension) then only a single version string will be shown, as before. If a different version is reported, then both will be shown separately.

Brian Vaughn committed Mar 2, 2022 at 09:26 UTC 0e0b1a45fa09c0a8b162cde655016af97eda5c88
7 files changed +213 -68
packages/react-devtools-shared/src/backend/agent.js
+14 -1
@@ -185,6 +185,7 @@ export default class Agent extends EventEmitter<{|
185 bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
186 bridge.addListener('copyElementPath', this.copyElementPath);
187 bridge.addListener('deletePath', this.deletePath);
188 + bridge.addListener('getBackendVersion', this.getBackendVersion);
189 bridge.addListener('getBridgeProtocol', this.getBridgeProtocol);
190 bridge.addListener('getProfilingData', this.getProfilingData);
191 bridge.addListener('getProfilingStatus', this.getProfilingStatus);
@@ -225,7 +226,12 @@ export default class Agent extends EventEmitter<{|
226 bridge.send('profilingStatus', true);
227 }
228
228 - // Send the Bridge protocol after initialization in case the frontend has already requested it.
229 + // Send the Bridge protocol and backend versions, after initialization, in case the frontend has already requested it.
230 + // The Store may be instantiated beore the agent.
231 + const version = process.env.DEVTOOLS_VERSION;
232 + if (version) {
233 + this._bridge.send('backendVersion', version);
234 + }
235 this._bridge.send('bridgeProtocol', currentBridgeProtocol);
236
237 // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
@@ -322,6 +328,13 @@ export default class Agent extends EventEmitter<{|
328 return null;
329 }
330
331 + getBackendVersion = () => {
332 + const version = process.env.DEVTOOLS_VERSION;
333 + if (version) {
334 + this._bridge.send('backendVersion', version);
335 + }
336 + };
337 +
338 getBridgeProtocol = () => {
339 this._bridge.send('bridgeProtocol', currentBridgeProtocol);
340 };
packages/react-devtools-shared/src/bridge.js
+2
@@ -185,6 +185,7 @@ type SavedPreferencesParams = {|
185 |};
186
187 export type BackendEvents = {|
188 + backendVersion: [string],
189 bridgeProtocol: [BridgeProtocol],
190 extensionBackendInitialized: [],
191 fastRefreshScheduled: [],
@@ -219,6 +220,7 @@ type FrontendEvents = {|
220 clearWarningsForFiberID: [ElementAndRendererID],
221 copyElementPath: [CopyElementPathParams],
222 deletePath: [DeletePath],
223 + getBackendVersion: [],
224 getBridgeProtocol: [],
225 getOwnersList: [ElementAndRendererID],
226 getProfilingData: [{|rendererID: RendererID|}],
packages/react-devtools-shared/src/devtools/store.js
+18
@@ -85,6 +85,7 @@ export type Capabilities = {|
85 * ContextProviders can subscribe to the Store for specific things they want to provide.
86 */
87 export default class Store extends EventEmitter<{|
88 + backendVersion: [],
89 collapseNodesByDefault: [],
90 componentFilters: [],
91 error: [Error],
@@ -98,6 +99,10 @@ export default class Store extends EventEmitter<{|
99 unsupportedBridgeProtocolDetected: [],
100 unsupportedRendererVersionDetected: [],
101 |}> {
102 + // If the backend version is new enough to report its (NPM) version, this is it.
103 + // This version may be displayed by the frontend for debugging purposes.
104 + _backendVersion: string | null = null;
105 +
106 _bridge: FrontendBridge;
107
108 // Computed whenever _errorsAndWarnings Map changes.
@@ -264,6 +269,9 @@ export default class Store extends EventEmitter<{|
269 bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
270 bridge.send('getBridgeProtocol');
271 }
272 +
273 + bridge.addListener('backendVersion', this.onBridgeBackendVersion);
274 + bridge.send('getBackendVersion');
275 }
276
277 // This is only used in tests to avoid memory leaks.
@@ -301,6 +309,10 @@ export default class Store extends EventEmitter<{|
309 }
310 }
311
312 + get backendVersion(): string | null {
313 + return this._backendVersion;
314 + }
315 +
316 get collapseNodesByDefault(): boolean {
317 return this._collapseNodesByDefault;
318 }
@@ -1333,6 +1345,7 @@ export default class Store extends EventEmitter<{|
1345 'unsupportedRendererVersion',
1346 this.onBridgeUnsupportedRendererVersion,
1347 );
1348 + bridge.removeListener('backendVersion', this.onBridgeBackendVersion);
1349 bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
1350
1351 if (this._onBridgeProtocolTimeoutID !== null) {
@@ -1359,6 +1372,11 @@ export default class Store extends EventEmitter<{|
1372 this.emit('unsupportedRendererVersionDetected');
1373 };
1374
1375 + onBridgeBackendVersion = (backendVersion: string) => {
1376 + this._backendVersion = backendVersion;
1377 + this.emit('backendVersion');
1378 + };
1379 +
1380 onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
1381 if (this._onBridgeProtocolTimeoutID !== null) {
1382 clearTimeout(this._onBridgeProtocolTimeoutID);
packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+62 -9
@@ -8,13 +8,26 @@
8 */
9
10 import * as React from 'react';
11 -import {useContext} from 'react';
11 +import {useContext, useMemo} from 'react';
12 import {SettingsContext} from './SettingsContext';
13 import {StoreContext} from '../context';
14 import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
15
16 import styles from './SettingsShared.css';
17
18 +function getChangeLogUrl(version: ?string): string | null {
19 + if (!version) {
20 + return null;
21 + }
22 +
23 + // Version numbers are in the format of: <major>.<minor>.<patch>-<sha>
24 + // e.g. "4.23.0-f0dd459e0"
25 + // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
26 + // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
27 + const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3');
28 + return `${CHANGE_LOG_URL}#${versionAnchor}`;
29 +}
30 +
31 export default function GeneralSettings(_: {||}) {
32 const {
33 displayDensity,
@@ -25,7 +38,11 @@ export default function GeneralSettings(_: {||}) {
38 traceUpdatesEnabled,
39 } = useContext(SettingsContext);
40
28 - const {supportsTraceUpdates} = useContext(StoreContext);
41 + const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
42 + const frontendVersion = process.env.DEVTOOLS_VERSION;
43 +
44 + const showBackendVersion =
45 + backendVersion && backendVersion !== frontendVersion;
46
47 return (
48 <div className={styles.Settings}>
@@ -70,15 +87,51 @@ export default function GeneralSettings(_: {||}) {
87 )}
88
89 <div className={styles.ReleaseNotes}>
90 + {showBackendVersion && (
91 + <div>
92 + <ul className={styles.VersionsList}>
93 + <li>
94 + <Version
95 + label="DevTools backend version:"
96 + version={backendVersion}
97 + />
98 + </li>
99 + <li>
100 + <Version
101 + label="DevTools frontend version:"
102 + version={frontendVersion}
103 + />
104 + </li>
105 + </ul>
106 + </div>
107 + )}
108 + {!showBackendVersion && (
109 + <Version label="DevTools version:" version={frontendVersion} />
110 + )}
111 + </div>
112 + </div>
113 + );
114 +}
115 +
116 +function Version({label, version}: {|label: string, version: ?string|}) {
117 + const changelogLink = useMemo(() => {
118 + return getChangeLogUrl(version);
119 + }, [version]);
120 +
121 + if (version == null) {
122 + return null;
123 + } else {
124 + return (
125 + <>
126 + {label}{' '}
127 <a
128 className={styles.ReleaseNotesLink}
129 target="_blank"
130 rel="noopener noreferrer"
77 - href={CHANGE_LOG_URL}>
78 - View release notes
79 - </a>{' '}
80 - for DevTools version {process.env.DEVTOOLS_VERSION}
81 - </div>
82 - </div>
83 - );
131 + href={changelogLink}>
132 + {version}
133 + </a>
134 + </>
135 + );
136 + }
137 }
packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+6
@@ -149,4 +149,10 @@
149
150 .Warning {
151 color: var(--color-error-text);
152 +}
153 +
154 +.VersionsList {
155 + list-style: none;
156 + padding: 0;
157 + margin: 0;
158 }
\ No newline at end of file
packages/react-devtools-shell/src/app/index.js
-2
@@ -10,7 +10,6 @@ import Iframe from './Iframe';
10 import EditableProps from './EditableProps';
11 import ElementTypes from './ElementTypes';
12 import Hydration from './Hydration';
13 -import InlineWarnings from './InlineWarnings';
13 import InspectableElements from './InspectableElements';
14 import ReactNativeWeb from './ReactNativeWeb';
15 import ToDoList from './ToDoList';
@@ -83,7 +82,6 @@ function mountTestApp() {
82 mountApp(Hydration);
83 mountApp(ElementTypes);
84 mountApp(EditableProps);
86 - mountApp(InlineWarnings);
85 mountApp(ReactNativeWeb);
86 mountApp(Toggle);
87 mountApp(ErrorBoundaries);
packages/react-devtools/CHANGELOG.md
+111 -56
@@ -2,7 +2,8 @@
2
3 <!-- RELEASE_SCRIPT_TOKEN -->
4
5 -## 4.23.0 (January 24, 2022)
5 +### 4.23.0
6 +January 24, 2022
7
8 ### Feature
9 * DevTools: Only show StrictMode badge on root elements ([bvaughn](https://github.com/bvaughn) in [#23012](https://github.com/facebook/react/pull/23012))
@@ -14,12 +15,14 @@
15 #### Misc
16 * DevTools (not React) logs Timeline performance data to the User Timing API ([bvaughn](https://github.com/bvaughn) in [#23102](https://github.com/facebook/react/pull/23102))
17
17 -## 4.22.1 (December 14, 2021)
18 +### 4.22.1
19 +December 14, 2021
20
21 * Fix invalid `require()` statements in `react-devtools-inline` ([bvaughn](https://github.com/bvaughn) in [#22961](https://github.com/facebook/react/pull/22961))
22 * Fix invalid `files` array in `react-devtools` `package.json` ([bvaughn](https://github.com/bvaughn) in [#22960](https://github.com/facebook/react/pull/22960))
23
22 -## 4.22.0 (December 13, 2021)
24 +### 4.22.0
25 +December 13, 2021
26
27 #### A note for React Native users
28 React DevTools has [two main pieces](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#overview):
@@ -50,7 +53,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
53 #### Misc
54 * Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848))
55
53 -## 4.21.0 (October 31, 2021)
56 +### 4.21.0
57 +October 31, 2021
58
59 #### Features
60 * Scheduling Profiler: Add marks for component effects (mount and unmount) ([@bvaughn](https://github.com/bvaughn) in [#22578](https://github.com/facebook/react/pull/22578))
@@ -67,19 +71,22 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
71 * DevTools supports ENV-injected version for better internal bug reports ([@bvaughn](https://github.com/bvaughn) in [#22635](https://github.com/facebook/react/pull/22635))
72 * Fix typos ([@KonstHardy](https://github.com/KonstHardy) in [#22494](https://github.com/facebook/react/pull/22494))
73
70 -## 4.20.2 (October 20, 2021)
74 +### 4.20.2
75 +October 20, 2021
76
77 #### Bugfix
78 * Dev Tools: Relax constraint on passing extensionId for backend init ([@jstejada](https://github.com/jstejada) in [#22597](https://github.com/facebook/react/pull/22597))
79 * DevTools: Fix passing extensionId in evaled postMessage calls ([@jstejada](https://github.com/jstejada) in [#22590](https://github.com/facebook/react/pull/22590))
80
76 -## 4.20.1 (October 19, 2021)
81 +### 4.20.1
82 +October 19, 2021
83
84 #### Bugfix
85 * Only show DevTools warning about unrecognized build in Chrome ([@jstejada](https://github.com/jstejada) in [#22571](https://github.com/facebook/react/pull/22571))
86 * DevTools: Include Edge in browser name detection ([@jstejada](https://github.com/jstejada) in [#22584](https://github.com/facebook/react/pull/22584))
87
82 -## 4.20.0 (October 15, 2021)
88 +### 4.20.0
89 +October 15, 2021
90
91 #### Features
92 * Allow to use the Profiler when no client is connected in standalone DevTools ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22551](https://github.com/facebook/react/pull/22551))
@@ -94,18 +101,21 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
101 * Show warning in UI when duplicate installations of DevTools extension are detected ([@jstejada](https://github.com/jstejada) in [#22563](https://github.com/facebook/react/pull/22563))
102 * Improved filenames of built worker files ([@akgupta0777](https://github.com/akgupta0777) in [#22559](https://github.com/facebook/react/pull/22559))
103
97 -## 4.19.2 (October 8, 2021)
104 +### 4.19.2
105 +October 8, 2021
106
107 #### Bugfix
108 * Show different error boundary UI for timeouts than normal errors ([bvaughn](https://github.com/bvaughn) in [#22483](https://github.com/facebook/react/pull/22483))
109 * Fixed bug where deleting a component filter would also close the settings modal ([Biki-das](https://github.com/Biki-das) in [#22484](https://github.com/facebook/react/pull/22484))
110
103 -## 4.19.1 (October 1, 2021)
111 +### 4.19.1
112 +October 1, 2021
113
114 #### Bugfix
115 * Fixed potential cache miss when insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
116
108 -## 4.19.0 (September 29, 2021)
117 +### 4.19.0
118 +September 29, 2021
119
120 #### Features
121 * Scheduling Profiler: Show Suspense resource .displayName ([bvaughn](https://github.com/bvaughn) in [#22451](https://github.com/facebook/react/pull/22451))
@@ -126,7 +136,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
136 * DevTools: Hook names optimizations ([bvaughn](https://github.com/bvaughn) in [#22403](https://github.com/facebook/react/pull/22403))
137 * Replaced `network.onRequestFinished()` caching with `network.getHAR()` ([bvaughn](https://github.com/bvaughn) in [#22285](https://github.com/facebook/react/pull/22285))
138
129 -## 4.18.0 (September 1, 2021)
139 +### 4.18.0
140 +September 1, 2021
141
142 #### Features
143 * DevTools: Improve named hooks network caching ([bvaughn](https://github.com/bvaughn) in [#22198](https://github.com/facebook/react/pull/22198))
@@ -138,7 +149,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
149 * Throw error in console without interfering with logs ([lunaruan](https://github.com/lunaruan) in [#22175](https://github.com/facebook/react/pull/22175))
150
151
141 -## 4.17.0 (August 24, 2021)
152 +### 4.17.0
153 +August 24, 2021
154
155 #### Features
156 * Scheduling Profiler: Add network measures ([bvaughn](https://github.com/bvaughn) in [#22112](https://github.com/facebook/react/pull/22112))
@@ -152,7 +164,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
164 * Fix tooltip wheel event regression ([bvaughn](https://github.com/bvaughn) in [#22130](https://github.com/facebook/react/pull/22130))
165 * Replace `source-map` library with `source-map-js` for named hooks source map parsing ([bvaughn](https://github.com/bvaughn) in [#22126](https://github.com/facebook/react/pull/22126))
166
155 -## 4.16.0 (August 16, 2021)
167 +### 4.16.0
168 +August 16, 2021
169 #### Features
170 * Scheduling Profiler: Inline snapshots ([bvaughn](https://github.com/bvaughn) in [#22091](https://github.com/facebook/react/pull/22091) and[bvaughn](https://github.com/bvaughn) in [#22088](https://github.com/facebook/react/pull/22088))
171 #### Bugfix
@@ -160,7 +173,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
173 * Scheduling profiler: Canvas views clip by default ([bvaughn](https://github.com/bvaughn) in [#22100](https://github.com/facebook/react/pull/22100))
174 * Fixed Components tree indentation bug for Chrome extension ([bvaughn](https://github.com/bvaughn) in [#22083](https://github.com/facebook/react/pull/22083))
175
163 -## 4.15.0 (August 11, 2021)
176 +### 4.15.0
177 +August 11, 2021
178
179 #### Features
180 * Added new scheduling profiler tool ([bvaughn](https://github.com/bvaughn), [kartikcho](https://github.com/kartikcho), and [taneliang](https://github.com/taneliang) in [#22006](https://github.com/facebook/react/pull/22006), [#21990](https://github.com/facebook/react/pull/21990), [#22013](https://github.com/facebook/react/pull/22013), [#21897](https://github.com/facebook/react/pull/21897), [#22029](https://github.com/facebook/react/pull/22029), [#22038](https://github.com/facebook/react/pull/22038), [#22043](https://github.com/facebook/react/pull/22043), [#21947](https://github.com/facebook/react/pull/21947), [#21966](https://github.com/facebook/react/pull/21966), [#21970](https://github.com/facebook/react/pull/21970), [#21971](https://github.com/facebook/react/pull/21971), [#21975](https://github.com/facebook/react/pull/21975)).
@@ -242,7 +256,8 @@ Another thing the new profiler will warn about is long-running renders scheduled
256
257 https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4
258
245 -## 4.14.0 (July 17, 2021)
259 +### 4.14.0
260 +July 17, 2021
261 #### Features
262 * Display hook names for inspected components ([saphal1998](https://github.com/saphal1998), [VibhorCodecianGupta](https://github.com/VibhorCodecianGupta), [bvaughn](https://github.com/bvaughn), and [motiz88](https://github.com/motiz88) in [#21641](https://github.com/facebook/react/pull/21641), [#21790](https://github.com/facebook/react/pull/21790), [#21814](https://github.com/facebook/react/pull/21814), [#21815](https://github.com/facebook/react/pull/21815), [#21831](https://github.com/facebook/react/pull/21831), [#21833](https://github.com/facebook/react/pull/21833), [#21835](https://github.com/facebook/react/pull/21835), [#21865](https://github.com/facebook/react/pull/21865), [#21871](https://github.com/facebook/react/pull/21871), [#21874](https://github.com/facebook/react/pull/21874), [#21891](https://github.com/facebook/react/pull/21891))
263 * Control for manually toggling error boundaries ([baopham](https://github.com/baopham) in [#21583](https://github.com/facebook/react/pull/21583))
@@ -254,16 +269,19 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
269 ##### Control for manually toggling error boundaries
270 ![DevTools error boundary toggle](https://user-images.githubusercontent.com/29597/125891522-30f0d99d-407f-4c31-b5a7-e9d0bd3fa554.gif)
271
257 -## 4.13.5 (May 25, 2021)
272 +### 4.13.5
273 +May 25, 2021
274 #### Bugfix
275 * Handle edge case where a component mounts before its "owner" (in DEV mode) that previously caused a validation error ([bvaughn](https://github.com/bvaughn) in [#21562](https://github.com/facebook/react/pull/21562))
276
261 -## 4.13.4 (May 20, 2021)
277 +### 4.13.4
278 +May 20, 2021
279 #### Bugfix
280 * Fix edge-case Fast Refresh bug that caused Fibers with warnings/errors to be untracked prematurely (which broke componentinspection in DevTools) ([bvaughn](https://github.com/bvaughn) in [#21536](https://github.com/facebook/react/pull/21536))
281 * Revert force deep re-mount when Fast Refresh detected (was no longer necessary) ([bvaughn](https://github.com/bvaughn) in [#21539](https://github.com/facebook/react/pull/21539))
282
266 -## 4.13.3 (May 19, 2021)
283 +### 4.13.3
284 +May 19, 2021
285 #### Misc
286 * Updated `react` and `react-dom` API imports in preparation for upcoming stable release ([bvaughn](https://github.com/bvaughn) in [#21488](https://github.com/facebook/react/pull/21488))
287
@@ -276,11 +294,13 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
294 ([bvaughn](https://github.com/bvaughn) in [9cf1069](https://github.com/facebook/react/commit/9cf1069ffc5f3835506e314ef8c2e80bbfa8bdca#diff))
295 * Tweaked DevTools error template title to match issue form template ([bvaughn](https://github.com/bvaughn) in [1a2d792](https://github.com/facebook/react/commit/1a2d7925035531e5767ff31ff8d0d581b5f94d49))
296
279 -## 4.13.2 (May 7, 2021)
297 +### 4.13.2
298 +May 7, 2021
299 #### Misc
300 * Improved bug report template to use new [GitHub issue forms](https://gh-community.github.io/issue-template-feedback/structured/) ([bvaughn](https://github.com/bvaughn) in [#21450](https://github.com/facebook/react/pull/21450))
301
283 -## 4.13.1 (April 28, 2021)
302 +### 4.13.1
303 +April 28, 2021
304 #### Bugfix
305 * Improve display name logic for `React.memo` components ([bvaughn](https://github.com/bvaughn) in [#21392](https://github.com/facebook/react/pull/21392))
306 * Fixed potential runtime error with Suspense in versions <= 17 ([bvaughn](https://github.com/bvaughn) in [#21432](https://github.com/facebook/react/pull/21432))
@@ -289,7 +309,8 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
309 #### Misc
310 * Improved bug report template ([bvaughn](https://github.com/bvaughn) in [#21413](https://github.com/facebook/react/pull/21413)), [#21421](https://github.com/facebook/react/pull/21421))
311
292 -## 4.13.0 (April 28, 2021)
312 +### 4.13.0
313 +April 28, 2021
314 #### Features
315 * Add Bridge protocol version backend/frontend ([bvaughn](https://github.com/bvaughn) in [#21331](https://github.com/facebook/react/pull/21331))
316
@@ -307,33 +328,40 @@ During initialization, DevTools now checks to ensure it's compatible with the ["
328
329 Learn more about this change at [fb.me/devtools-unsupported-bridge-protocol](https://fb.me/devtools-unsupported-bridge-protocol)
330
310 -## 4.12.4 (April 19, 2021)
331 +### 4.12.4
332 +April 19, 2021
333 #### Bugfix
334 * Remove `@octokit/rest` dependency because of a problem with transitive dependencies ([bvaughn](https://github.com/bvaughn) in [#21317](https://github.com/facebook/react/pull/21317))
335
314 -## 4.12.3 (April 19, 2021)
336 +### 4.12.3
337 +April 19, 2021
338 #### Bugfix
339 * Wrapped quotation marks around Fiber ids or indices for all DevTools errors to better support GitHub fuzzy error search ([bvaughn](https://github.com/bvaughn) in [#21314](https://github.com/facebook/react/pull/21314))
340
318 -## 4.12.2 (April 16, 2021)
341 +### 4.12.2
342 +April 16, 2021
343 #### Bugfix
344 * DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21301](https://github.com/facebook/react/pull/21301))
345
322 -## 4.12.1 (April 14, 2021)
346 +### 4.12.1
347 +April 14, 2021
348 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
349 #### Bugfix
350 * Fixed `react-devtools-inline` bug in frontend `initialize` method ([bvaughn](https://github.com/bvaughn) in [#21265](https://github.com/facebook/react/pull/21265))
351
327 -## 4.12.0 (April 12, 2021)
352 +### 4.12.0
353 +April 12, 2021
354 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
355 #### Features
356 * Added `createBridge` and `createStore` exports to the `react-devtools-inline/frontend` entrypoint to support advanced use cases ([bvaughn](https://github.com/bvaughn) in [#21032](https://github.com/facebook/react/pull/21032))
357
332 -## 4.11.1 (April 11, 2021)
358 +### 4.11.1
359 +April 11, 2021
360 #### Bugfix
361 * Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21237](https://github.com/facebook/react/pull/21237))
362
336 -## 4.11.0 (April 9, 2021)
363 +### 4.11.0
364 +April 9, 2021
365 #### Bugfix
366 * `$r` should contain hooks property when it is `forwardRef` or `memo` component ([meowtec](https://github.com/meowtec) in [#20626](https://github.com/facebook/react/pull/20626))
367 * Ensure `sync-xhr` is allowed before reload and profile ([ChrisDobby](https://github.com/ChrisDobby) in [#20879](https://github.com/facebook/react/pull/20879))
@@ -378,23 +406,28 @@ The following features are only enabled when used with (experimental) builds of
406 ###### Show which hooks (indices) changed when profiling
407 ![Show which hooks (indices) changed when profiling](https://user-images.githubusercontent.com/29597/114225838-d37be180-9940-11eb-93f8-93e0115421c8.png)
408
381 -## 4.10.4 (May 20, 2021)
409 +### 4.10.4
410 +May 20, 2021
411 #### Bugfix
412 * Ported passive effects sync flushing/bubbling bugfix ([bvaughn](https://github.com/bvaughn) in [#21540](https://github.com/facebook/react/pull/21540))
413
385 -## 4.10.3 (April 27, 2021)
414 +### 4.10.3
415 +April 27, 2021
416 #### Bugfix
417 * Replaced Facebook-internal fburl.com link with public fb.me link for Bridge protocol mismatch info page ([bvaughn](https://github.com/bvaughn) in [#21344](https://github.com/facebook/react/pull/21344))
418
389 -## 4.10.2 (April 27, 2021)
419 +### 4.10.2
420 +April 27, 2021
421 #### Features
422 * Added Bridge protocol check and warning dialog if embedded DevTools backend is incompatible with DevTools UI ([bvaughn](https://github.com/bvaughn) in [#21344](https://github.com/facebook/react/pull/21344))
423
393 -## 4.10.1 (November 12, 2020)
424 +### 4.10.1
425 +November 12, 2020
426 #### Bugfix
427 * Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362))
428
397 -## 4.10.0 (November 12, 2020)
429 +### 4.10.0
430 +November 12, 2020
431 #### Features
432 * Make DevTools Websocket retry delay configurable ([bvaughn](https://github.com/bvaughn) in [#20107](https://github.com/facebook/react/pull/20107))
433 #### Bugfix
@@ -402,7 +435,8 @@ The following features are only enabled when used with (experimental) builds of
435 * Remove css-sourcemap for `react-devtools-inline` ([sean9keenan](https://github.com/sean9keenan) in [#20170](https://github.com/facebook/react/pull/20170))
436 * Decrease NPM update notification/prompt for standalone DevTools ([recurx](https://github.com/recurx) in [#20078](https://github.com/facebook/react/pull/20078))
437
405 -## 4.9.0 (October 19, 2020)
438 +### 4.9.0
439 +October 19, 2020
440 #### Features
441 * [Improved DevTools editing interface](#improved-devtools-editing-interface) ([bvaughn](https://github.com/bvaughn) in [#19774](https://github.com/facebook/react/pull/19774))
442 * Add ⎇ + arrow key navigation ([bvaughn](https://github.com/bvaughn) in [#19741](https://github.com/facebook/react/pull/19741))
@@ -446,17 +480,20 @@ New values can be added to array props/state/hooks now. Existing values can also
480 New keys can be added to object props/state/hooks now. Existing keys can be renamed or deleted entirely:
481 ![adding/renaming/removing object properties](https://user-images.githubusercontent.com/29597/93407464-449e5f00-f860-11ea-909b-49dafb56f6c5.gif)
482
449 -## 4.8.2 (July 15, 2020)
483 +### 4.8.2
484 +July 15, 2020
485 #### Bugfix
486 * Fix broken `Suspense` heuristic ([bvaughn](https://github.com/bvaughn) in [#19373](https://github.com/facebook/react/pull/19373))
487 * Fixed error with standalone in HTTPS mode ([b-ponomarenko](https://github.com/b-ponomarenko) in [#19336](https://github.com/facebook/react/pull/19336))
488 * Disable DevTools minification ([bvaughn](https://github.com/bvaughn) in [#19369](https://github.com/facebook/react/pull/19369))
489
455 -## 4.8.1 (July 10, 2020)
490 +### 4.8.1
491 +July 10, 2020
492 #### Bugfix
493 * Fix break-on-warning to truly be off by default. ([gaearon](https://github.com/gaearon) in [#19309](https://github.com/facebook/react/pull/19309))
494
459 -## 4.8.0 (July 9, 2020)
495 +### 4.8.0
496 +July 9, 2020
497 #### Features
498 * Add SSL support to React devtools standalone ([ittaibaratz](https://github.com/ittaibaratz) in [#19191](https://github.com/facebook/react/pull/19191))
499 * New break-on-warning feature (off by default) ([bvaughn](https://github.com/bvaughn) in [#19048](https://github.com/facebook/react/pull/19048))
@@ -466,7 +503,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
503 * Remove unnecessary tag end from CommitRanked view ([finico](https://github.com/finico) in [#19195](https://github.com/facebook/react/pull/19195))
504 * Shutdown DevTools Bridge synchronously when unmounting ([bvaughn](https://github.com/bvaughn) in [#19180](https://github.com/facebook/react/pull/19180))
505
469 -## 4.7.0 (May 18, 2020)
506 +### 4.7.0
507 +May 18, 2020
508
509 #### Features
510 * Improved appended component stacks for third party warnings to be more like native ([bvaughn](https://github.com/bvaughn) in [#18656](https://github.com/facebook/react/pull/18656))
@@ -488,7 +526,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
526 * Disabled Webpack auto polyfill for `setImmediate` ([bvaughn](https://github.com/bvaughn) in [#18860](https://github.com/facebook/react/pull/18860))
527 * Fix mouse interactions for standalone DevTools on Linux ([bl00mber](https://github.com/bl00mber) in [#18772](https://github.com/facebook/react/pull/18772))
528
491 -## 4.6.0 (March 26, 2020)
529 +### 4.6.0
530 +March 26, 2020
531
532 #### Features
533 * Add shortcut keys for tab switching ([kerolloz](https://github.com/kerolloz) in [#18248](https://github.com/facebook/react/pull/18248))
@@ -501,7 +540,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
540 #### Cleanup
541 * Remove "es6-symbol" dependency from "react-devtools-inline" package ([bvaughn](https://github.com/bvaughn) in [#18397](https://github.com/facebook/react/pull/18397))
542
504 -## 4.5.0 (March 3, 2020)
543 +### 4.5.0
544 +March 3, 2020
545
546 #### Features
547 * Improve function props display for inspected elements ([bvaughn](https://github.com/bvaughn) in [#17789](https://github.com/facebook/react/pull/17789))
@@ -531,7 +571,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
571
572 ![Vertical Components panel resizing](https://user-images.githubusercontent.com/23095052/74603149-d074c080-50b0-11ea-820f-63db30b4c285.gif)
573
534 -## 4.4.0 (January 3, 2020)
574 +### 4.4.0
575 +January 3, 2020
576 #### Features
577 * Re-enabled "copy" prop/state/hooks context menu option for Firefox ([bvaughn](https://github.com/bvaughn),[rpl](https://github.com/rpl) in [#17740](https://github.com/facebook/react/pull/17740))
578 * Shift+Enter focuses previous search result in Components tree ([Bo-Duke](https://github.com/Bo-Duke) in [#17005](https://github.com/facebook/react/pull/17005))
@@ -544,7 +585,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
585 * Support inspecting values that have overridden `hasOwnProperty` attribute ([bvaughn](https://github.com/bvaughn) in [#17768](https://github.com/facebook/react/pull/17768))
586 * Fixed regression that made Profiler "Could not find node…" error happen more frequently ([bvaughn](https://github.com/bvaughn) in [#17759](https://github.com/facebook/react/pull/17759))
587
547 -## 4.3.0 (December 20, 2019)
588 +### 4.3.0
589 +December 20, 2019
590 #### Features
591 * Show component location for selected element in bottom/right panel ([bvaughn](https://github.com/bvaughn) in [#17567](https://github.com/facebook/react/pull/17567))
592 * Improved inspected element values with inline previews ([bvaughn](https://github.com/bvaughn) in [#17579](https://github.com/facebook/react/pull/17579))
@@ -554,32 +596,38 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
596 * Fix serialization for `BigInt` type so that it does not break inspection panel. ([nutboltu](https://github.com/nutboltu) in [#17233](https://github.com/facebook/react/pull/17233))
597 * Fix display name logic for `forwardRef`s that use `displayName` property ([zthxxx](https://github.com/zthxxx) in [#17613](https://github.com/facebook/react/pull/17613))
598
557 -## 4.2.1 (November 27, 2019)
599 +### 4.2.1
600 +November 27, 2019
601 #### Bug fixes
602 * Profiler automatically filters certain types of empty (no work) commits. ([bvaughn](https://github.com/bvaughn) in [#17253](https://github.com/facebook/react/pull/17253))
603 * Fix memoized components showing as "Anonymous" in Components tab. ([wsmd](https://github.com/wsmd) in [#17274](https://github.com/facebook/react/pull/17274))
604 * Edge-case bugfix for non-string element keys. ([bvaughn](https://github.com/bvaughn) in [#17164](https://github.com/facebook/react/pull/17164))
605
563 -## 4.2.0 (October 3, 2019)
606 +### 4.2.0
607 +October 3, 2019
608 #### Features
609 * "Highlight updates" feature added for browser extensions and `react-devtools-inline` NPM package. ([bvaughn](https://github.com/bvaughn) in [#16989](https://github.com/facebook/react/pull/16989))
610
567 -## 4.1.3 (September 30, 2019)
611 +### 4.1.3
612 +September 30, 2019
613 #### Bug fixes
614 * Fixed regression where DevTools wouldn't properly connect with apps when using the `file://` protocol. ([linshunghuang](https://github.com/linshunghuang) in [#16953](https://github.com/facebook/react/pull/16953))
615
571 -## 4.1.2 (September 27, 2019)
616 +### 4.1.2
617 +September 27, 2019
618 #### Bug fixes
619 * Fixed an infinite loop that occurred in some cases with prop values of `NaN`. ([bvaughn](https://github.com/bvaughn) in [#16934](https://github.com/facebook/react/pull/16934))
620
575 -## 4.1.1 (September 26, 2019)
621 +### 4.1.1
622 +September 26, 2019
623 #### Bug fixes
624 * Fixed bug where Components panel was always empty for certain users. ([linshunghuang](https://github.com/linshunghuang) in [#16900](https://github.com/facebook/react/pull/16900))
625 * Fixed regression in DevTools editable hooks interface that caused primitive values to be shown as `undefined`. ([bvaughn](https://github.com/bvaughn) in [#16867](https://github.com/facebook/react/pull/16867))
626 * Fixed bug where DevTools showed stale values in props/state/hooks editing interface. ([bvaughn](https://github.com/bvaughn) in [#16878](https://github.com/facebook/react/pull/16878))
627 * Show unsupported version dialog with downgrade instructions. ([bvaughn](https://github.com/bvaughn) in [#16897](https://github.com/facebook/react/pull/16897))
628
582 -## 4.1.0 (September 19, 2019)
629 +### 4.1.0
630 +September 19, 2019
631 #### Features
632 * Props/state editor supports adding new values and changing value types. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16700](https://github.com/facebook/react/pull/16700))
633 #### Bug fixes
@@ -588,21 +636,25 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
636 * Show component source button ("<>") now highlights the `render` method for class components. ([theKashey](https://github.com/theKashey) in [#16759](https://github.com/facebook/react/pull/16759))
637 * Bugfix for components with non-standard object values for `function.name`. ([LetItRock](https://github.com/LetItRock) in [#16798](https://github.com/facebook/react/pull/16798))
638
591 -## 4.0.6 (August 26, 2019)
639 +### 4.0.6
640 +August 26, 2019
641 #### Bug fixes
642 * Remove ⚛️ emoji prefix from Firefox extension tab labels
643 * Standalone polyfills `Symbol` usage
644
596 -## 4.0.5 (August 19, 2019)
645 +### 4.0.5
646 +August 19, 2019
647 #### Bug fixes
648 * Props, state, and context values are alpha sorted.
649 * Standalone DevTools properly serves backend script over localhost:8097
650
601 -## 4.0.4 (August 18, 2019)
651 +### 4.0.4
652 +August 18, 2019
653 #### Bug fixes
654 * Bugfix for potential error if a min-duration commit filter is applied after selecting a fiber in the Profiler UI.
655
605 -## 4.0.3 (August 17, 2019)
656 +### 4.0.3
657 +August 17, 2019
658 #### Bug fixes
659 * ES6 `Map` and `Set`, typed arrays, and other unserializable types (e.g. Immutable JS) can now be inspected.
660 * Empty objects and arrays now display an "(empty)" label to the right to reduce confusion.
@@ -610,15 +662,18 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
662 * Style editor now supports single quotes around string values (e.g. both `"red"` and `'red'`).
663 * Fixed edge case bug that prevented profiling when both React v16 and v15 were present on a page.
664
613 -## 4.0.2 (August 15, 2019)
665 +### 4.0.2
666 +August 15, 2019
667 #### Permissions cleanup
668 * Removed unnecessary `webNavigation ` permission from Chrome and Firefox extensions.
669
617 -## 4.0.1 (August 15, 2019)
670 +### 4.0.1
671 +August 15, 2019
672 #### Permissions cleanup
673 * Removed unnecessary `<all_urls>`, `background`, and `tabs` permissions from Chrome and Firefox extensions.
674
621 -## 4.0.0 (August 15, 2019)
675 +### 4.0.0
676 +August 15, 2019
677
678 ### General changes
679
@@ -753,4 +808,4 @@ Because this feature adds a small amount of overhead, it can be disabled in the
808
809 The profiler now displays a list of each time the selected component rendered during a profiling session, along with the duration of each render. This list can be used to quickly jump between commits when analyzing the performance of a specific component.
810
756 -![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
811 +![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
\ No newline at end of file