From 6adf8e73adca4155a7c932a8066b2a2fa15b773c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 2 Mar 2022 10:56:34 -0500
Subject: [PATCH 1/3] CHANGELOG format change to make version headers easier to
 link to

---
 packages/react-devtools/CHANGELOG.md | 167 ++++++++++++++++++---------
 1 file changed, 111 insertions(+), 56 deletions(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 4c3b26578d2a5..ac6a27fca96cd 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
-## 4.23.0 (January 24, 2022)
+### 4.23.0
+January 24, 2022
 
 ### Feature
 * 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 @@
 #### Misc
 * 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))
 
-## 4.22.1 (December 14, 2021)
+### 4.22.1
+December 14, 2021
 
 * Fix invalid `require()` statements in `react-devtools-inline` ([bvaughn](https://github.com/bvaughn) in [#22961](https://github.com/facebook/react/pull/22961))
 * Fix invalid `files` array in `react-devtools` `package.json` ([bvaughn](https://github.com/bvaughn) in [#22960](https://github.com/facebook/react/pull/22960))
 
-## 4.22.0 (December 13, 2021)
+### 4.22.0
+December 13, 2021
 
 #### A note for React Native users
 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
 #### Misc
 * Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848))
 
-## 4.21.0 (October 31, 2021)
+### 4.21.0
+October 31, 2021
 
 #### Features
 * 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
 * DevTools supports ENV-injected version for better internal bug reports ([@bvaughn](https://github.com/bvaughn) in [#22635](https://github.com/facebook/react/pull/22635))
 * Fix typos ([@KonstHardy](https://github.com/KonstHardy) in [#22494](https://github.com/facebook/react/pull/22494))
 
-## 4.20.2 (October 20, 2021)
+### 4.20.2
+October 20, 2021
 
 #### Bugfix
 * Dev Tools: Relax constraint on passing extensionId for backend init ([@jstejada](https://github.com/jstejada) in [#22597](https://github.com/facebook/react/pull/22597))
 * DevTools: Fix passing extensionId in evaled postMessage calls ([@jstejada](https://github.com/jstejada) in [#22590](https://github.com/facebook/react/pull/22590))
 
-## 4.20.1 (October 19, 2021)
+### 4.20.1
+October 19, 2021
 
 #### Bugfix
 * Only show DevTools warning about unrecognized build in Chrome ([@jstejada](https://github.com/jstejada) in [#22571](https://github.com/facebook/react/pull/22571))
 * DevTools: Include Edge in browser name detection ([@jstejada](https://github.com/jstejada) in [#22584](https://github.com/facebook/react/pull/22584))
 
-## 4.20.0 (October 15, 2021)
+### 4.20.0
+October 15, 2021
 
 #### Features
 * 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
 * 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))
 * Improved filenames of built worker files ([@akgupta0777](https://github.com/akgupta0777) in [#22559](https://github.com/facebook/react/pull/22559))
 
-## 4.19.2 (October 8, 2021)
+### 4.19.2
+October 8, 2021
 
 #### Bugfix
 * Show different error boundary UI for timeouts than normal errors ([bvaughn](https://github.com/bvaughn) in [#22483](https://github.com/facebook/react/pull/22483))
 * 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))
 
-## 4.19.1 (October 1, 2021)
+### 4.19.1
+October 1, 2021
 
 #### Bugfix
 * Fixed potential cache miss when insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
 
-## 4.19.0 (September 29, 2021)
+### 4.19.0
+September 29, 2021
 
 #### Features
 * 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
 * DevTools: Hook names optimizations ([bvaughn](https://github.com/bvaughn) in [#22403](https://github.com/facebook/react/pull/22403))
 * Replaced `network.onRequestFinished()` caching with `network.getHAR()` ([bvaughn](https://github.com/bvaughn) in [#22285](https://github.com/facebook/react/pull/22285))
 
-## 4.18.0 (September 1, 2021)
+### 4.18.0
+September 1, 2021
 
 #### Features
 * 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
 * Throw error in console without interfering with logs ([lunaruan](https://github.com/lunaruan) in [#22175](https://github.com/facebook/react/pull/22175))
 
 
-## 4.17.0 (August 24, 2021)
+### 4.17.0
+August 24, 2021
 
 #### Features
 * 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
 * Fix tooltip wheel event regression ([bvaughn](https://github.com/bvaughn) in [#22130](https://github.com/facebook/react/pull/22130))
 * 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))
 
-## 4.16.0 (August 16, 2021)
+### 4.16.0
+August 16, 2021
 #### Features
 * 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))
 #### Bugfix
@@ -160,7 +173,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * Scheduling profiler: Canvas views clip by default ([bvaughn](https://github.com/bvaughn) in [#22100](https://github.com/facebook/react/pull/22100))
 * Fixed Components tree indentation bug for Chrome extension ([bvaughn](https://github.com/bvaughn) in [#22083](https://github.com/facebook/react/pull/22083))
 
-## 4.15.0 (August 11, 2021)
+### 4.15.0
+August 11, 2021
 
 #### Features
 * 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
 
 https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4
 
-## 4.14.0 (July 17, 2021)
+### 4.14.0
+July 17, 2021
 #### Features
 * 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))
 * 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
 ##### Control for manually toggling error boundaries
 ![DevTools error boundary toggle](https://user-images.githubusercontent.com/29597/125891522-30f0d99d-407f-4c31-b5a7-e9d0bd3fa554.gif)
 
-## 4.13.5 (May 25, 2021)
+### 4.13.5
+May 25, 2021
 #### Bugfix
 * 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))
 
-## 4.13.4 (May 20, 2021)
+### 4.13.4
+May 20, 2021
 #### Bugfix
 * 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))
 * 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))
 
-## 4.13.3 (May 19, 2021)
+### 4.13.3
+May 19, 2021
 #### Misc
 * 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))
 
@@ -276,11 +294,13 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
  ([bvaughn](https://github.com/bvaughn) in [9cf1069](https://github.com/facebook/react/commit/9cf1069ffc5f3835506e314ef8c2e80bbfa8bdca#diff))
 * Tweaked DevTools error template title to match issue form template ([bvaughn](https://github.com/bvaughn) in [1a2d792](https://github.com/facebook/react/commit/1a2d7925035531e5767ff31ff8d0d581b5f94d49))
 
-## 4.13.2 (May 7, 2021)
+### 4.13.2
+May 7, 2021
 #### Misc
 * 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))
 
-## 4.13.1 (April 28, 2021)
+### 4.13.1
+April 28, 2021
 #### Bugfix
 * Improve display name logic for `React.memo` components ([bvaughn](https://github.com/bvaughn) in [#21392](https://github.com/facebook/react/pull/21392))
 * 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
 #### Misc
 * 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))
 
-## 4.13.0 (April 28, 2021)
+### 4.13.0
+April 28, 2021
 #### Features
 * Add Bridge protocol version backend/frontend ([bvaughn](https://github.com/bvaughn) in [#21331](https://github.com/facebook/react/pull/21331))
 
@@ -307,33 +328,40 @@ During initialization, DevTools now checks to ensure it's compatible with the ["
 
 Learn more about this change at [fb.me/devtools-unsupported-bridge-protocol](https://fb.me/devtools-unsupported-bridge-protocol)
 
-## 4.12.4 (April 19, 2021)
+### 4.12.4
+April 19, 2021
 #### Bugfix
 * 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))
 
-## 4.12.3 (April 19, 2021)
+### 4.12.3
+April 19, 2021
 #### Bugfix
 * 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))
 
-## 4.12.2 (April 16, 2021)
+### 4.12.2
+April 16, 2021
 #### Bugfix
 * DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21301](https://github.com/facebook/react/pull/21301))
 
-## 4.12.1 (April 14, 2021)
+### 4.12.1
+April 14, 2021
 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
 #### Bugfix
 * Fixed `react-devtools-inline` bug in frontend `initialize` method ([bvaughn](https://github.com/bvaughn) in [#21265](https://github.com/facebook/react/pull/21265))
 
-## 4.12.0 (April 12, 2021)
+### 4.12.0
+April 12, 2021
 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
 #### Features
 * 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))
 
-## 4.11.1 (April 11, 2021)
+### 4.11.1
+April 11, 2021
 #### Bugfix
 * 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))
 
-## 4.11.0 (April 9, 2021)
+### 4.11.0
+April 9, 2021
 #### Bugfix
 * `$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))
 * 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
 ###### Show which hooks (indices) changed when profiling
 ![Show which hooks (indices) changed when profiling](https://user-images.githubusercontent.com/29597/114225838-d37be180-9940-11eb-93f8-93e0115421c8.png)
 
-## 4.10.4 (May 20, 2021)
+### 4.10.4
+May 20, 2021
 #### Bugfix
 * Ported passive effects sync flushing/bubbling bugfix ([bvaughn](https://github.com/bvaughn) in [#21540](https://github.com/facebook/react/pull/21540))
 
-## 4.10.3 (April 27, 2021)
+### 4.10.3
+April 27, 2021
 #### Bugfix
 * 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))
 
-## 4.10.2 (April 27, 2021)
+### 4.10.2
+April 27, 2021
 #### Features
 * 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))
 
-## 4.10.1 (November 12, 2020)
+### 4.10.1
+November 12, 2020
 #### Bugfix
 * Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362))
 
-## 4.10.0 (November 12, 2020)
+### 4.10.0
+November 12, 2020
 #### Features
 * Make DevTools Websocket retry delay configurable ([bvaughn](https://github.com/bvaughn) in [#20107](https://github.com/facebook/react/pull/20107))
 #### Bugfix
@@ -402,7 +435,8 @@ The following features are only enabled when used with (experimental) builds of
 * Remove css-sourcemap for `react-devtools-inline` ([sean9keenan](https://github.com/sean9keenan) in [#20170](https://github.com/facebook/react/pull/20170))
 * Decrease NPM update notification/prompt for standalone DevTools ([recurx](https://github.com/recurx) in [#20078](https://github.com/facebook/react/pull/20078))
 
-## 4.9.0 (October 19, 2020)
+### 4.9.0
+October 19, 2020
 #### Features
 * [Improved DevTools editing interface](#improved-devtools-editing-interface) ([bvaughn](https://github.com/bvaughn) in [#19774](https://github.com/facebook/react/pull/19774))
 * 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
 New keys can be added to object props/state/hooks now. Existing keys can be renamed or deleted entirely:
 ![adding/renaming/removing object properties](https://user-images.githubusercontent.com/29597/93407464-449e5f00-f860-11ea-909b-49dafb56f6c5.gif)
 
-## 4.8.2 (July 15, 2020)
+### 4.8.2
+July 15, 2020
 #### Bugfix
 * Fix broken `Suspense` heuristic ([bvaughn](https://github.com/bvaughn) in [#19373](https://github.com/facebook/react/pull/19373))
 * Fixed error with standalone in HTTPS mode ([b-ponomarenko](https://github.com/b-ponomarenko) in [#19336](https://github.com/facebook/react/pull/19336))
 * Disable DevTools minification ([bvaughn](https://github.com/bvaughn) in [#19369](https://github.com/facebook/react/pull/19369))
 
-## 4.8.1 (July 10, 2020)
+### 4.8.1
+July 10, 2020
 #### Bugfix
 * Fix break-on-warning to truly be off by default. ([gaearon](https://github.com/gaearon) in [#19309](https://github.com/facebook/react/pull/19309))
 
-## 4.8.0 (July 9, 2020)
+### 4.8.0
+July 9, 2020
 #### Features
 * Add SSL support to React devtools standalone ([ittaibaratz](https://github.com/ittaibaratz) in [#19191](https://github.com/facebook/react/pull/19191))
 * 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
 * Remove unnecessary tag end from CommitRanked view ([finico](https://github.com/finico) in [#19195](https://github.com/facebook/react/pull/19195))
 * Shutdown DevTools Bridge synchronously when unmounting ([bvaughn](https://github.com/bvaughn) in [#19180](https://github.com/facebook/react/pull/19180))
 
-## 4.7.0 (May 18, 2020)
+### 4.7.0
+May 18, 2020
 
 #### Features
 * 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
 * Disabled Webpack auto polyfill for `setImmediate` ([bvaughn](https://github.com/bvaughn) in [#18860](https://github.com/facebook/react/pull/18860))
 * Fix mouse interactions for standalone DevTools on Linux ([bl00mber](https://github.com/bl00mber) in [#18772](https://github.com/facebook/react/pull/18772))
 
-## 4.6.0 (March 26, 2020)
+### 4.6.0
+March 26, 2020
 
 #### Features
 * 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
 #### Cleanup
 * Remove "es6-symbol" dependency from "react-devtools-inline" package ([bvaughn](https://github.com/bvaughn) in [#18397](https://github.com/facebook/react/pull/18397))
 
-## 4.5.0 (March 3, 2020)
+### 4.5.0
+March 3, 2020
 
 #### Features
 * 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
 
 ![Vertical Components panel resizing](https://user-images.githubusercontent.com/23095052/74603149-d074c080-50b0-11ea-820f-63db30b4c285.gif)
 
-## 4.4.0 (January 3, 2020)
+### 4.4.0
+January 3, 2020
 #### Features
 * 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))
 * 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
 * Support inspecting values that have overridden `hasOwnProperty` attribute ([bvaughn](https://github.com/bvaughn) in [#17768](https://github.com/facebook/react/pull/17768))
 * 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))
 
-## 4.3.0 (December 20, 2019)
+### 4.3.0
+December 20, 2019
 #### Features
 * Show component location for selected element in bottom/right panel ([bvaughn](https://github.com/bvaughn) in [#17567](https://github.com/facebook/react/pull/17567))
 * 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
 * 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))
 * 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))
 
-## 4.2.1 (November 27, 2019)
+### 4.2.1
+November 27, 2019
 #### Bug fixes
 * Profiler automatically filters certain types of empty (no work) commits. ([bvaughn](https://github.com/bvaughn) in [#17253](https://github.com/facebook/react/pull/17253))
 * Fix memoized components showing as "Anonymous" in Components tab. ([wsmd](https://github.com/wsmd) in [#17274](https://github.com/facebook/react/pull/17274))
 * Edge-case bugfix for non-string element keys. ([bvaughn](https://github.com/bvaughn) in [#17164](https://github.com/facebook/react/pull/17164))
 
-## 4.2.0 (October 3, 2019)
+### 4.2.0
+October 3, 2019
 #### Features
 * "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))
 
-## 4.1.3 (September 30, 2019)
+### 4.1.3
+September 30, 2019
 #### Bug fixes
 * 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))
 
-## 4.1.2 (September 27, 2019)
+### 4.1.2
+September 27, 2019
 #### Bug fixes
 * 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))
 
-## 4.1.1 (September 26, 2019)
+### 4.1.1
+September 26, 2019
 #### Bug fixes
 * 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))
 * 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))
 * 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))
 * Show unsupported version dialog with downgrade instructions. ([bvaughn](https://github.com/bvaughn) in [#16897](https://github.com/facebook/react/pull/16897))
 
-## 4.1.0 (September 19, 2019)
+### 4.1.0
+September 19, 2019
 #### Features
 * 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))
 #### Bug fixes
@@ -588,21 +636,25 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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))
 * 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))
 
-## 4.0.6 (August 26, 2019)
+### 4.0.6
+August 26, 2019
 #### Bug fixes
 * Remove ⚛️ emoji prefix from Firefox extension tab labels
 * Standalone polyfills `Symbol` usage
 
-## 4.0.5 (August 19, 2019)
+### 4.0.5
+August 19, 2019
 #### Bug fixes
 * Props, state, and context values are alpha sorted.
 * Standalone DevTools properly serves backend script over localhost:8097
 
-## 4.0.4 (August 18, 2019)
+### 4.0.4
+August 18, 2019
 #### Bug fixes
 * Bugfix for potential error if a min-duration commit filter is applied after selecting a fiber in the Profiler UI.
 
-## 4.0.3 (August 17, 2019)
+### 4.0.3
+August 17, 2019
 #### Bug fixes
 * ES6 `Map` and `Set`, typed arrays, and other unserializable types (e.g. Immutable JS) can now be inspected.
 * 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
 * Style editor now supports single quotes around string values (e.g. both `"red"` and `'red'`).
 * Fixed edge case bug that prevented profiling when both React v16 and v15 were present on a page.
 
-## 4.0.2 (August 15, 2019)
+### 4.0.2
+August 15, 2019
 #### Permissions cleanup
 * Removed unnecessary `webNavigation ` permission from Chrome and Firefox extensions.
 
-## 4.0.1 (August 15, 2019)
+### 4.0.1
+August 15, 2019
 #### Permissions cleanup
 * Removed unnecessary `<all_urls>`, `background`, and `tabs` permissions from Chrome and Firefox extensions.
 
-## 4.0.0 (August 15, 2019)
+### 4.0.0
+August 15, 2019
 
 ### General changes
 
@@ -753,4 +808,4 @@ Because this feature adds a small amount of overhead, it can be disabled in the
 
 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.
 
-![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
+![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

From 4e8e86610c1b6e12fcb91f4fb0b46680380a27bc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 2 Mar 2022 11:27:32 -0500
Subject: [PATCH 2/3] Display separate frontend and backend versions

---
 .../src/backend/agent.js                      | 15 ++++-
 packages/react-devtools-shared/src/bridge.js  |  2 +
 .../src/devtools/store.js                     | 18 ++++++
 .../views/Settings/GeneralSettings.js         | 60 ++++++++++++++++---
 .../react-devtools-shell/src/app/index.js     |  2 -
 5 files changed, 85 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index f31e3a6c38a7b..0f0ddbc332c19 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -185,6 +185,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
+    bridge.addListener('getBackendVersion', this.getBackendVersion);
     bridge.addListener('getBridgeProtocol', this.getBridgeProtocol);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
@@ -225,7 +226,12 @@ export default class Agent extends EventEmitter<{|
       bridge.send('profilingStatus', true);
     }
 
-    // Send the Bridge protocol after initialization in case the frontend has already requested it.
+    // Send the Bridge protocol and backend versions, after initialization, in case the frontend has already requested it.
+    // The Store may be instantiated beore the agent.
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
 
     // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
@@ -322,6 +328,13 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
+  getBackendVersion = () => {
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
+  };
+
   getBridgeProtocol = () => {
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index cdeec7aebfc4b..ecb5e66672de8 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -185,6 +185,7 @@ type SavedPreferencesParams = {|
 |};
 
 export type BackendEvents = {|
+  backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   fastRefreshScheduled: [],
@@ -219,6 +220,7 @@ type FrontendEvents = {|
   clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
+  getBackendVersion: [],
   getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index a2fda1825fcaa..ddf647cc210fa 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -85,6 +85,7 @@ export type Capabilities = {|
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter<{|
+  backendVersion: [],
   collapseNodesByDefault: [],
   componentFilters: [],
   error: [Error],
@@ -98,6 +99,10 @@ export default class Store extends EventEmitter<{|
   unsupportedBridgeProtocolDetected: [],
   unsupportedRendererVersionDetected: [],
 |}> {
+  // If the backend version is new enough to report its (NPM) version, this is it.
+  // This version may be displayed by the frontend for debugging purposes.
+  _backendVersion: string | null = null;
+
   _bridge: FrontendBridge;
 
   // Computed whenever _errorsAndWarnings Map changes.
@@ -264,6 +269,9 @@ export default class Store extends EventEmitter<{|
       bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
       bridge.send('getBridgeProtocol');
     }
+
+    bridge.addListener('backendVersion', this.onBridgeBackendVersion);
+    bridge.send('getBackendVersion');
   }
 
   // This is only used in tests to avoid memory leaks.
@@ -301,6 +309,10 @@ export default class Store extends EventEmitter<{|
     }
   }
 
+  get backendVersion(): string | null {
+    return this._backendVersion;
+  }
+
   get collapseNodesByDefault(): boolean {
     return this._collapseNodesByDefault;
   }
@@ -1333,6 +1345,7 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.removeListener('backendVersion', this.onBridgeBackendVersion);
     bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
 
     if (this._onBridgeProtocolTimeoutID !== null) {
@@ -1359,6 +1372,11 @@ export default class Store extends EventEmitter<{|
     this.emit('unsupportedRendererVersionDetected');
   };
 
+  onBridgeBackendVersion = (backendVersion: string) => {
+    this._backendVersion = backendVersion;
+    this.emit('backendVersion');
+  };
+
   onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
     if (this._onBridgeProtocolTimeoutID !== null) {
       clearTimeout(this._onBridgeProtocolTimeoutID);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 5c5b8a0079643..95fefd15565c2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -8,13 +8,26 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useMemo} from 'react';
 import {SettingsContext} from './SettingsContext';
 import {StoreContext} from '../context';
 import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './SettingsShared.css';
 
+function getChangeLogUrl(version: ?string): string | null {
+  if (!version) {
+    return null;
+  }
+
+  // Version numbers are in the format of: <major>.<minor>.<patch>-<sha>
+  // e.g. "4.23.0-f0dd459e0"
+  // GitHub CHANGELOG headers are in the format of: <major>.<minor>.<patch>
+  // but the "." are stripped from anchor tags, becomming: <major><minor><patch>
+  const versionAnchor = version.replace(/^(\d+)\.(\d+)\.(\d+).*/, '$1$2$3');
+  return `${CHANGE_LOG_URL}#${versionAnchor}`;
+}
+
 export default function GeneralSettings(_: {||}) {
   const {
     displayDensity,
@@ -25,7 +38,11 @@ export default function GeneralSettings(_: {||}) {
     traceUpdatesEnabled,
   } = useContext(SettingsContext);
 
-  const {supportsTraceUpdates} = useContext(StoreContext);
+  const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
+  const frontendVersion = process.env.DEVTOOLS_VERSION;
+
+  const showBackendVersion =
+    backendVersion && backendVersion !== frontendVersion;
 
   return (
     <div className={styles.Settings}>
@@ -70,15 +87,40 @@ export default function GeneralSettings(_: {||}) {
       )}
 
       <div className={styles.ReleaseNotes}>
+        {showBackendVersion && (
+          <>
+            <Version label="backend" version={backendVersion} />
+            {', '}
+            <Version label="frontend" version={frontendVersion} />
+          </>
+        )}
+        {!showBackendVersion && (
+          <Version label="DevTools version" version={frontendVersion} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Version({label, version}: {|label: string, version: ?string|}) {
+  const changelogLink = useMemo(() => {
+    return getChangeLogUrl(version);
+  }, [version]);
+
+  if (version == null) {
+    return null;
+  } else {
+    return (
+      <>
+        {label}{' '}
         <a
           className={styles.ReleaseNotesLink}
           target="_blank"
           rel="noopener noreferrer"
-          href={CHANGE_LOG_URL}>
-          View release notes
-        </a>{' '}
-        for DevTools version {process.env.DEVTOOLS_VERSION}
-      </div>
-    </div>
-  );
+          href={changelogLink}>
+          {version}
+        </a>
+      </>
+    );
+  }
 }
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index b00ea8ad6e90d..89f14c8e3150d 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -10,7 +10,6 @@ import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
-import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
@@ -83,7 +82,6 @@ function mountTestApp() {
   mountApp(Hydration);
   mountApp(ElementTypes);
   mountApp(EditableProps);
-  mountApp(InlineWarnings);
   mountApp(ReactNativeWeb);
   mountApp(Toggle);
   mountApp(ErrorBoundaries);

From a35c24c5e60378878b039d56dce8da1c970ebffe Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 2 Mar 2022 11:40:27 -0500
Subject: [PATCH 3/3] Format versions better in dialog

---
 .../views/Settings/GeneralSettings.js         | 23 ++++++++++++++-----
 .../views/Settings/SettingsShared.css         |  6 +++++
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 95fefd15565c2..a781f99eb05c5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -88,14 +88,25 @@ export default function GeneralSettings(_: {||}) {
 
       <div className={styles.ReleaseNotes}>
         {showBackendVersion && (
-          <>
-            <Version label="backend" version={backendVersion} />
-            {', '}
-            <Version label="frontend" version={frontendVersion} />
-          </>
+          <div>
+            <ul className={styles.VersionsList}>
+              <li>
+                <Version
+                  label="DevTools backend version:"
+                  version={backendVersion}
+                />
+              </li>
+              <li>
+                <Version
+                  label="DevTools frontend version:"
+                  version={frontendVersion}
+                />
+              </li>
+            </ul>
+          </div>
         )}
         {!showBackendVersion && (
-          <Version label="DevTools version" version={frontendVersion} />
+          <Version label="DevTools version:" version={frontendVersion} />
         )}
       </div>
     </div>
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 9c0ee028c9968..dd3f5456c464c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -149,4 +149,10 @@
 
 .Warning {
   color: var(--color-error-text);
+}
+
+.VersionsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file