| 1 | # React DevTools changelog |
| 2 | |
| 3 | <!-- RELEASE_SCRIPT_TOKEN --> |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ### 7.0.1 |
| 8 | October 20, 2025 |
| 9 | |
| 10 | * Various UI improvements to experimental Suspense tab ([sebmarkbage](https://github.com/sebmarkbage) & [eps1lon](https://github.com/eps1lon)) |
| 11 | * devtools: fix ellipsis truncation for key values ([sophiebits](https://github.com/sophiebits) in [#34796](https://github.com/facebook/react/pull/34796)) |
| 12 | * fix(devtools): remove duplicated "Display density" field in General settings ([Anatole-Godard](https://github.com/Anatole-Godard) in [#34792](https://github.com/facebook/react/pull/34792)) |
| 13 | |
| 14 | --- |
| 15 | |
| 16 | ### 7.0.0 |
| 17 | Oct 2, 2025 |
| 18 | |
| 19 | Add a "suspended by" section showing all causes of why the inspected element suspended. This includes: |
| 20 | |
| 21 | - `await` in Server Components |
| 22 | - `React.lazy` |
| 23 | - `use()` |
| 24 | - suspensey images, CSS, and fonts |
| 25 | |
| 26 | Add a Code Editor Sidebar Pane in the Chrome Sources Tab (@sebmarkbage [#33968](https://github.com/facebook/react/pull/33968), [#33987](https://github.com/facebook/react/pull/33987), [#33988](https://github.com/facebook/react/pull/33988)) |
| 27 | |
| 28 | Add Option to Open Local Files directly in External Editor (@sebmarkbage [#33983](https://github.com/facebook/react/pull/33983), [#33985](https://github.com/facebook/react/pull/33985), [#33965](https://github.com/facebook/react/pull/33965)) |
| 29 | |
| 30 | #### Other changes |
| 31 | |
| 32 | - Allow inspection of React tree before streaming has finished (@eps1lon [#34360](https://github.com/facebook/react/pull/34360)) |
| 33 | - Always attempt to mount dehydrated roots (@eps1lon [#34209](https://github.com/facebook/react/pull/34209)) |
| 34 | - Show `name` prop of Suspense / Activity in the Components Tree view (@sebmarkbage [#34135](https://github.com/facebook/react/pull/34135)) |
| 35 | - 1st class support of used Thenables (@sebmarkbage, @eps1lon: [#32989](https://github.com/facebook/react/pull/32989), [#34097](https://github.com/facebook/react/pull/34097)) |
| 36 | - Allow inspecting cause, name, message, stack of Errors in props (@eps1lon [#33023](https://github.com/facebook/react/pull/33023)) |
| 37 | - Allow Introspection of React Elements and React.lazy (@sebmarkbage [#34129](https://github.com/facebook/react/pull/34129)) |
| 38 | - Fix "View source" for sources with URLs that aren't normalized (@eps1lon [#32951](https://github.com/facebook/react/pull/32951)) |
| 39 | - Fix symbolication with Index Source Maps (@eps1lon [#34300](https://github.com/facebook/react/pull/34300)) |
| 40 | - Ignore List Stack Traces (@sebmarkbage [#34210](https://github.com/facebook/react/pull/34210)) |
| 41 | - Linkify Source View (@sebmarkbage [#33954](https://github.com/facebook/react/pull/33954)) |
| 42 | - Only show state for ClassComponents (@sebmarkbage [#34091](https://github.com/facebook/react/pull/34091)) |
| 43 | - Show Owner Stacks in "rendered by" View (@sebmarkbage [#34130](https://github.com/facebook/react/pull/34130)) |
| 44 | - Stop mounting empty roots (@eps1lon [#34467](https://github.com/facebook/react/pull/34467)) |
| 45 | - Show changed hooks names in the Profiler tab (@piotrski [#31398](https://github.com/facebook/react/pull/31398)) |
| 46 | - Display native tag for host components for Native (@ruslan [#32762](https://github.com/facebook/react/pull/32762)) |
| 47 | - Static Components panel layout (@ruslan [#33696](https://github.com/facebook/react/pull/33696), [#33517](https://github.com/facebook/react/pull/33517), [#34088](https://github.com/facebook/react/pull/34088)) |
| 48 | - Add Badge to Owners and sometimes stack traces (@sebmarkbage [#34106](https://github.com/facebook/react/pull/34106)) |
| 49 | - Make a non-editable name of KeyValue clickable ([34095](https://github.com/facebook/react/pull/34095)) |
| 50 | - Only inspect elements on left mouseclick (@eps1lon [#34361](https://github.com/facebook/react/pull/34361)) |
| 51 | - Rerender when the browser theme changes (@sebmarkbage [#33992](https://github.com/facebook/react/pull/33992)) |
| 52 | - Stop using native `title` for buttons/icons (@eps1lon [#34379](https://github.com/facebook/react/pull/34379)) |
| 53 | - Style clickable Owner components with angle brackets and bold (@sebmarkbage [#34096](https://github.com/facebook/react/pull/34096)) |
| 54 | - Swap Components tab layout based on container size (@eps1lon [#34035](https://github.com/facebook/react/pull/34035)) |
| 55 | - Use Visually Lighter Skeletons (@sebmarkbage [#34185](https://github.com/facebook/react/pull/34185)) |
| 56 | |
| 57 | --- |
| 58 | |
| 59 | ### 6.1.5 |
| 60 | July 4, 2025 |
| 61 | |
| 62 | * fix: fallback to reading string stack trace when failed ([hoxyq](https://github.com/hoxyq) in [#33700](https://github.com/facebook/react/pull/33700)) |
| 63 | |
| 64 | --- |
| 65 | |
| 66 | ### 6.1.4 |
| 67 | July 4, 2025 |
| 68 | |
| 69 | * feat: static Components panel layout ([hoxyq](https://github.com/hoxyq) in [#33696](https://github.com/facebook/react/pull/33696)) |
| 70 | |
| 71 | --- |
| 72 | |
| 73 | ### 6.1.3 |
| 74 | June 27, 2025 |
| 75 | |
| 76 | * devtools: emit performance entries only when profiling ([hoxyq](https://github.com/hoxyq) in [#33652](https://github.com/facebook/react/pull/33652)) |
| 77 | * Get Server Component Function Location for Parent Stacks using Child's Owner Stack ([sebmarkbage](https://github.com/sebmarkbage) in [#33629](https://github.com/facebook/react/pull/33629)) |
| 78 | * Added minimum indent size to Component Tree ([jsdf](https://github.com/jsdf) in [#33517](https://github.com/facebook/react/pull/33517)) |
| 79 | * refactor[devtools]: update css for settings and support css variables in shadow dom scnenario ([hoxyq](https://github.com/hoxyq) in [#33487](https://github.com/facebook/react/pull/33487)) |
| 80 | * Get source location from structured callsites in prepareStackTrace ([sebmarkbage](https://github.com/sebmarkbage) in [#33143](https://github.com/facebook/react/pull/33143)) |
| 81 | |
| 82 | --- |
| 83 | |
| 84 | ### 6.1.2 |
| 85 | May 7, 2025 |
| 86 | |
| 87 | * Restore "double-click to view owners tree" functionality ([eps1lon](https://github.com/eps1lon) in [#33039](https://github.com/facebook/react/pull/33039)) |
| 88 | |
| 89 | --- |
| 90 | |
| 91 | ### 6.1.1 |
| 92 | February 7, 2025 |
| 93 | |
| 94 | * DevTools: refactor NativeStyleEditor, don't use custom cache implementation ([hoxyq](https://github.com/hoxyq) in [#32298](https://github.com/facebook/react/pull/32298)) |
| 95 | * DevTools: fix host component filter option title ([hoxyq](https://github.com/hoxyq) in [#32296](https://github.com/facebook/react/pull/32296)) |
| 96 | * chore[DevTools]: make clipboardWrite optional for chromium ([hoxyq](https://github.com/hoxyq) in [#32262](https://github.com/facebook/react/pull/32262)) |
| 97 | |
| 98 | --- |
| 99 | |
| 100 | ### 6.1.0 |
| 101 | January 16, 2025 |
| 102 | |
| 103 | * fix[DevTools]: fix HostComponent naming in filters for Native ([hoxyq](https://github.com/hoxyq) in [#32086](https://github.com/facebook/react/pull/32086)) |
| 104 | * Fix copy functionality in Firefox ([V3RON](https://github.com/V3RON) in [#32077](https://github.com/facebook/react/pull/32077)) |
| 105 | * Prevent crash when starting consecutive profiling sessions ([V3RON](https://github.com/V3RON) in [#32066](https://github.com/facebook/react/pull/32066)) |
| 106 | * fix[DevTools/Tree]: only scroll to item when panel is visible ([hoxyq](https://github.com/hoxyq) in [#32018](https://github.com/facebook/react/pull/32018)) |
| 107 | * feat[Tree]: set initial scroll offset when inspected element index is set ([hoxyq](https://github.com/hoxyq) in [#31968](https://github.com/facebook/react/pull/31968)) |
| 108 | * DevTools: fix initial host instance selection ([hoxyq](https://github.com/hoxyq) in [#31892](https://github.com/facebook/react/pull/31892)) |
| 109 | * chore[DevTools/Tree]: don't pre-select root element ([hoxyq](https://github.com/hoxyq) in [#32015](https://github.com/facebook/react/pull/32015)) |
| 110 | * Show component names while highlighting renders ([piotrski](https://github.com/piotrski) in [#31577](https://github.com/facebook/react/pull/31577)) |
| 111 | * allow non-coercible objects in formatConsoleArgumentsToSingleString ([henryqdineen](https://github.com/henryqdineen) in [#31444](https://github.com/facebook/react/pull/31444)) |
| 112 | |
| 113 | --- |
| 114 | |
| 115 | ### 6.0.1 |
| 116 | October 15, 2024 |
| 117 | |
| 118 | * Fix React Compiler badging ([poteto](https://github.com/poteto) in [#31196](https://github.com/facebook/react/pull/31196)) |
| 119 | * fix[react-devtools]: record timeline data only when supported ([hoxyq](https://github.com/hoxyq) in [#31154](https://github.com/facebook/react/pull/31154)) |
| 120 | * fix[react-devtools]: remove all listeners when Agent is shutdown ([hoxyq](https://github.com/hoxyq) in [#31151](https://github.com/facebook/react/pull/31151)) |
| 121 | * fix[react-devtools]: wrap key string in preformatted text html element ([hoxyq](https://github.com/hoxyq) in [#31153](https://github.com/facebook/react/pull/31153)) |
| 122 | * fix[react-devtools]: request hook initialization inside http server response ([hoxyq](https://github.com/hoxyq) in [#31102](https://github.com/facebook/react/pull/31102)) |
| 123 | * refactor: allow custom impl of backend reload-to-profile support check ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31048](https://github.com/facebook/react/pull/31048)) |
| 124 | |
| 125 | --- |
| 126 | |
| 127 | ### 6.0.0 |
| 128 | September 25, 2024 |
| 129 | |
| 130 | #### Features |
| 131 | * Support Server Components in Tree ([sebmarkbage](https://github.com/sebmarkbage) in [#30684](https://github.com/facebook/react/pull/30684)) |
| 132 | * feat: expose installHook with settings argument from react-devtools-core/backend ([hoxyq](https://github.com/hoxyq) in [#30987](https://github.com/facebook/react/pull/30987)) |
| 133 | * Add Filtering of Environment Names ([sebmarkbage](https://github.com/sebmarkbage) in [#30850](https://github.com/facebook/react/pull/30850)) |
| 134 | * Support secondary environment name when it changes ([sebmarkbage](https://github.com/sebmarkbage) in [#30842](https://github.com/facebook/react/pull/30842)) |
| 135 | * Filter Server Components ([sebmarkbage](https://github.com/sebmarkbage) in [#30839](https://github.com/facebook/react/pull/30839)) |
| 136 | * Make function inspection instant ([sebmarkbage](https://github.com/sebmarkbage) in [#30786](https://github.com/facebook/react/pull/30786)) |
| 137 | * Make Functions Clickable to Jump to Definition ([sebmarkbage](https://github.com/sebmarkbage) in [#30769](https://github.com/facebook/react/pull/30769)) |
| 138 | * [Flight/DevTools] Pass the Server Component's "key" as Part of the ReactComponentInfo ([sebmarkbage](https://github.com/sebmarkbage) in [#30703](https://github.com/facebook/react/pull/30703)) |
| 139 | * Make Element Inspection Feel Snappy ([sebmarkbage](https://github.com/sebmarkbage) in [#30555](https://github.com/facebook/react/pull/30555)) |
| 140 | * Print component stacks as error objects to get source mapping ([sebmarkbage](https://github.com/sebmarkbage) in [#30289](https://github.com/facebook/react/pull/30289)) |
| 141 | |
| 142 | #### Bugfixes |
| 143 | * Fix: profiling crashes #30661 #28838 ([EdmondChuiHW](https://github.com/EdmondChuiHW) in [#31024](https://github.com/facebook/react/pull/31024)) |
| 144 | * chore: remove settings manager from react-devtools-core ([hoxyq](https://github.com/hoxyq) in [#30986](https://github.com/facebook/react/pull/30986)) |
| 145 | * fix[react-devtools/extensions]: fixed tabs API calls and displaying restricted access popup ([hoxyq](https://github.com/hoxyq) in [#30825](https://github.com/facebook/react/pull/30825)) |
| 146 | * fix[react-devtools/InspectedElement]: fixed border stylings when some of the panels are not rendered ([hoxyq](https://github.com/hoxyq) in [#30676](https://github.com/facebook/react/pull/30676)) |
| 147 | * fix: path handling in react devtools ([Jack-Works](https://github.com/Jack-Works) in [#29199](https://github.com/facebook/react/pull/29199)) |
| 148 | |
| 149 | #### Other |
| 150 | * feat: display message if user ended up opening hook script ([hoxyq](https://github.com/hoxyq) in [#31000](https://github.com/facebook/react/pull/31000)) |
| 151 | * refactor[react-devtools]: move console patching to global hook ([hoxyq](https://github.com/hoxyq) in [#30596](https://github.com/facebook/react/pull/30596)) |
| 152 | * refactor[react-devtools]: initialize renderer interface early ([hoxyq](https://github.com/hoxyq) in [#30946](https://github.com/facebook/react/pull/30946)) |
| 153 | * Use Unicode Atom Symbol instead of Atom Emoji ([sebmarkbage](https://github.com/sebmarkbage) in [#30832](https://github.com/facebook/react/pull/30832)) |
| 154 | * feat[react-devtools]: support Manifest v3 for Firefox extension ([hoxyq](https://github.com/hoxyq) in [#30824](https://github.com/facebook/react/pull/30824)) |
| 155 | * Enable pointEvents while scrolling ([sebmarkbage](https://github.com/sebmarkbage) in [#30560](https://github.com/facebook/react/pull/30560)) |
| 156 | |
| 157 | --- |
| 158 | |
| 159 | ### 5.3.1 |
| 160 | July 3, 2024 |
| 161 | |
| 162 | * chore[react-devtools/renderer]: dont show strict mode warning for prod renderer builds ([hoxyq](https://github.com/hoxyq) in [#30158](https://github.com/facebook/react/pull/30158)) |
| 163 | * chore[react-devtools/ui]: fix strict mode badge styles ([hoxyq](https://github.com/hoxyq) in [#30159](https://github.com/facebook/react/pull/30159)) |
| 164 | * fix[react-devtools]: restore original args when recording errors ([hoxyq](https://github.com/hoxyq) in [#30091](https://github.com/facebook/react/pull/30091)) |
| 165 | * Read constructor name more carefully ([LoganDark](https://github.com/LoganDark) in [#29954](https://github.com/facebook/react/pull/29954)) |
| 166 | * refactor[react-devtools/extensions]: dont debounce cleanup logic on navigation ([hoxyq](https://github.com/hoxyq) in [#30027](https://github.com/facebook/react/pull/30027)) |
| 167 | |
| 168 | --- |
| 169 | |
| 170 | ### 5.3.0 |
| 171 | June 17, 2024 |
| 172 | |
| 173 | * chore[react-devtools]: improve console arguments formatting before passing it to original console ([hoxyq](https://github.com/hoxyq) in [#29873](https://github.com/facebook/react/pull/29873)) |
| 174 | * chore[react-devtools]: unify console patching and default to ansi escape symbols ([hoxyq](https://github.com/hoxyq) in [#29869](https://github.com/facebook/react/pull/29869)) |
| 175 | * chore[react-devtools/extensions]: make source maps url relative ([hoxyq](https://github.com/hoxyq) in [#29886](https://github.com/facebook/react/pull/29886)) |
| 176 | * fix[react-devtools] divided inspecting elements between inspecting do… ([vzaidman](https://github.com/vzaidman) in [#29885](https://github.com/facebook/react/pull/29885)) |
| 177 | * fix[react-devtools] component badge in light mode is now not invisible ([vzaidman](https://github.com/vzaidman) in [#29852](https://github.com/facebook/react/pull/29852)) |
| 178 | * fix[react-devtools] remove native inspection button when it can't be used ([vzaidman](https://github.com/vzaidman) in [#29779](https://github.com/facebook/react/pull/29779)) |
| 179 | * chore[react-devtools]: ip => internal-ip ([hoxyq](https://github.com/hoxyq) in [#29772](https://github.com/facebook/react/pull/29772)) |
| 180 | * Fix #29724: `ip` dependency update for CVE-2024-29415 ([Rekl0w](https://github.com/Rekl0w) in [#29725](https://github.com/facebook/react/pull/29725)) |
| 181 | * Dim `console` calls on additional Effect invocations due to `StrictMode` ([eps1lon](https://github.com/eps1lon) in [#29007](https://github.com/facebook/react/pull/29007)) |
| 182 | * refactor[react-devtools]: rewrite context menus ([hoxyq](https://github.com/hoxyq) in [#29049](https://github.com/facebook/react/pull/29049)) |
| 183 | |
| 184 | --- |
| 185 | |
| 186 | ### 5.2.0 |
| 187 | May 8, 2024 |
| 188 | |
| 189 | * feat[react-devtools]: display forget badge for components in profiling session ([hoxyq](https://github.com/hoxyq) in [#29014](https://github.com/facebook/react/pull/29014)) |
| 190 | * fix[react-devtools]: add backwards compat with legacy element type symbol ([hoxyq](https://github.com/hoxyq) in [#28982](https://github.com/facebook/react/pull/28982)) |
| 191 | * Expose "view source" options to Fusebox integration ([motiz88](https://github.com/motiz88) in [#28973](https://github.com/facebook/react/pull/28973)) |
| 192 | * Enable inspected element context menu in Fusebox ([motiz88](https://github.com/motiz88) in [#28972](https://github.com/facebook/react/pull/28972)) |
| 193 | * Check in `frontend.d.ts` for react-devtools-fusebox, include in build output ([motiz88](https://github.com/motiz88) in [#28970](https://github.com/facebook/react/pull/28970)) |
| 194 | * Rename Forget badge ([jbonta](https://github.com/jbonta) in [#28858](https://github.com/facebook/react/pull/28858)) |
| 195 | * Devtools: Add support for useFormStatus ([eps1lon](https://github.com/eps1lon) in [#28413](https://github.com/facebook/react/pull/28413)) |
| 196 | |
| 197 | --- |
| 198 | |
| 199 | ### 5.1.0 |
| 200 | April 15, 2024 |
| 201 | |
| 202 | * Look for a ReactMemoCacheSentinel on state ([gsathya](https://github.com/gsathya) in [#28831](https://github.com/facebook/react/pull/28831)) |
| 203 | * feat[devtools]: add method for connecting backend with custom messaging protocol ([hoxyq](https://github.com/hoxyq) in [#28552](https://github.com/facebook/react/pull/28552)) |
| 204 | * feat[devtools]: ship source maps for content scripts and ignore list installHook script ([hoxyq](https://github.com/hoxyq) in [#28730](https://github.com/facebook/react/pull/28730)) |
| 205 | * Devtools: Display actual pending state when inspecting `useTransition` ([eps1lon](https://github.com/eps1lon) in [#28499](https://github.com/facebook/react/pull/28499)) |
| 206 | |
| 207 | --- |
| 208 | |
| 209 | ### 5.0.2 |
| 210 | March 5, 2024 |
| 211 | |
| 212 | * feat[devtools]: symbolicate source for inspected element ([hoxyq](https://github.com/hoxyq) in [#28471](https://github.com/facebook/react/pull/28471)) |
| 213 | * refactor[devtools]: lazily define source for fiber based on component stacks ([hoxyq](https://github.com/hoxyq) in [#28351](https://github.com/facebook/react/pull/28351)) |
| 214 | * fix[devtools/tree/element]: onClick -> onMouseDown to handle first click correctly ([hoxyq](https://github.com/hoxyq) in [#28486](https://github.com/facebook/react/pull/28486)) |
| 215 | * Devtools: Unwrap Promise in useFormState ([eps1lon](https://github.com/eps1lon) in [#28319](https://github.com/facebook/react/pull/28319)) |
| 216 | * Include server component names in the componentStack in DEV ([sebmarkbage](https://github.com/sebmarkbage) in [#28415](https://github.com/facebook/react/pull/28415)) |
| 217 | |
| 218 | --- |
| 219 | |
| 220 | ### 5.0.1 |
| 221 | February 22, 2024 |
| 222 | |
| 223 | * feature[REMOVED][devtools]: turn off / hide location based component filters ([hoxyq](https://github.com/hoxyq) in [#28417](https://github.com/facebook/react/pull/28417)) |
| 224 | * Add useSyncExternalStore and useTransition to getPrimitiveStackCache ([jamesbvaughan](https://github.com/jamesbvaughan) in [#28399](https://github.com/facebook/react/pull/28399)) |
| 225 | * chore[devtools]: use react-window from npm and bump react-virtualized-auto-sizer to ^1.0.23 ([hoxyq](https://github.com/hoxyq) in [#28408](https://github.com/facebook/react/pull/28408)) |
| 226 | * [Debug Tools] Always use includeHooksSource option ([sebmarkbage](https://github.com/sebmarkbage) in [#28309](https://github.com/facebook/react/pull/28309)) |
| 227 | * [Debug Tools] Introspect Promises in use() ([sebmarkbage](https://github.com/sebmarkbage) in [#28297](https://github.com/facebook/react/pull/28297)) |
| 228 | * fix[devtools/useModalDismissSignal]: use getRootNode for shadow root case support ([hoxyq](https://github.com/hoxyq) in [#28145](https://github.com/facebook/react/pull/28145)) |
| 229 | * DevTools: Add support for use(Context) ([eps1lon](https://github.com/eps1lon) in [#28233](https://github.com/facebook/react/pull/28233)) |
| 230 | * Patch devtools before running useMemo function in strict mode ([gsathya](https://github.com/gsathya) in [#28249](https://github.com/facebook/react/pull/28249)) |
| 231 | * DevTools: Add support for useFormState ([eps1lon](https://github.com/eps1lon) in [#28232](https://github.com/facebook/react/pull/28232)) |
| 232 | * DevTools: Add support for useOptimistic Hook ([eps1lon](https://github.com/eps1lon) in [#27982](https://github.com/facebook/react/pull/27982)) |
| 233 | |
| 234 | --- |
| 235 | |
| 236 | ### 5.0.0 |
| 237 | November 29, 2023 |
| 238 | |
| 239 | ### Breaking |
| 240 | * refactor[devtools]: highlight an array of elements for native ([hoxyq](https://github.com/hoxyq) in [#27734](https://github.com/facebook/react/pull/27734)) |
| 241 | |
| 242 | ### Features |
| 243 | * feat[devtools]: display Forget badge for the relevant components ([hoxyq](https://github.com/hoxyq) in [#27709](https://github.com/facebook/react/pull/27709)) |
| 244 | |
| 245 | ### Other |
| 246 | * Added windows powershell syntax to build scripts ([PrathamLalwani](https://github.com/PrathamLalwani) in [#27692](https://github.com/facebook/react/pull/27692)) |
| 247 | * refactor[react-devtools-shared]: minor parsing improvements and modifications ([hoxyq](https://github.com/hoxyq) in [#27661](https://github.com/facebook/react/pull/27661)) |
| 248 | |
| 249 | --- |
| 250 | |
| 251 | ### 4.28.5 |
| 252 | October 18, 2023 |
| 253 | |
| 254 | #### Bugfixes |
| 255 | * fix[devtools/useMemoCache]: add stub for useMemoCache in ReactDebugHook ([hoxyq](https://github.com/hoxyq) in [#27472](https://github.com/facebook/react/pull/27472)) |
| 256 | * refactor[react-devtools-extensions]: use globals to eliminate dead code ([hoxyq](https://github.com/hoxyq) in [#27516](https://github.com/facebook/react/pull/27516)) |
| 257 | * fix[devtools/inspectElement]: dont pause initial inspectElement call when user switches tabs ([hoxyq](https://github.com/hoxyq) in [#27488](https://github.com/facebook/react/pull/27488)) |
| 258 | |
| 259 | --- |
| 260 | |
| 261 | ### 4.28.4 |
| 262 | September 25, 2023 |
| 263 | |
| 264 | #### Features |
| 265 | * feat:-Added a delete all filters action and added title to the add filter a… ([Biki-das](https://github.com/Biki-das) in [#27332](https://github.com/facebook/react/pull/27332)) |
| 266 | * feat[devtools/extension]: add dark theme for popup ([rakleed](https://github.com/rakleed) in [#27330](https://github.com/facebook/react/pull/27330)) |
| 267 | |
| 268 | #### Bugfixes |
| 269 | * refactor[devtools/extension]: refactored messaging logic across different parts of the extension ([hoxyq](https://github.com/hoxyq) in [#27417](https://github.com/facebook/react/pull/27417)) |
| 270 | * fix[devtools/extension]: added a workaround for proxy content script injection in firefox ([hoxyq](https://github.com/hoxyq) in [#27375](https://github.com/facebook/react/pull/27375)) |
| 271 | * fix[devtools/useTransition]: don't check for dispatch property when determining if hook is stateful ([hoxyq](https://github.com/hoxyq) in [#27365](https://github.com/facebook/react/pull/27365)) |
| 272 | * feat[devtools/extension]: show disclaimer when page doesnt run react and refactor react polling logic ([hoxyq](https://github.com/hoxyq) in [#27373](https://github.com/facebook/react/pull/27373)) |
| 273 | * fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering ([hoxyq](https://github.com/hoxyq) in [#27369](https://github.com/facebook/react/pull/27369)) |
| 274 | * refactor[devtools/extension]: more stable element updates polling to avoid timed out errors ([hoxyq](https://github.com/hoxyq) in [#27357](https://github.com/facebook/react/pull/27357)) |
| 275 | |
| 276 | --- |
| 277 | |
| 278 | ### 4.28.3 |
| 279 | September 5, 2023 |
| 280 | |
| 281 | * refactor[devtools/extension]: handle ports disconnection, instead of frequent reconnection ([hoxyq](https://github.com/hoxyq) in [#27336](https://github.com/facebook/react/pull/27336)) |
| 282 | * refactor[devtools/extension]: migrate from using setInterval for polling if react is loaded ([hoxyq](https://github.com/hoxyq) in [#27323](https://github.com/facebook/react/pull/27323)) |
| 283 | * fix[devtools/extension]: fixed duplicating panels in firefox ([hoxyq](https://github.com/hoxyq) in [#27320](https://github.com/facebook/react/pull/27320)) |
| 284 | |
| 285 | --- |
| 286 | |
| 287 | ### 4.28.2 |
| 288 | August 30, 2023 |
| 289 | |
| 290 | #### Bugfixes |
| 291 | * fix[devtools/extension]: handle tab navigation events before react is loaded ([hoxyq](https://github.com/hoxyq) in [#27316](https://github.com/facebook/react/pull/27316)) |
| 292 | |
| 293 | --- |
| 294 | |
| 295 | ### 4.28.1 |
| 296 | August 29, 2023 |
| 297 | |
| 298 | #### Features |
| 299 | * feat: added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [#26949](https://github.com/facebook/react/pull/26949)) |
| 300 | |
| 301 | #### Bugfixes |
| 302 | * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [#27215](https://github.com/facebook/react/pull/27215)) |
| 303 | * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [#27067](https://github.com/facebook/react/pull/27067)) |
| 304 | * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [#27179](https://github.com/facebook/react/pull/27179)) |
| 305 | * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [#27147](https://github.com/facebook/react/pull/27147)) |
| 306 | * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [#27057](https://github.com/facebook/react/pull/27057)) |
| 307 | |
| 308 | #### Other |
| 309 | * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [#27304](https://github.com/facebook/react/pull/27304)) |
| 310 | |
| 311 | --- |
| 312 | |
| 313 | ### 4.28.0 |
| 314 | July 4, 2023 |
| 315 | |
| 316 | #### Features |
| 317 | * feat[devtools]: support x_google_ignoreList source maps extension ([hoxyq](https://github.com/hoxyq) in [#26951](https://github.com/facebook/react/pull/26951)) |
| 318 | |
| 319 | #### Bugfixes |
| 320 | * fix: check if fiber is unmounted before trying to highlight ([hoxyq](https://github.com/hoxyq) in [#26983](https://github.com/facebook/react/pull/26983)) |
| 321 | * fix: display NaN as string in values ([hoxyq](https://github.com/hoxyq) in [#26947](https://github.com/facebook/react/pull/26947)) |
| 322 | * fix: devtools cannot be closed correctly ([Jack-Works](https://github.com/Jack-Works) in [#25510](https://github.com/facebook/react/pull/25510)) |
| 323 | * fix: supported inspect mode on Shadow dom ([Biki-das](https://github.com/Biki-das) in [#26888](https://github.com/facebook/react/pull/26888)) |
| 324 | * fix: updated strict mode badge URL ([ibrahemid](https://github.com/ibrahemid) in [#26825](https://github.com/facebook/react/pull/26825)) |
| 325 | |
| 326 | #### Other |
| 327 | * chore: upgrade to webpack v5 ([hoxyq](https://github.com/hoxyq) in [#26887](https://github.com/facebook/react/pull/26887)) |
| 328 | * chore: removed unused CSS ([Biki-das](https://github.com/Biki-das) in [#27032](https://github.com/facebook/react/pull/27032)) |
| 329 | |
| 330 | --- |
| 331 | |
| 332 | ### 4.27.8 |
| 333 | May 17, 2023 |
| 334 | |
| 335 | #### Bugfixes |
| 336 | * Fixed duplicated backend activation with multiple renderers ([hoxyq](https://github.com/hoxyq) in [#26807](https://github.com/facebook/react/pull/26807)) |
| 337 | |
| 338 | --- |
| 339 | |
| 340 | ### 4.27.7 |
| 341 | May 4, 2023 |
| 342 | |
| 343 | #### Bugfixes |
| 344 | * Fixed to work when browser devtools panel is reopened ([hoxyq](https://github.com/hoxyq) in [#26779](https://github.com/facebook/react/pull/26779)) |
| 345 | * Fixed to work in Chrome incognito mode ([hoxyq](https://github.com/hoxyq) in [#26765](https://github.com/facebook/react/pull/26765)) |
| 346 | |
| 347 | --- |
| 348 | |
| 349 | ### 4.27.6 |
| 350 | April 20, 2023 |
| 351 | |
| 352 | #### Bugfixes |
| 353 | * Fixed backend injection logic for undocked devtools window ([mondaychen](https://github.com/mondaychen) in [#26665](https://github.com/facebook/react/pull/26665)) |
| 354 | |
| 355 | #### Other |
| 356 | * Use backend manager to support multiple backends in extension ([mondaychen](https://github.com/mondaychen) in [#26615](https://github.com/facebook/react/pull/26615)) |
| 357 | |
| 358 | --- |
| 359 | |
| 360 | ### 4.27.5 |
| 361 | April 17, 2023 |
| 362 | |
| 363 | #### Bugfixes |
| 364 | * Fixed copying to clipboard from context menu on Chrome ([hoxyq](https://github.com/hoxyq) in [#26604](https://github.com/facebook/react/pull/26604)) |
| 365 | * Fixed external link behavior in the standalone app ([Willie-Boy](https://github.com/Willie-Boy) in [#26559](https://github.com/facebook/react/pull/26559)) |
| 366 | |
| 367 | #### Other |
| 368 | * Provide icon to edge devtools. ([harrygz889](https://github.com/harrygz889) in [#26543](https://github.com/facebook/react/pull/26543)) |
| 369 | * Forbid editing class instances in props ([hoxyq](https://github.com/hoxyq) in [#26522](https://github.com/facebook/react/pull/26522)) |
| 370 | * Improved script injection logic in browser extension ([mondaychen](https://github.com/mondaychen) in [#26492](https://github.com/facebook/react/pull/26492)) |
| 371 | --- |
| 372 | |
| 373 | ### 4.27.4 |
| 374 | March 24, 2023 |
| 375 | |
| 376 | #### Bugfixes |
| 377 | * missing file name in react-devtools package.json for electron ([mondaychen](https://github.com/mondaychen) in [#26469](https://github.com/facebook/react/pull/26469)) |
| 378 | |
| 379 | --- |
| 380 | |
| 381 | ### 4.27.3 |
| 382 | March 22, 2023 |
| 383 | |
| 384 | #### Bugfixes |
| 385 | * prevent StyleX plugin from throwing when inspecting CSS ([mondaychen](https://github.com/mondaychen) in [#26364](https://github.com/facebook/react/pull/26364)) |
| 386 | * remove script tag immediately ([mondaychen](https://github.com/mondaychen) in [#26233](https://github.com/facebook/react/pull/26233)) |
| 387 | |
| 388 | #### Others |
| 389 | * upgrade electron to latest version & security improvements ([mondaychen](https://github.com/mondaychen) in [#26337](https://github.com/facebook/react/pull/26337)) |
| 390 | * improve troubleshooting in README ([mondaychen](https://github.com/mondaychen) in [#26235](https://github.com/facebook/react/pull/26235)) |
| 391 | * Remove renderer.js from extension build ([mondaychen](https://github.com/mondaychen) in [#26234](https://github.com/facebook/react/pull/26234)) |
| 392 | * permanently polyfill for rAF in devtools_page ([mondaychen](https://github.com/mondaychen) in [#26193](https://github.com/facebook/react/pull/26193)) |
| 393 | |
| 394 | --- |
| 395 | |
| 396 | ### 4.27.2 |
| 397 | February 16, 2023 |
| 398 | |
| 399 | * Replace DevTools `semver` usages with `compare-versions` for smaller bundle size ([markerikson](https://github.com/markerikson) in [#26122](https://github.com/facebook/react/pull/26122)) |
| 400 | * Support highlights for React Native apps in dev tools ([ryancat](https://github.com/ryancat) in [#26060](https://github.com/facebook/react/pull/26060)) |
| 401 | * improve error handling in extension ([mondaychen](https://github.com/mondaychen) in [#26068](https://github.com/facebook/react/pull/26068)) |
| 402 | |
| 403 | --- |
| 404 | |
| 405 | ### 4.27.1 |
| 406 | December 6, 2022 |
| 407 | |
| 408 | * [bug fix] revert values in ReactFiberFlags to keep consistency for devtools ([mondaychen](https://github.com/mondaychen) in [#25832](https://github.com/facebook/react/pull/25832)) |
| 409 | |
| 410 | --- |
| 411 | |
| 412 | ### 4.27.0 |
| 413 | November 28, 2022 |
| 414 | |
| 415 | #### Features |
| 416 | * add support for new host type fibers for server components use cases ([mondaychen](https://github.com/mondaychen) in [#25616](https://github.com/facebook/react/pull/25616)) |
| 417 | * [react devtools] Device storage support ([rbalicki2](https://github.com/rbalicki2) in [#25452](https://github.com/facebook/react/pull/25452)) |
| 418 | * upgrade to Manifest V3 ([mondaychen](https://github.com/mondaychen) in [#25145](https://github.com/facebook/react/pull/25145)) |
| 419 | |
| 420 | #### Bugfixes |
| 421 | * bug fix for Hydrating fibers ([mondaychen](https://github.com/mondaychen) in [#25663](https://github.com/facebook/react/pull/25663)) |
| 422 | |
| 423 | |
| 424 | |
| 425 | --- |
| 426 | |
| 427 | ### 4.26.1 |
| 428 | October 13, 2022 |
| 429 | |
| 430 | * [standalone] Stop highlighting events when a component is selected ([tyao1](https://github.com/tyao1) in [#25448](https://github.com/facebook/react/pull/25448)) |
| 431 | |
| 432 | --- |
| 433 | |
| 434 | ### 4.26.0 |
| 435 | September 16, 2022 |
| 436 | |
| 437 | * Show DevTools icons in Edge browser panel ([itskolli](https://github.com/itskolli) in [#25257](https://github.com/facebook/react/pull/25257)) |
| 438 | * [Bugfix] Don't hide fragment if it has a key ([lunaruan](https://github.com/lunaruan) in [#25197](https://github.com/facebook/react/pull/25197)) |
| 439 | * Handle info, group, and groupCollapsed in Strict Mode logging ([timneutkens](https://github.com/timneutkens) in [#25172](https://github.com/facebook/react/pull/25172)) |
| 440 | * Highlight RN elements on hover ([tyao1](https://github.com/tyao1) in [#25106](https://github.com/facebook/react/pull/25106)) |
| 441 | * Remove ForwardRef/Memo from display name if `displayName` is set ([eps1lon](https://github.com/eps1lon) in [#21952](https://github.com/facebook/react/pull/21952)) |
| 442 | |
| 443 | --- |
| 444 | |
| 445 | ### 4.25.0 |
| 446 | July 13, 2022 |
| 447 | |
| 448 | * Timeline Profiler Sidebar with component tree ([lunaruan](https://github.com/lunaruan) and [blakef](https://github.com/blakef) in [#24816](https://github.com/facebook/react/pull/24816), [#24815](https://github.com/facebook/react/pull/24815), [#24814](https://github.com/facebook/react/pull/24814), [#24805](https://github.com/facebook/react/pull/24805), [#24776](https://github.com/facebook/react/pull/24776)) |
| 449 | * [DevTools][Bugfix] Fix DevTools Perf Issue When Unmounting Large React Subtrees ([lunaruan](https://github.com/lunaruan) in [#24863](https://github.com/facebook/react/pull/24863)) |
| 450 | * Enable "reload & profile" button for timeline view ([mondaychen](https://github.com/mondaychen) in [#24702](https://github.com/facebook/react/pull/24702)) |
| 451 | * Find best renderer when inspecting app with mutilple react roots ([mondaychen](https://github.com/mondaychen) in [#24665](https://github.com/facebook/react/pull/24665)) |
| 452 | * Only polyfill requestAnimationFrame when necessary ([mondaychen](https://github.com/mondaychen) in [#24651](https://github.com/facebook/react/pull/24651)) |
| 453 | |
| 454 | --- |
| 455 | |
| 456 | ### 4.24.7 |
| 457 | May 31, 2022 |
| 458 | |
| 459 | * mock requestAnimationFrame with setTimeout as a temporary fix for #24626 ([mondaychen](https://github.com/mondaychen) in [#24633](https://github.com/facebook/react/pull/24633)) |
| 460 | * Fix formatWithStyles not styling the results if the first argument is an object + Added unit tests ([lunaruan](https://github.com/lunaruan) in [#24554](https://github.com/facebook/react/pull/24554)) |
| 461 | |
| 462 | --- |
| 463 | |
| 464 | ### 4.24.6 |
| 465 | May 12, 2022 |
| 466 | |
| 467 | * fix a bug in console.log with non-string args ([mondaychen](https://github.com/mondaychen) in [#24546](https://github.com/facebook/react/pull/24546)) |
| 468 | * Add Pragma to Only Run Tests if Version Requirement Satisfied ([lunaruan](https://github.com/lunaruan) in [#24533](https://github.com/facebook/react/pull/24533)) |
| 469 | * [DevTools][Bug] Fix Race Condition When Unmounting Fibers ([lunaruan](https://github.com/lunaruan) in [#24510](https://github.com/facebook/react/pull/24510)) |
| 470 | * [React DevTools] Improve DevTools UI when Inspecting a user Component that Throws an Error ([mondaychen](https://github.com/mondaychen) in [#24248](https://github.com/facebook/react/pull/24248)) |
| 471 | |
| 472 | --- |
| 473 | |
| 474 | ### 4.24.5 |
| 475 | May 5, 2022 |
| 476 | |
| 477 | * Fixed potential undefined error in `TreeContext` reducer ([bvaughn](https://github.com/bvaughn) in [#24501](https://github.com/facebook/react/pull/24501)) |
| 478 | * Fix error where Profiler sometimes incorrectlyed reported that a `forwardRef` did not render ([lunaruan](https://github.com/lunaruan) in [#24494](https://github.com/facebook/react/pull/24494)) |
| 479 | * Fix regex for `formateWithStyles` function ([lunaruan](https://github.com/lunaruan) in [#24486](https://github.com/facebook/react/pull/24486)) |
| 480 | * Fixed wrong method call for LRU cache ([bvaughn](https://github.com/bvaughn) in [#24477](https://github.com/facebook/react/pull/24477)) |
| 481 | * Synchronize implementations of second render logging ([billyjanitsch](https://github.com/billyjanitsch) in [#24381](https://github.com/facebook/react/pull/24381)) |
| 482 | * Don't stringify objects for console log second render ([lunaruan](https://github.com/lunaruan) in [#24373](https://github.com/facebook/react/pull/24373)) |
| 483 | |
| 484 | --- |
| 485 | |
| 486 | ### 4.24.4 |
| 487 | April 8, 2022 |
| 488 | |
| 489 | * Allow react-devtools-inline `createStore()` method to override Store config params ([bvaughn](https://github.com/bvaughn) in [#24303](https://github.com/facebook/react/pull/24303)) |
| 490 | * [ReactDebugTools] wrap uncaught error from rendering user's component ([mondaychen](https://github.com/mondaychen) in [#24216](https://github.com/facebook/react/pull/24216)) |
| 491 | |
| 492 | --- |
| 493 | |
| 494 | ### 4.24.3 |
| 495 | March 29, 2022 |
| 496 | |
| 497 | #### Bugfix |
| 498 | * Profiler should only report stateful hooks that change between renders ([bvaughn](https://github.com/bvaughn) in [#24189](https://github.com/facebook/react/pull/24189)) |
| 499 | * Ignore duplicate welcome "message" events ([bvaughn](https://github.com/bvaughn) in [#24186](https://github.com/facebook/react/pull/24186)) |
| 500 | * Attach DevTools Tree keyboard events to the Tree container (not the document) ([bvaughn](https://github.com/bvaughn) in [#24164](https://github.com/facebook/react/pull/24164)) |
| 501 | |
| 502 | --- |
| 503 | |
| 504 | ### 4.24.2 |
| 505 | March 24, 2022 |
| 506 | |
| 507 | #### Bugfix |
| 508 | * Show upgrade/downgrade instructions inline for errors thrown by the Store due to incompatible protocol (mismatched backend and frontend versions) ([bvaughn](https://github.com/bvaughn) in [#24147](https://github.com/facebook/react/pull/24147)) |
| 509 | * Inspecting an element in a nested renderer no longer throws ([lunaruan](https://github.com/lunaruan) in [#24116](https://github.com/facebook/react/pull/24116)) |
| 510 | |
| 511 | --- |
| 512 | |
| 513 | ### 4.24.1 |
| 514 | March 15, 2022 |
| 515 | |
| 516 | #### Bugfix |
| 517 | * Disable unsupported Bridge protocol version dialog and add workaround for old protocol operations format ([bvaughn](https://github.com/bvaughn) in [#24093](https://github.com/facebook/react/pull/24093)) |
| 518 | |
| 519 | --- |
| 520 | |
| 521 | ### 4.24.0 |
| 522 | March 10, 2022 |
| 523 | |
| 524 | #### Feature |
| 525 | * Show DevTools backend and frontend versions in UI ([bvaughn](https://github.com/bvaughn) in [#23399](https://github.com/facebook/react/pull/23399)) |
| 526 | * Timeline profiler refactored to support reading basic profiling data directly from React ([bvaughn](https://github.com/bvaughn) in [#22529](https://github.com/facebook/react/issues/22529)) |
| 527 | |
| 528 | #### Bugfix |
| 529 | * Better handle undefined `Error` stacks in DevTools error boundary ([bvaughn](https://github.com/bvaughn) in [#24065](https://github.com/facebook/react/pull/24065)) |
| 530 | * Fixed edge case bug in Profiler commit filtering ([bvaughn](https://github.com/bvaughn) in [#24031](https://github.com/facebook/react/pull/24031)) |
| 531 | * Gracefully handle empty "xstyle" prop values ([lunaruan](https://github.com/lunaruan) in [#23279](https://github.com/facebook/react/pull/23279) and [bvaughn](https://github.com/bvaughn) in [#23190](https://github.com/facebook/react/pull/23190)) |
| 532 | * Add `<TracingMarker>` component boilerplate ([lunaruan](https://github.com/lunaruan) in [#23275](https://github.com/facebook/react/pull/23275)) |
| 533 | |
| 534 | #### Misc |
| 535 | * Remove object-assign polyfill ([sebmarkbage](https://github.com/sebmarkbage) in [#23351](https://github.com/facebook/react/pull/23351)) |
| 536 | |
| 537 | #### Breaking change |
| 538 | * Move createRoot/hydrateRoot to react-dom/client ([sebmarkbage](https://github.com/sebmarkbage) in [#23385](https://github.com/facebook/react/pull/23385)). |
| 539 | |
| 540 | Technically this is a breaking change for projects using `react-devtools-inline`, but since this package already depends on the _experimental_ release channel, we are going to include it in 4.24. |
| 541 | |
| 542 | --- |
| 543 | |
| 544 | ### 4.23.0 |
| 545 | January 24, 2022 |
| 546 | |
| 547 | #### Feature |
| 548 | * DevTools: Only show StrictMode badge on root elements ([bvaughn](https://github.com/bvaughn) in [#23012](https://github.com/facebook/react/pull/23012)) |
| 549 | |
| 550 | #### Bugfix |
| 551 | * Don't crawl unmounted subtrees when profiling starts ([bvaughn](https://github.com/bvaughn) in [#23162](https://github.com/facebook/react/pull/23162)) |
| 552 | * Filter deleted components from the updaters list to avoid runtime errors later ([lunaruan](https://github.com/lunaruan) in [#23156](https://github.com/facebook/react/pull/23156)) |
| 553 | |
| 554 | #### Misc |
| 555 | * 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)) |
| 556 | |
| 557 | --- |
| 558 | |
| 559 | ### 4.22.1 |
| 560 | December 14, 2021 |
| 561 | |
| 562 | * Fix invalid `require()` statements in `react-devtools-inline` ([bvaughn](https://github.com/bvaughn) in [#22961](https://github.com/facebook/react/pull/22961)) |
| 563 | * Fix invalid `files` array in `react-devtools` `package.json` ([bvaughn](https://github.com/bvaughn) in [#22960](https://github.com/facebook/react/pull/22960)) |
| 564 | |
| 565 | --- |
| 566 | |
| 567 | ### 4.22.0 |
| 568 | December 13, 2021 |
| 569 | |
| 570 | #### A note for React Native users |
| 571 | React DevTools has [two main pieces](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#overview): |
| 572 | * The *frontend* users interact with (the Components tree, the Profiler, etc.). |
| 573 | * The *backend* which runs in the same context as React itself. (In the web page with React DOM or shipped on the device with the React Native runtime.) |
| 574 | |
| 575 | This release updates the [**protocol** that DevTools uses](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#serializing-the-tree) to communicate between the "frontend" and "backend" components. |
| 576 | |
| 577 | Because React Native embeds a copy of the React DevTools "backend" ([`react-devtools-core/backend`](https://www.npmjs.com/package/react-devtools-core)), the "frontend" (UI) needs to match. This means you may be prompted to upgrade (or downgrade) your React DevTools based on which version of React Native your app uses. |
| 578 | |
| 579 | #### Features |
| 580 | * Support multiple DevTools instances per page ([@bvaughn](https://github.com/bvaughn) in [#22949](https://github.com/facebook/react/pull/22949)) |
| 581 | * Advocate for StrictMode usage within Components tree ([@bvaughn](https://github.com/bvaughn) in [#22886](https://github.com/facebook/react/pull/22886)) |
| 582 | * StyleX plug-in for resolving atomic styles to values for props.xstyle ([@bvaughn](https://github.com/bvaughn) in [#22808](https://github.com/facebook/react/pull/22808)) |
| 583 | * Timeline search ([@bvaughn](https://github.com/bvaughn) in [#22799](https://github.com/facebook/react/pull/22799)) |
| 584 | * Timeline: Improved snapshot view ([@bvaughn](https://github.com/bvaughn) in [#22706](https://github.com/facebook/react/pull/22706)) |
| 585 | * Display root type for root updates in "what caused this update?" ([@eps1lon](https://github.com/eps1lon) in [#22599](https://github.com/facebook/react/pull/22599)) |
| 586 | |
| 587 | #### Bugfix |
| 588 | * DevTools should inject itself for XHTML pages too (not just HTML) ([@bvaughn](https://github.com/bvaughn) in [#22932](https://github.com/facebook/react/pull/22932)) |
| 589 | * Don't restore profiling data if we're profling ([@eps1lon](https://github.com/eps1lon) in [#22753](https://github.com/facebook/react/pull/22753)) |
| 590 | * DevTools should properly report re-renders due to (use)context changes ([@bvaughn](https://github.com/bvaughn) in [#22746](https://github.com/facebook/react/pull/22746)) |
| 591 | * Filter empty commits (all Fibers bailed out) from Profiler ([@bvaughn](https://github.com/bvaughn) in [#22745](https://github.com/facebook/react/pull/22745)) |
| 592 | * Accept json file in import fileinput ([@jyash97](https://github.com/jyash97) in [#22717](https://github.com/facebook/react/pull/22717)) |
| 593 | * Expose css vars to reach-ui portal components ([@jyash97](https://github.com/jyash97) in [#22716](https://github.com/facebook/react/pull/22716)) |
| 594 | * Fix DevTools advanced tooltip display conditional check ([@bvaughn](https://github.com/bvaughn) in [#22669](https://github.com/facebook/react/pull/22669)) |
| 595 | |
| 596 | #### Misc |
| 597 | * Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848)) |
| 598 | |
| 599 | --- |
| 600 | |
| 601 | ### 4.21.0 |
| 602 | October 31, 2021 |
| 603 | |
| 604 | #### Features |
| 605 | * Scheduling Profiler: Add marks for component effects (mount and unmount) ([@bvaughn](https://github.com/bvaughn) in [#22578](https://github.com/facebook/react/pull/22578)) |
| 606 | * Scheduling Profiler: De-emphasize React internal frames ([bvaughn](https://github.com/bvaughn) in [#22588](https://github.com/facebook/react/pull/22588)) |
| 607 | |
| 608 | |
| 609 | #### Bugfix |
| 610 | * Revert logic for checking for duplicate installations of DevTools potentially causing issues loading Components tab ([@jstejada](https://github.com/jstejada) in [#22638](https://github.com/facebook/react/pull/22638)) |
| 611 | * Scheduling Profiler does not warn about long transitions ([@bvaughn](https://github.com/bvaughn) in [#22614](https://github.com/facebook/react/pull/22614)) |
| 612 | * Re-enable 'Reload and Start Profiling' for Microsoft Edge ([@eoandersson](https://github.com/eoandersson) in [#22631](https://github.com/facebook/react/pull/22631)) |
| 613 | |
| 614 | |
| 615 | #### Misc |
| 616 | * DevTools supports ENV-injected version for better internal bug reports ([@bvaughn](https://github.com/bvaughn) in [#22635](https://github.com/facebook/react/pull/22635)) |
| 617 | * Fix typos ([@KonstHardy](https://github.com/KonstHardy) in [#22494](https://github.com/facebook/react/pull/22494)) |
| 618 | |
| 619 | --- |
| 620 | |
| 621 | ### 4.20.2 |
| 622 | October 20, 2021 |
| 623 | |
| 624 | #### Bugfix |
| 625 | * Dev Tools: Relax constraint on passing extensionId for backend init ([@jstejada](https://github.com/jstejada) in [#22597](https://github.com/facebook/react/pull/22597)) |
| 626 | * DevTools: Fix passing extensionId in evaled postMessage calls ([@jstejada](https://github.com/jstejada) in [#22590](https://github.com/facebook/react/pull/22590)) |
| 627 | |
| 628 | --- |
| 629 | |
| 630 | ### 4.20.1 |
| 631 | October 19, 2021 |
| 632 | |
| 633 | #### Bugfix |
| 634 | * Only show DevTools warning about unrecognized build in Chrome ([@jstejada](https://github.com/jstejada) in [#22571](https://github.com/facebook/react/pull/22571)) |
| 635 | * DevTools: Include Edge in browser name detection ([@jstejada](https://github.com/jstejada) in [#22584](https://github.com/facebook/react/pull/22584)) |
| 636 | |
| 637 | --- |
| 638 | |
| 639 | ### 4.20.0 |
| 640 | October 15, 2021 |
| 641 | |
| 642 | #### Features |
| 643 | * 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)) |
| 644 | |
| 645 | #### Bugfix |
| 646 | * Surface backend errors during inspection in the frontend UI ([@bvaughn](https://github.com/bvaughn) in [#22546](https://github.com/facebook/react/pull/22546)) |
| 647 | * Prevent splash page in standalone app from becoming unresponsive after the disconnection of a client (#22558) ([@gabrieltrompiz](https://github.com/gabrieltrompiz) in [#22560](https://github.com/facebook/react/pull/22560)) |
| 648 | * Prevent errors/crashing when multiple installs of DevTools are present ([@jstejada](https://github.com/jstejada) in [#22517](https://github.com/facebook/react/pull/22517)) |
| 649 | * Update Fiber logic in backend renderer to match implementation in React ([@jstejada](https://github.com/jstejada) in [#22527](https://github.com/facebook/react/pull/22527)) |
| 650 | |
| 651 | #### Misc |
| 652 | * 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)) |
| 653 | * Improved filenames of built worker files ([@akgupta0777](https://github.com/akgupta0777) in [#22559](https://github.com/facebook/react/pull/22559)) |
| 654 | |
| 655 | --- |
| 656 | |
| 657 | ### 4.19.2 |
| 658 | October 8, 2021 |
| 659 | |
| 660 | #### Bugfix |
| 661 | * Show different error boundary UI for timeouts than normal errors ([bvaughn](https://github.com/bvaughn) in [#22483](https://github.com/facebook/react/pull/22483)) |
| 662 | * 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)) |
| 663 | |
| 664 | --- |
| 665 | |
| 666 | ### 4.19.1 |
| 667 | October 1, 2021 |
| 668 | |
| 669 | #### Bugfix |
| 670 | * Fixed potential cache miss when inspecting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472)) |
| 671 | |
| 672 | --- |
| 673 | |
| 674 | ### 4.19.0 |
| 675 | September 29, 2021 |
| 676 | |
| 677 | #### Features |
| 678 | * Scheduling Profiler: Show Suspense resource .displayName ([bvaughn](https://github.com/bvaughn) in [#22451](https://github.com/facebook/react/pull/22451)) |
| 679 | * Scheduling Profiler marks should include thrown Errors ([bvaughn](https://github.com/bvaughn) in [#22419](https://github.com/facebook/react/pull/22419)) |
| 680 | * Don't patch console during first render in strict mode ([lunaruan](https://github.com/lunaruan) in [#22308](https://github.com/facebook/react/pull/22308)) |
| 681 | * Show which hook indices changed when profiling for all builds ([bvaughn](https://github.com/bvaughn) in [#22365](https://github.com/facebook/react/pull/22365)) |
| 682 | * Display actual ReactDOM API name in root type ([eps1lon](https://github.com/eps1lon) in [#22363](https://github.com/facebook/react/pull/22363)) |
| 683 | * Add named hooks support to standalone and inline DevTools ([jstejada](https://github.com/jstejada) in [#22320](https://github.com/facebook/react/pull/22320) and [bvaughn](https://github.com/bvaughn) in [#22263](https://github.com/facebook/react/pull/22263)) |
| 684 | #### Bugfix |
| 685 | * DevTools encoding supports multibyte characters (e.g. "🟩") ([bvaughn](https://github.com/bvaughn) in [#22424](https://github.com/facebook/react/pull/22424)) |
| 686 | * Improve DEV errors if string coercion throws (Temporal.*, Symbol, etc.) ([justingrant](https://github.com/justingrant) in [#22064](https://github.com/facebook/react/pull/22064)) |
| 687 | * Fix memory leak caused by not storing alternate Fiber pointer ([bvaughn](https://github.com/bvaughn) in [#22346](https://github.com/facebook/react/pull/22346)) |
| 688 | * Fix call stack exceeded error in `utfDecodeString()` ([bvaughn](https://github.com/bvaughn) in [#22330](https://github.com/facebook/react/pull/22330)) |
| 689 | * Fix runtime error when inspecting an element times out ([jstejada](https://github.com/jstejada) in [#22329](https://github.com/facebook/react/pull/22329)) |
| 690 | |
| 691 | #### Performance |
| 692 | * DevTools: Lazily parse indexed map sections ([bvaughn](https://github.com/bvaughn) in [#22415](https://github.com/facebook/react/pull/22415)) |
| 693 | * DevTools: Hook names optimizations ([bvaughn](https://github.com/bvaughn) in [#22403](https://github.com/facebook/react/pull/22403)) |
| 694 | * Replaced `network.onRequestFinished()` caching with `network.getHAR()` ([bvaughn](https://github.com/bvaughn) in [#22285](https://github.com/facebook/react/pull/22285)) |
| 695 | |
| 696 | --- |
| 697 | |
| 698 | ### 4.18.0 |
| 699 | September 1, 2021 |
| 700 | |
| 701 | #### Features |
| 702 | * DevTools: Improve named hooks network caching ([bvaughn](https://github.com/bvaughn) in [#22198](https://github.com/facebook/react/pull/22198)) |
| 703 | * Console Logging for StrictMode Double Rendering ([lunaruan](https://github.com/lunaruan) in [#22030](https://github.com/facebook/react/pull/22030)) |
| 704 | |
| 705 | --- |
| 706 | |
| 707 | ### Bugfix |
| 708 | * Fix react-devtools-inline size issues ([lunaruan](https://github.com/lunaruan) in [#22232](https://github.com/facebook/react/pull/22232)) |
| 709 | * devtools: Don't display hook index of useContext ([eps1lon](https://github.com/eps1lon) in [#22200](https://github.com/facebook/react/pull/22200)) |
| 710 | * Throw error in console without interfering with logs ([lunaruan](https://github.com/lunaruan) in [#22175](https://github.com/facebook/react/pull/22175)) |
| 711 | |
| 712 | |
| 713 | --- |
| 714 | |
| 715 | ### 4.17.0 |
| 716 | August 24, 2021 |
| 717 | |
| 718 | #### Features |
| 719 | * Scheduling Profiler: Add network measures ([bvaughn](https://github.com/bvaughn) in [#22112](https://github.com/facebook/react/pull/22112)) |
| 720 | * Add options for disabling some features ([hbenl](https://github.com/hbenl) in [#22136](https://github.com/facebook/react/pull/22136)) |
| 721 | |
| 722 | #### Bugfix |
| 723 | * Fixed broken scroll-to error or warning feature ([bvaughn](https://github.com/bvaughn) and [eps1lon](https://github.com/eps1lon) in [#22147](https://github.com/facebook/react/pull/22147) and [#22144](https://github.com/facebook/react/pull/22144)) |
| 724 | * Replaced WeakMap with LRU for inspected element cache ([bvaughn](https://github.com/bvaughn) in [#22160](https://github.com/facebook/react/pull/22160)) |
| 725 | * Add more detailed error handling if profiling data does not have any React marks ([byronluk](https://github.com/byronluk) in [#22157](https://github.com/facebook/react/pull/22157)) |
| 726 | * Various named hooks bug fixes ([jstejada](https://github.com/jstejada) in [#22129](https://github.com/facebook/react/pull/22129), [#22128](https://github.com/facebook/react/pull/22128), [#22096](https://github.com/facebook/react/pull/22096), and [#22148](https://github.com/facebook/react/pull/22148)) |
| 727 | * Fix tooltip wheel event regression ([bvaughn](https://github.com/bvaughn) in [#22130](https://github.com/facebook/react/pull/22130)) |
| 728 | * 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)) |
| 729 | |
| 730 | --- |
| 731 | |
| 732 | ### 4.16.0 |
| 733 | August 16, 2021 |
| 734 | #### Features |
| 735 | * 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)) |
| 736 | #### Bugfix |
| 737 | * split parsing code to unblock Firefox release ([lunaruan](https://github.com/lunaruan) in [#22102](https://github.com/facebook/react/pull/22102)) |
| 738 | * Scheduling profiler: Canvas views clip by default ([bvaughn](https://github.com/bvaughn) in [#22100](https://github.com/facebook/react/pull/22100)) |
| 739 | * Fixed Components tree indentation bug for Chrome extension ([bvaughn](https://github.com/bvaughn) in [#22083](https://github.com/facebook/react/pull/22083)) |
| 740 | |
| 741 | --- |
| 742 | |
| 743 | ### 4.15.0 |
| 744 | August 11, 2021 |
| 745 | |
| 746 | #### Features |
| 747 | * 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)). |
| 748 | * Parsing source code for extracting names for hooks now happens in a worker ([tsirlucas](https://github.com/tsirlucas) in [#21902](https://github.com/facebook/react/pull/21902)). |
| 749 | * Format hyperlink text as a clickable link ([kkragoth](https://github.com/kkragoth) in [#21964](https://github.com/facebook/react/pull/21964)). |
| 750 | * Named hooks can now be extracted from extended source maps ([jstejada](https://github.com/jstejada) [#22010](https://github.com/facebook/react/pull/22010), [#22073](https://github.com/facebook/react/pull/22073)). |
| 751 | * Hook indices now show up as a reason why a component rendered in the profiler ([mrkev](https://github.com/mrkev) in [#22073](https://github.com/facebook/react/pull/22073)). |
| 752 | * Optimize images in DevTools ([ilhamsyahids](https://github.com/ilhamsyahids) in [#21968](https://github.com/facebook/react/pull/21968)). |
| 753 | |
| 754 | #### Bugfix |
| 755 | * Named hooks cache is correctly cleared after Fast Refresh ([bvaughn](https://github.com/bvaughn) in [#21891](https://github.com/facebook/react/pull/21891)). |
| 756 | * Hook names are correctly extracted when parsing nested hook calls ([jstejada](https://github.com/jstejada) in [#22037](https://github.com/facebook/react/pull/22037), [#21996](https://github.com/facebook/react/pull/21996)). |
| 757 | * Highlight updates with memoized components ([Selnapenek](https://github.com/Selnapenek) in [#22008](https://github.com/facebook/react/pull/22008)). |
| 758 | * Set app icon on MacOS ([christian-schulze](https://github.com/christian-schulze) in [#21908](https://github.com/facebook/react/pull/21908)). |
| 759 | * Updated @reach packages to fix unmount bug ([bvaughn](https://github.com/bvaughn) in [#22075](https://github.com/facebook/react/pull/22075)). |
| 760 | |
| 761 | #### Misc |
| 762 | * Refactor imperative theme code ([houssemchebeb](https://github.com/houssemchebeb) in [#21950](https://github.com/facebook/react/pull/21950)). |
| 763 | * Change some remaining instances of master -> main ([shubham9411](https://github.com/shubham9411) in [#21982](https://github.com/facebook/react/pull/21982)). |
| 764 | |
| 765 | ##### Scheduling profiler |
| 766 | |
| 767 | ###### What is React working on? |
| 768 | |
| 769 | React’s previous Profiler primarily reports how fast (or slow) components are when rendering. It didn’t provide an overview of *what React is doing* (the actual cooperative scheduling bits). The new profiler does. It shows when components schedule state updates and when React works on them. It also shows how React categorizes and prioritizing what it works on. |
| 770 | |
| 771 | Here’s a profile for a simple app that uses only the legacy (synchronous) `ReactDOM.render` API. The profiler shows that all of the work scheduled and rendered by this app is done at *synchronous* priority: |
| 772 | |
| 773 | https://user-images.githubusercontent.com/29597/129042321-56985f5a-264e-4f3a-a8b7-9371d75c690f.mp4 |
| 774 | |
| 775 | Here’s a more interesting profile for an app that’s rendered at _default_ priority using the new [`createRoot` API](https://github.com/reactwg/react-18/discussions/5), then updates _synchronously_ in response to an “input” event to manage a ["controlled component"](https://reactjs.org/docs/forms.html#controlled-components): |
| 776 | |
| 777 | https://user-images.githubusercontent.com/29597/129074959-50912a63-0215-4be5-b51b-1e0004fcd2a1.mp4 |
| 778 | |
| 779 | Here’s part of a profile showing an idle app (no JavaScript running). In this case, React does some pre-rendering work for components that are “offscreen” (not currently displayed). |
| 780 | |
| 781 | https://user-images.githubusercontent.com/29597/128971757-612f232f-c64f-4447-a766-66a0516e8f49.mp4 |
| 782 | |
| 783 | Note that “offscreen” refers to a new API and set of features that we haven’t talked about much yet except for [some passing references](https://github.com/reactwg/react-18/discussions/18#discussioncomment-795661). We’ll talk more about it in future posts. |
| 784 | |
| 785 | ###### What are “transitions” and how do they work? |
| 786 | We recently shared an update about the new [`startTransition` API](https://github.com/reactwg/react-18/discussions/41). This API helps apps feel responsive even when there are large updates by splitting the work into (1) a quick update to show that the app has received some input and (2) a slower update (the “transition”) that actually does any heavy lifting needed as a result of the input. |
| 787 | |
| 788 | Here is an example profile that uses the transition API. First React renders a small update that shows the user some visual feedback (like updating a controlled component or showing an inline loading indicator). Then it renders a larger update that, in this case, computes some expensive value. |
| 789 | |
| 790 | https://user-images.githubusercontent.com/29597/129079176-0995c8c0-e95a-4f44-8d55-891a7efa35c0.mp4 |
| 791 | |
| 792 | ###### How does Suspense impact rendering performance? |
| 793 | |
| 794 | You may have heard mention of “suspense” in past talks or seen it referenced [in our docs](https://reactjs.org/docs/react-api.html#suspense). Although full support for data fetching via Suspense is [expected to be released sometime after React 18.0](https://github.com/reactwg/react-18/discussions/47#discussioncomment-847004), you can use Suspense today for things like lazy-loading React components. The new profiler shows when components suspend during render and how that impacts overall rendering performance. |
| 795 | |
| 796 | Here’s an example profile that suspends during the initial render to lazy-load a component using [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy). While this component is loading, React shows a “fallback“ (placeholder UI). Once the component finishes loading, React retries the render and commits the final UI. |
| 797 | |
| 798 | https://user-images.githubusercontent.com/29597/129054366-2700e7e8-0172-4f61-9453-475acd740456.mp4 |
| 799 | |
| 800 | We plan to expand support for Suspense in the coming weeks to more explicitly show when suspense fallbacks are rendered and which subsequent renders are related to an initial update that suspended. |
| 801 | |
| 802 | ###### What else might cause a render to get delayed? |
| 803 | |
| 804 | Suspense can cause a render to get delayed as React waits for data to load, but React can also get stuck waiting on a lot of JavaScript to run. |
| 805 | |
| 806 | React profiling tools have previously focused on only reporting what React (or React components) are doing, but any JavaScript the browser runs affects performance. The new profiler shows non-React JavaScript as well, making it easy to see when it delays React from rendering. |
| 807 | |
| 808 | https://user-images.githubusercontent.com/29597/128971952-7c4e7e11-f4fb-497e-b643-4d9b3994b590.mp4 |
| 809 | |
| 810 | ###### What can you do to improve performance? |
| 811 | |
| 812 | Until now, DevTools (and the Profiler) has provided information without commentary. The new profiler takes a more active approach– highlighting where we think performance can be improved and providing suggestions. |
| 813 | |
| 814 | For example, suspending during an update is generally a bad user experience because it causes previously shown components to be unmounted (hidden) so the fallback can be shown while data loads. This can be avoided using the new [Transition API](https://github.com/reactwg/react-18/discussions/41). If you forget to add a transition to an update that suspends, the new profiler will warn you about this: |
| 815 | |
| 816 | https://user-images.githubusercontent.com/29597/128972228-3b23f01a-8017-43ad-b371-975ffed26c06.mp4 |
| 817 | |
| 818 | The new profiler also warns about scheduling a long, synchronous React update inside of event handler. |
| 819 | |
| 820 | https://user-images.githubusercontent.com/29597/128972000-d7477ba3-b779-46f2-b141-aaa712e9d6d2.mp4 |
| 821 | |
| 822 | Another thing the new profiler will warn about is long-running renders scheduled from layout effects (`useLayoutEffect` or `componentDidMount`/`componentDidUpdate`). These updates (called “nested updates”) are sometimes necessary to adjust layout before the browser paints, but they should be *fast*. Slow nested updates make the browser feel unresponsive. |
| 823 | |
| 824 | https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4 |
| 825 | |
| 826 | --- |
| 827 | |
| 828 | ### 4.14.0 |
| 829 | July 17, 2021 |
| 830 | #### Features |
| 831 | * 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)) |
| 832 | * Control for manually toggling error boundaries ([baopham](https://github.com/baopham) in [#21583](https://github.com/facebook/react/pull/21583)) |
| 833 | * Allow user to manually enter Profiler commit number to jump between commits ([srubin](https://github.com/srubin) in [#19957](https://github.com/facebook/react/pull/19957)) |
| 834 | |
| 835 | ##### Display hook names for inspected components |
| 836 |  |
| 837 | |
| 838 | ##### Control for manually toggling error boundaries |
| 839 |  |
| 840 | |
| 841 | --- |
| 842 | |
| 843 | ### 4.13.5 |
| 844 | May 25, 2021 |
| 845 | #### Bugfix |
| 846 | * 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)) |
| 847 | |
| 848 | --- |
| 849 | |
| 850 | ### 4.13.4 |
| 851 | May 20, 2021 |
| 852 | #### Bugfix |
| 853 | * 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)) |
| 854 | * 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)) |
| 855 | |
| 856 | --- |
| 857 | |
| 858 | ### 4.13.3 |
| 859 | May 19, 2021 |
| 860 | #### Misc |
| 861 | * 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)) |
| 862 | |
| 863 | #### Bugfix |
| 864 | * Reload all roots after Fast Refresh force-remount (to avoid corrupted Store state) ([bvaughn](https://github.com/bvaughn) in [#21516](https://github.com/facebook/react/pull/21516) and [#21523](https://github.com/facebook/react/pull/21523)) |
| 865 | * Errors thrown by Store can be dismissed so DevTools remain usable in many cases ([bvaughn](https://github.com/bvaughn) in [#21520](https://github.com/facebook/react/pull/21520)) |
| 866 | * Bugfix for `useState()` object with `hasOwnProperty` key ([bvaughn](https://github.com/bvaughn) in [#21524](https://github.com/facebook/react/pull/21524)) |
| 867 | * Fixed string concatenation problem when a `Symbol` was logged to `console.error` or `console.warn` ([bvaughn](https://github.com/bvaughn) in [#21521](https://github.com/facebook/react/pull/21521)) |
| 868 | * DevTools: Fixed version range NPM syntax |
| 869 | ([bvaughn](https://github.com/bvaughn) in [9cf1069](https://github.com/facebook/react/commit/9cf1069ffc5f3835506e314ef8c2e80bbfa8bdca#diff)) |
| 870 | * Tweaked DevTools error template title to match issue form template ([bvaughn](https://github.com/bvaughn) in [1a2d792](https://github.com/facebook/react/commit/1a2d7925035531e5767ff31ff8d0d581b5f94d49)) |
| 871 | |
| 872 | --- |
| 873 | |
| 874 | ### 4.13.2 |
| 875 | May 7, 2021 |
| 876 | #### Misc |
| 877 | * 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)) |
| 878 | |
| 879 | --- |
| 880 | |
| 881 | ### 4.13.1 |
| 882 | April 28, 2021 |
| 883 | #### Bugfix |
| 884 | * Improve display name logic for `React.memo` components ([bvaughn](https://github.com/bvaughn) in [#21392](https://github.com/facebook/react/pull/21392)) |
| 885 | * Fixed potential runtime error with Suspense in versions <= 17 ([bvaughn](https://github.com/bvaughn) in [#21432](https://github.com/facebook/react/pull/21432)) |
| 886 | * Errors thrown in the Store are no longer silent ([bvaughn](https://github.com/bvaughn) in [#21426](https://github.com/facebook/react/pull/21426)) |
| 887 | |
| 888 | #### Misc |
| 889 | * 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)) |
| 890 | |
| 891 | --- |
| 892 | |
| 893 | ### 4.13.0 |
| 894 | April 28, 2021 |
| 895 | #### Features |
| 896 | * Add Bridge protocol version backend/frontend ([bvaughn](https://github.com/bvaughn) in [#21331](https://github.com/facebook/react/pull/21331)) |
| 897 | |
| 898 | #### Bugfix |
| 899 | * DevTools iterates over siblings during mount (rather than recursing) to avoid stack overflow errors ([bvaughn](https://github.com/bvaughn) in [#21377](https://github.com/facebook/react/pull/21377)) |
| 900 | * Multiple error dialogs can be visible at once ([bvaughn](https://github.com/bvaughn) in [#21370](https://github.com/facebook/react/pull/21370)) |
| 901 | * Console patching should handle Symbols without erroring ([bvaughn](https://github.com/bvaughn) in [#21368](https://github.com/facebook/react/pull/21368)) |
| 902 | |
| 903 | ###### Bridge protocol version backend/frontend |
| 904 | During initialization, DevTools now checks to ensure it's compatible with the ["backend"](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#overview) that's embedded within a renderer like React Native. If the two aren't compatible, upgrade instructions will be shown: |
| 905 | |
| 906 | <img width="400" height="233" alt="Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version" src="https://user-images.githubusercontent.com/29597/115997927-f77f2a00-a5b2-11eb-9098-20042b664cea.png"> |
| 907 | |
| 908 | <img width="400" height="233" alt="Dialog displaying upgrade instructions for the React DevTools frontend to connect to a newer backend version" src="https://user-images.githubusercontent.com/29597/115997965-167dbc00-a5b3-11eb-9cbc-082c65077a6e.png"> |
| 909 | |
| 910 | Learn more about this change at [fb.me/devtools-unsupported-bridge-protocol](https://fb.me/devtools-unsupported-bridge-protocol) |
| 911 | |
| 912 | --- |
| 913 | |
| 914 | ### 4.12.4 |
| 915 | April 19, 2021 |
| 916 | #### Bugfix |
| 917 | * 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)) |
| 918 | |
| 919 | --- |
| 920 | |
| 921 | ### 4.12.3 |
| 922 | April 19, 2021 |
| 923 | #### Bugfix |
| 924 | * 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)) |
| 925 | |
| 926 | --- |
| 927 | |
| 928 | ### 4.12.2 |
| 929 | April 16, 2021 |
| 930 | #### Bugfix |
| 931 | * DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21301](https://github.com/facebook/react/pull/21301)) |
| 932 | |
| 933 | --- |
| 934 | |
| 935 | ### 4.12.1 |
| 936 | April 14, 2021 |
| 937 | Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes. |
| 938 | #### Bugfix |
| 939 | * Fixed `react-devtools-inline` bug in frontend `initialize` method ([bvaughn](https://github.com/bvaughn) in [#21265](https://github.com/facebook/react/pull/21265)) |
| 940 | |
| 941 | --- |
| 942 | |
| 943 | ### 4.12.0 |
| 944 | April 12, 2021 |
| 945 | Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes. |
| 946 | #### Features |
| 947 | * 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)) |
| 948 | |
| 949 | --- |
| 950 | |
| 951 | ### 4.11.1 |
| 952 | April 11, 2021 |
| 953 | #### Bugfix |
| 954 | * 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)) |
| 955 | |
| 956 | --- |
| 957 | |
| 958 | ### 4.11.0 |
| 959 | April 9, 2021 |
| 960 | #### Bugfix |
| 961 | * `$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)) |
| 962 | * Ensure `sync-xhr` is allowed before reload and profile ([ChrisDobby](https://github.com/ChrisDobby) in [#20879](https://github.com/facebook/react/pull/20879)) |
| 963 | * Bump electron version from 9.1.0 to 11.1.0 for darwin-arm64 builds ([jaiwanth-v](https://github.com/jaiwanth-v) in [#20496](https://github.com/facebook/react/pull/20496)) |
| 964 | * Fixed primitive hook badge colors for light theme ([bvaughn](https://github.com/bvaughn) in [#21034](https://github.com/facebook/react/pull/21034)) |
| 965 | * Increased minimum Chrome/Firefox versions from 51/54 to 60/55 to reduce polyfill code. ([bvaughn](https://github.com/bvaughn) in [#21185](https://github.com/facebook/react/pull/21185)) |
| 966 | * Fix can't expand prop value in some scenario ([iChenLei](https://github.com/iChenLei) in [#20534](https://github.com/facebook/react/pull/20534)) |
| 967 | * Flush updated passive warning/error info after delay ([bvaughn](https://github.com/bvaughn) in [#20931](https://github.com/facebook/react/pull/20931)) |
| 968 | * Patch console methods even when only show-inline-warnings/errors enabled ([bvaughn](https://github.com/bvaughn) in [#20688](https://github.com/facebook/react/pull/20688)) |
| 969 | * React Native fixes for new inline errors feature ([bvaughn](https://github.com/bvaughn) in [#20502](https://github.com/facebook/react/pull/20502)) |
| 970 | * Fixed invalid work tag constants that affected a certain range of React versions ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362)) |
| 971 | |
| 972 | #### Features |
| 973 | * Improve Profiler commit-selector UX ([bvaughn](https://github.com/bvaughn) in [#20943](https://github.com/facebook/react/pull/20943)) |
| 974 | * Swap `log` with `cbrt` for commit bar height ([bvaughn](https://github.com/bvaughn) in [#20952](https://github.com/facebook/react/pull/20952)) |
| 975 | * Integrate with new experimental React Suspense features to improve props loading and inspection UX ([bvaughn](https://github.com/bvaughn) in [#20548](https://github.com/facebook/react/pull/20548), [#20789](https://github.com/facebook/react/pull/20789), [#20458](https://github.com/facebook/react/pull/20458)) |
| 976 | * Expose DEV-mode warnings in devtools UI ([eps1lon](https://github.com/eps1lon) in [#20463](https://github.com/facebook/react/pull/20463)) |
| 977 | * Display shortcuts for prev/next search result ([eps1lon](https://github.com/eps1lon) in [#20470](https://github.com/facebook/react/pull/20470)) |
| 978 | * Increase the clickable area of the prop value ([TryingToImprove](https://github.com/TryingToImprove) in [#20428](https://github.com/facebook/react/pull/20428)) |
| 979 | |
| 980 | #### Experimental features |
| 981 | The following features are only enabled when used with (experimental) builds of React: |
| 982 | * Shows which fibers scheduled the current update ([bvaughn](https://github.com/bvaughn) in [#21171](https://github.com/facebook/react/pull/21171)) |
| 983 | * Add commit and post-commit durations to Profiler UI ([bvaughn](https://github.com/bvaughn) in [#20984](https://github.com/facebook/react/pull/20984), [#21183](https://github.com/facebook/react/pull/21183)) |
| 984 | * Show which hooks (indices) changed when profiling ([bvaughn](https://github.com/bvaughn) in [#20998](https://github.com/facebook/react/pull/20998)) |
| 985 | |
| 986 | ###### Improve Profiler commit-selector UX |
| 987 | |
| 988 |  |
| 989 | |
| 990 |  |
| 991 | |
| 992 | ###### Expose DEV-mode warnings in devtools UI |
| 993 |  |
| 994 | |
| 995 | ###### Shows which fibers scheduled the current update |
| 996 |  |
| 997 | |
| 998 | ###### Add commit and post-commit durations to Profiler UI |
| 999 |  |
| 1000 | |
| 1001 | ###### Show which hooks (indices) changed when profiling |
| 1002 |  |
| 1003 | |
| 1004 | --- |
| 1005 | |
| 1006 | ### 4.10.4 |
| 1007 | May 20, 2021 |
| 1008 | #### Bugfix |
| 1009 | * Ported passive effects sync flushing/bubbling bugfix ([bvaughn](https://github.com/bvaughn) in [#21540](https://github.com/facebook/react/pull/21540)) |
| 1010 | |
| 1011 | --- |
| 1012 | |
| 1013 | ### 4.10.3 |
| 1014 | April 27, 2021 |
| 1015 | #### Bugfix |
| 1016 | * 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)) |
| 1017 | |
| 1018 | --- |
| 1019 | |
| 1020 | ### 4.10.2 |
| 1021 | April 27, 2021 |
| 1022 | #### Features |
| 1023 | * 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)) |
| 1024 | |
| 1025 | --- |
| 1026 | |
| 1027 | ### 4.10.1 |
| 1028 | November 12, 2020 |
| 1029 | #### Bugfix |
| 1030 | * Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20362](https://github.com/facebook/react/pull/20362)) |
| 1031 | |
| 1032 | --- |
| 1033 | |
| 1034 | ### 4.10.0 |
| 1035 | November 12, 2020 |
| 1036 | #### Features |
| 1037 | * Make DevTools Websocket retry delay configurable ([bvaughn](https://github.com/bvaughn) in [#20107](https://github.com/facebook/react/pull/20107)) |
| 1038 | #### Bugfix |
| 1039 | * Fix error loading source maps for devtools extension ([sytranvn](https://github.com/sytranvn) in [#20079](https://github.com/facebook/react/pull/20079)) |
| 1040 | * Remove css-sourcemap for `react-devtools-inline` ([sean9keenan](https://github.com/sean9keenan) in [#20170](https://github.com/facebook/react/pull/20170)) |
| 1041 | * Decrease NPM update notification/prompt for standalone DevTools ([recurx](https://github.com/recurx) in [#20078](https://github.com/facebook/react/pull/20078)) |
| 1042 | |
| 1043 | --- |
| 1044 | |
| 1045 | ### 4.9.0 |
| 1046 | October 19, 2020 |
| 1047 | #### Features |
| 1048 | * [Improved DevTools editing interface](#improved-devtools-editing-interface) ([bvaughn](https://github.com/bvaughn) in [#19774](https://github.com/facebook/react/pull/19774)) |
| 1049 | * Add ⎇ + arrow key navigation ([bvaughn](https://github.com/bvaughn) in [#19741](https://github.com/facebook/react/pull/19741)) |
| 1050 | * Add checkbox toggle for boolean values ([mdaj06](https://github.com/mdaj06) in [#19714](https://github.com/facebook/react/pull/19714)) |
| 1051 | * Show symbols used as keys in state ([omarsy](https://github.com/omarsy) in [#19786](https://github.com/facebook/react/pull/19786)) |
| 1052 | * Add new (unstable) `SuspenseList` component type ([bpernick](https://github.com/bpernick) in [#19684](https://github.com/facebook/react/pull/19684)) |
| 1053 | |
| 1054 | #### Bugfix |
| 1055 | * Show proper icon/tooltip for restricted browser pages ([sktguha](https://github.com/sktguha) in [#20023](https://github.com/facebook/react/pull/20023)) |
| 1056 | * Fix emoji character shown in Chrome developer tools panel ([bvaughn](https://github.com/bvaughn) in [#19603](https://github.com/facebook/react/pull/19603)) |
| 1057 | * Don't open two tabs in Firefox when clicking on troubleshooting instructions ([unbyte](https://github.com/unbyte) in [#19632](https://github.com/facebook/react/pull/19632)) |
| 1058 | * Support inner component `_debugOwner` in memo ([bvaughn](https://github.com/bvaughn) in [#19556](https://github.com/facebook/react/pull/19556)) |
| 1059 | * Proxied methods should be safely dehydrated for display ([@pfongkye](https://github.com/pfongkye) in [b6e1d08](https://github.com/facebook/react/commit/b6e1d08) |
| 1060 | * Property list values should show whitespace ([sammarks](https://github.com/sammarks) in [#19640](https://github.com/facebook/react/pull/19640)) |
| 1061 | * Fix crash when inspecting document.all ([omarsy](https://github.com/omarsy) in [#19619](https://github.com/facebook/react/pull/19619)) |
| 1062 | * Don't call generators during inspection since they may be stateful ([todortotev](https://github.com/todortotev) in [#19831](https://github.com/facebook/react/pull/19831)) |
| 1063 | * Fix bad null check in DevTools highlight code ([bvaughn](https://github.com/bvaughn) in [#20010](https://github.com/facebook/react/pull/20010)) |
| 1064 | * Handled a missing suspense fiber when suspense is filtered on the profiler ([IDrissAitHafid](https://github.com/IDrissAitHafid) in [#ISSUE](https://github.com/facebook/react/pull/ISSUE)) |
| 1065 | * Fixed unfound node error when Suspense is filtered ([IDrissAitHafid](https://github.com/IDrissAitHafid) in [#20019](https://github.com/facebook/react/pull/20019)) |
| 1066 | * Always overrides the dispatcher when shallow rendering ([bvaughn](https://github.com/bvaughn) in [#20011](https://github.com/facebook/react/pull/20011)) |
| 1067 | * Frevent phishing attacks ([iamwilson](https://github.com/iamwilson) in [#19934](https://github.com/facebook/react/pull/19934)) |
| 1068 | |
| 1069 | --- |
| 1070 | |
| 1071 | ### Other |
| 1072 | * Enable source maps for DevTools production builds ([jpribyl ](https://github.com/jpribyl ) in [#19773](https://github.com/facebook/react/pull/19773)) |
| 1073 | * Drop support for IE 11 ([bvaughn](https://github.com/bvaughn) in [#19875](https://github.com/facebook/react/pull/19875)) |
| 1074 | * Remove ReactJS.org version check "cheat" ([sktguha](https://github.com/sktguha) in [#19939](https://github.com/facebook/react/pull/19939)) |
| 1075 | * Update outdated links and fix two broken links ([sktguha](https://github.com/sktguha) in [#19985](https://github.com/facebook/react/pull/19985)) |
| 1076 | * Remove support for deprecated/unreleased React Flare event system ([trueadm](https://github.com/trueadm) in [#19520](https://github.com/facebook/react/pull/19520)) |
| 1077 | |
| 1078 | ###### Improved DevTools editing interface |
| 1079 | |
| 1080 | **Improved parsing** |
| 1081 | Value parsing logic has been relaxed so as to no longer require quotes around strings or double quotes: |
| 1082 |  |
| 1083 | |
| 1084 | **Modifying arrays** |
| 1085 | New values can be added to array props/state/hooks now. Existing values can also be deleted: |
| 1086 |  |
| 1087 | |
| 1088 | **Modifying objects** |
| 1089 | New keys can be added to object props/state/hooks now. Existing keys can be renamed or deleted entirely: |
| 1090 |  |
| 1091 | |
| 1092 | --- |
| 1093 | |
| 1094 | ### 4.8.2 |
| 1095 | July 15, 2020 |
| 1096 | #### Bugfix |
| 1097 | * Fix broken `Suspense` heuristic ([bvaughn](https://github.com/bvaughn) in [#19373](https://github.com/facebook/react/pull/19373)) |
| 1098 | * Fixed error with standalone in HTTPS mode ([b-ponomarenko](https://github.com/b-ponomarenko) in [#19336](https://github.com/facebook/react/pull/19336)) |
| 1099 | * Disable DevTools minification ([bvaughn](https://github.com/bvaughn) in [#19369](https://github.com/facebook/react/pull/19369)) |
| 1100 | |
| 1101 | --- |
| 1102 | |
| 1103 | ### 4.8.1 |
| 1104 | July 10, 2020 |
| 1105 | #### Bugfix |
| 1106 | * Fix break-on-warning to truly be off by default. ([gaearon](https://github.com/gaearon) in [#19309](https://github.com/facebook/react/pull/19309)) |
| 1107 | |
| 1108 | --- |
| 1109 | |
| 1110 | ### 4.8.0 |
| 1111 | July 9, 2020 |
| 1112 | #### Features |
| 1113 | * Add SSL support to React devtools standalone ([ittaibaratz](https://github.com/ittaibaratz) in [#19191](https://github.com/facebook/react/pull/19191)) |
| 1114 | * New break-on-warning feature (off by default) ([bvaughn](https://github.com/bvaughn) in [#19048](https://github.com/facebook/react/pull/19048)) |
| 1115 | |
| 1116 | #### Bugfix |
| 1117 | * Updates Electron version for react-devtools to pull in several security fixes ([gsimone](https://github.com/gsimone) in [#19280](https://github.com/facebook/react/pull/19280)) |
| 1118 | * Remove unnecessary tag end from CommitRanked view ([finico](https://github.com/finico) in [#19195](https://github.com/facebook/react/pull/19195)) |
| 1119 | * Shutdown DevTools Bridge synchronously when unmounting ([bvaughn](https://github.com/bvaughn) in [#19180](https://github.com/facebook/react/pull/19180)) |
| 1120 | |
| 1121 | --- |
| 1122 | |
| 1123 | ### 4.7.0 |
| 1124 | May 18, 2020 |
| 1125 | |
| 1126 | #### Features |
| 1127 | * 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)) |
| 1128 | * Improve inline search results by highlighting match on HOC badge ([bl00mber](https://github.com/bl00mber) in [#18802](https://github.com/facebook/react/pull/18802)) |
| 1129 | * Add key badge to inspected element in right hand pane ([karlhorky]](https://github.com/karlhorky) in [#18737](https://github.com/facebook/react/pull/18737)) |
| 1130 | * Improve Profiler snapshot selector drag-and-drop UX ([bl00mber](https://github.com/bl00mber) in [#18852](https://github.com/facebook/react/pull/18852)) |
| 1131 | * Profiler tooltip now includes self duration to make it easier to scan times without requiring selection ([bvaughn](https://github.com/bvaughn) in [#18510](https://github.com/facebook/react/pull/18510)) |
| 1132 | * Rendered by list also now highlights native elements on hover ([hristo-kanchev](https://github.com/hristo-kanchev) in [#18479](https://github.com/facebook/react/pull/18479)) |
| 1133 | * Add in-page highlighting for mouse-over interactions in Profiler ([bl00mber](https://github.com/bl00mber) in [#18745](https://github.com/facebook/react/pull/18745)) |
| 1134 | |
| 1135 | #### Bugfix |
| 1136 | * Fix Profiler bug "_Could not find commit data for root_" by resetting selected node on root change ([bl00mber](https://github.com/bl00mber) in [#18880](https://github.com/facebook/react/pull/18880)) |
| 1137 | * Add `imported` flag to Profiling data to more reliably differentiate between imported and session data ([bl00mber](https://github.com/bl00mber) in [#18913](https://github.com/facebook/react/pull/18913)) |
| 1138 | * Disable Profiler filtering to avoid edge case runtime error "_Cannot read property 'duration' of undefined_" ([bvaughn](https://github.com/bvaughn) in [#18862](https://github.com/facebook/react/pull/18862)) |
| 1139 | * Fix Profiler bug "_cannot read property 'memoizedState' of null_" ([bvaughn](https://github.com/bvaughn) in [#18522](https://github.com/facebook/react/pull/18522)) |
| 1140 | * Whitespace search results highlighting bug fix ([bvaughn](https://github.com/bvaughn) in [#18527](https://github.com/facebook/react/pull/18527)) |
| 1141 | * Improved confusing Profiler tooltip text for components that did not render ([bvaughn](https://github.com/bvaughn) in [#18523](https://github.com/facebook/react/pull/18523)) |
| 1142 | * Fix edge case performance issue when highlight elements enabled ([Faelivrinx](https://github.com/Faelivrinx) in [#18498](https://github.com/facebook/react/pull/18498)) |
| 1143 | * Disabled Webpack auto polyfill for `setImmediate` ([bvaughn](https://github.com/bvaughn) in [#18860](https://github.com/facebook/react/pull/18860)) |
| 1144 | * Fix mouse interactions for standalone DevTools on Linux ([bl00mber](https://github.com/bl00mber) in [#18772](https://github.com/facebook/react/pull/18772)) |
| 1145 | |
| 1146 | --- |
| 1147 | |
| 1148 | ### 4.6.0 |
| 1149 | March 26, 2020 |
| 1150 | |
| 1151 | #### Features |
| 1152 | * Add shortcut keys for tab switching ([kerolloz](https://github.com/kerolloz) in [#18248](https://github.com/facebook/react/pull/18248)) |
| 1153 | |
| 1154 | #### Bugfix |
| 1155 | * Improve display of complex values for `useDebugValue` ([eps1lon](https://github.com/eps1lon) in [#18070](https://github.com/facebook/react/pull/18070)) |
| 1156 | * Fix minor CSS layout issue that broke Profiler commit selector UI ([bvaughn](https://github.com/bvaughn) in [#18286](https://github.com/facebook/react/pull/18286)) |
| 1157 | * Inlined DevTools event emitter implementation to fix a source of Profiler bugs ([bvaughn](https://github.com/bvaughn) in [#18378](https://github.com/facebook/react/pull/18378)) |
| 1158 | |
| 1159 | #### Cleanup |
| 1160 | * Remove "es6-symbol" dependency from "react-devtools-inline" package ([bvaughn](https://github.com/bvaughn) in [#18397](https://github.com/facebook/react/pull/18397)) |
| 1161 | |
| 1162 | --- |
| 1163 | |
| 1164 | ### 4.5.0 |
| 1165 | March 3, 2020 |
| 1166 | |
| 1167 | #### Features |
| 1168 | * Improve function props display for inspected elements ([bvaughn](https://github.com/bvaughn) in [#17789](https://github.com/facebook/react/pull/17789)) |
| 1169 | * Re-enabled context menu for Firefox extension ([bvaughn](https://github.com/bvaughn) in [#17838](https://github.com/facebook/react/pull/17838)) |
| 1170 | * Apply changes to props/state/hooks on blur (rather than on ENTER) ([muratcatal](https://github.com/muratcatal) in [#17062](https://github.com/facebook/react/pull/17062)) |
| 1171 | * Add info tooltip to nodes in Profiler ([M-Izadmehr](https://github.com/M-Izadmehr) in [#18048](https://github.com/facebook/react/pull/18048)) |
| 1172 | * Added resize support to Components panel ([hristo-kanchev](https://github.com/hristo-kanchev) in [#18046](https://github.com/facebook/react/pull/18046)) |
| 1173 | |
| 1174 | #### Bugfix |
| 1175 | * Improve how empty commits are filtered ([nutboltu](https://github.com/nutboltu) in [#17931](https://github.com/facebook/react/pull/17931)) |
| 1176 | * BigInt serialize issue in devtools copy to clipboard ([bvaughn](https://github.com/bvaughn) in [#17771](https://github.com/facebook/react/pull/17771)) |
| 1177 | * Renamed "backend.js" to "react_devtools_backend.js" to reduce potential confusion from profiling ([bvaughn](https://github.com/bvaughn) in [#17790](https://github.com/facebook/react/pull/17790)) |
| 1178 | * Update root styles to prevent `box-sizing` style from leaking outside of inline target ([GasimGasimzada](https://github.com/GasimGasimzada) in [#17775](https://github.com/facebook/react/pull/17775)) |
| 1179 | * Fix "_Cannot read property 'sub' of undefined_" error when navigating to plain-text pages ([wfnuser](https://github.com/wfnuser) in [#17848](https://github.com/facebook/react/pull/17848)) |
| 1180 | * Fix potential error with composite hooks during shallow re-rendering ([bvaughn](https://github.com/bvaughn) in [#18130](https://github.com/facebook/react/pull/18130)) |
| 1181 | * Scope dev tools wildcard styles within DevTools CSS class ([@GasimGasimzada](https://github.com/GasimGasimzada) in [9cc094a](https://github.com/facebook/react/commit/9cc094a19a9e43d33ba5ac713935e657ea4e3cdd#diff-ab5ee5655b2aac3260e1f836546a13c9)) |
| 1182 | |
| 1183 | ###### Info summary tooltips |
| 1184 | |
| 1185 |  |
| 1186 | |
| 1187 |  |
| 1188 | |
| 1189 | ###### Components panel resize |
| 1190 | |
| 1191 |  |
| 1192 | |
| 1193 |  |
| 1194 | |
| 1195 | --- |
| 1196 | |
| 1197 | ### 4.4.0 |
| 1198 | January 3, 2020 |
| 1199 | #### Features |
| 1200 | * 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)) |
| 1201 | * 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)) |
| 1202 | * Properly display formatted `RegExp` values in props/state panel([bvaughn](https://github.com/bvaughn) in [#17690](https://github.com/facebook/react/pull/17690)) |
| 1203 | * Profiler commit selector wraps around for easier navigation of large profiles ([bvaughn](https://github.com/bvaughn) in [#17760](https://github.com/facebook/react/pull/17760)) |
| 1204 | #### Bugfix |
| 1205 | * Check `document.contentType` before injecting hook to avoid breaking XML file syntax highlighting in Firefox ([bvaughn](https://github.com/bvaughn) in [#17739](https://github.com/facebook/react/pull/17739)) |
| 1206 | * Fix standalone UI not responding to mouse interactions due to `webkit-app-region` style ([cwatson88](https://github.com/cwatson88) in [#17584](https://github.com/facebook/react/pull/17584)) |
| 1207 | * Support inspecting object values with null protos ([bvaughn](https://github.com/bvaughn) in [#17757](https://github.com/facebook/react/pull/17757)) |
| 1208 | * Support inspecting values that have overridden `hasOwnProperty` attribute ([bvaughn](https://github.com/bvaughn) in [#17768](https://github.com/facebook/react/pull/17768)) |
| 1209 | * 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)) |
| 1210 | |
| 1211 | --- |
| 1212 | |
| 1213 | ### 4.3.0 |
| 1214 | December 20, 2019 |
| 1215 | #### Features |
| 1216 | * Show component location for selected element in bottom/right panel ([bvaughn](https://github.com/bvaughn) in [#17567](https://github.com/facebook/react/pull/17567)) |
| 1217 | * Improved inspected element values with inline previews ([bvaughn](https://github.com/bvaughn) in [#17579](https://github.com/facebook/react/pull/17579)) |
| 1218 | * Improved selection and toggling for inspected element panel ([bvaughn](https://github.com/bvaughn) in [#17588](https://github.com/facebook/react/pull/17588)) |
| 1219 | * Copy context menu for inspecting and copying props/state/hooks/context values ([bvaughn](https://github.com/bvaughn) in [#17608](https://github.com/facebook/react/pull/17608)) |
| 1220 | #### Bug fixes |
| 1221 | * 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)) |
| 1222 | * 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)) |
| 1223 | |
| 1224 | --- |
| 1225 | |
| 1226 | ### 4.2.1 |
| 1227 | November 27, 2019 |
| 1228 | #### Bug fixes |
| 1229 | * Profiler automatically filters certain types of empty (no work) commits. ([bvaughn](https://github.com/bvaughn) in [#17253](https://github.com/facebook/react/pull/17253)) |
| 1230 | * Fix memoized components showing as "Anonymous" in Components tab. ([wsmd](https://github.com/wsmd) in [#17274](https://github.com/facebook/react/pull/17274)) |
| 1231 | * Edge-case bugfix for non-string element keys. ([bvaughn](https://github.com/bvaughn) in [#17164](https://github.com/facebook/react/pull/17164)) |
| 1232 | |
| 1233 | --- |
| 1234 | |
| 1235 | ### 4.2.0 |
| 1236 | October 3, 2019 |
| 1237 | #### Features |
| 1238 | * "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)) |
| 1239 | |
| 1240 | --- |
| 1241 | |
| 1242 | ### 4.1.3 |
| 1243 | September 30, 2019 |
| 1244 | #### Bug fixes |
| 1245 | * 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)) |
| 1246 | |
| 1247 | --- |
| 1248 | |
| 1249 | ### 4.1.2 |
| 1250 | September 27, 2019 |
| 1251 | #### Bug fixes |
| 1252 | * 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)) |
| 1253 | |
| 1254 | --- |
| 1255 | |
| 1256 | ### 4.1.1 |
| 1257 | September 26, 2019 |
| 1258 | #### Bug fixes |
| 1259 | * 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)) |
| 1260 | * 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)) |
| 1261 | * 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)) |
| 1262 | * Show unsupported version dialog with downgrade instructions. ([bvaughn](https://github.com/bvaughn) in [#16897](https://github.com/facebook/react/pull/16897)) |
| 1263 | |
| 1264 | --- |
| 1265 | |
| 1266 | ### 4.1.0 |
| 1267 | September 19, 2019 |
| 1268 | #### Features |
| 1269 | * 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)) |
| 1270 | #### Bug fixes |
| 1271 | * Profiler correctly saves/exports profiling data in Firefox now. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16612](https://github.com/facebook/react/pull/16612)) |
| 1272 | * Class components now show "legacy context" header (rather than "context") for legacy API. ([hristo-kanchev](https://github.com/hristo-kanchev) in [#16617](https://github.com/facebook/react/pull/16617)) |
| 1273 | * 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)) |
| 1274 | * 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)) |
| 1275 | |
| 1276 | --- |
| 1277 | |
| 1278 | ### 4.0.6 |
| 1279 | August 26, 2019 |
| 1280 | #### Bug fixes |
| 1281 | * Remove ⚛️ emoji prefix from Firefox extension tab labels |
| 1282 | * Standalone polyfills `Symbol` usage |
| 1283 | |
| 1284 | --- |
| 1285 | |
| 1286 | ### 4.0.5 |
| 1287 | August 19, 2019 |
| 1288 | #### Bug fixes |
| 1289 | * Props, state, and context values are alpha sorted. |
| 1290 | * Standalone DevTools properly serves backend script over localhost:8097 |
| 1291 | |
| 1292 | --- |
| 1293 | |
| 1294 | ### 4.0.4 |
| 1295 | August 18, 2019 |
| 1296 | #### Bug fixes |
| 1297 | * Bugfix for potential error if a min-duration commit filter is applied after selecting a fiber in the Profiler UI. |
| 1298 | |
| 1299 | --- |
| 1300 | |
| 1301 | ### 4.0.3 |
| 1302 | August 17, 2019 |
| 1303 | #### Bug fixes |
| 1304 | * ES6 `Map` and `Set`, typed arrays, and other unserializable types (e.g. Immutable JS) can now be inspected. |
| 1305 | * Empty objects and arrays now display an "(empty)" label to the right to reduce confusion. |
| 1306 | * Components that use only the `useContext` hook now properly display hooks values in side panel. |
| 1307 | * Style editor now supports single quotes around string values (e.g. both `"red"` and `'red'`). |
| 1308 | * Fixed edge case bug that prevented profiling when both React v16 and v15 were present on a page. |
| 1309 | |
| 1310 | --- |
| 1311 | |
| 1312 | ### 4.0.2 |
| 1313 | August 15, 2019 |
| 1314 | #### Permissions cleanup |
| 1315 | * Removed unnecessary `webNavigation ` permission from Chrome and Firefox extensions. |
| 1316 | |
| 1317 | --- |
| 1318 | |
| 1319 | ### 4.0.1 |
| 1320 | August 15, 2019 |
| 1321 | #### Permissions cleanup |
| 1322 | * Removed unnecessary `<all_urls>`, `background`, and `tabs` permissions from Chrome and Firefox extensions. |
| 1323 | |
| 1324 | --- |
| 1325 | |
| 1326 | ### 4.0.0 |
| 1327 | August 15, 2019 |
| 1328 | |
| 1329 | --- |
| 1330 | |
| 1331 | ### General changes |
| 1332 | |
| 1333 | #### Improved performance |
| 1334 | The legacy DevTools extension used to add significant performance overhead, making it unusable for some larger React applications. That overhead has been effectively eliminated in version 4. |
| 1335 | |
| 1336 | [Learn more](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md) about the performance optimizations that made this possible. |
| 1337 | |
| 1338 | #### Component stacks |
| 1339 | |
| 1340 | React component authors have often requested a way to log warnings that include the React ["component stack"](https://reactjs.org/docs/error-boundaries.html#component-stack-traces). DevTools now provides an option to automatically append this information to warnings (`console.warn`) and errors (`console.error`). |
| 1341 | |
| 1342 |  |
| 1343 | |
| 1344 | It can be disabled in the general settings panel: |
| 1345 | |
| 1346 |  |
| 1347 | |
| 1348 | --- |
| 1349 | |
| 1350 | ### Components tree changes |
| 1351 | |
| 1352 | #### Component filters |
| 1353 | |
| 1354 | Large component trees can sometimes be hard to navigate. DevTools now provides a way to filter components so that you can hide ones you're not interested in seeing. |
| 1355 | |
| 1356 |  |
| 1357 | |
| 1358 | Host nodes (e.g. HTML `<div>`, React Native `View`) are now hidden by default, but you can see them by disabling that filter. |
| 1359 | |
| 1360 | Filter preferences are remembered between sessions. |
| 1361 | |
| 1362 | #### No more inline props |
| 1363 | |
| 1364 | Components in the tree no longer show inline props. This was done to [make DevTools faster](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md) and to make it easier to browse larger component trees. |
| 1365 | |
| 1366 | You can view a component's props, state, and hooks by selecting it: |
| 1367 | |
| 1368 |  |
| 1369 | |
| 1370 | #### "Rendered by" list |
| 1371 | |
| 1372 | In React, an element's "owner" refers to the thing that rendered it. Sometimes an element's parent is also its owner, but usually they're different. This distinction is important because props come from owners. |
| 1373 | |
| 1374 |  |
| 1375 | |
| 1376 | When you are debugging an unexpected prop value, you can save time if you skip over the parents. |
| 1377 | |
| 1378 | DevTools v4 adds a new "rendered by" list in the right hand pane that allows you to quickly step through the list of owners to speed up your debugging. |
| 1379 | |
| 1380 |  |
| 1381 | |
| 1382 | #### Owners tree |
| 1383 | |
| 1384 | The inverse of the "rendered by" list is called the "owners tree". It is the list of things rendered by a particular component- (the things it "owns"). This view is kind of like looking at the source of the component's render method, and can be a helpful way to explore large, unfamiliar React applications. |
| 1385 | |
| 1386 | Double click a component to view the owners tree and click the "x" button to return to the full component tree: |
| 1387 | |
| 1388 |  |
| 1389 | |
| 1390 | #### No more horizontal scrolling |
| 1391 | |
| 1392 | Deeply nested components used to require both vertical and horizontal scrolling to see, making it easy to "get lost" within large component trees. DevTools now dynamically adjusts nesting indentation to eliminate horizontal scrolling. |
| 1393 | |
| 1394 |  |
| 1395 | |
| 1396 | #### Improved hooks support |
| 1397 | |
| 1398 | Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc. |
| 1399 | |
| 1400 |  |
| 1401 | |
| 1402 | #### Improved search UX |
| 1403 | |
| 1404 | Legacy DevTools search filtered the components tree to show matching nodes as roots. This made the overall structure of the application harder to reason about, because it displayed ancestors as siblings. |
| 1405 | |
| 1406 | Search results are now shown inline similar to the browser's find-in-page search. |
| 1407 | |
| 1408 |  |
| 1409 | |
| 1410 | #### Higher order components |
| 1411 | |
| 1412 | [Higher order components](https://reactjs.org/docs/higher-order-components.html) (or HOCs) often provide a [custom `displayName`](https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) following a convention of `withHOC(InnerComponentName)` in order to make it easier to identify components in React warnings and in DevTools. |
| 1413 | |
| 1414 | The new Components tree formats these HOC names (along with several built-in utilities like `React.memo` and `React.forwardRef`) as a special badge to the right of the decorated component name. |
| 1415 | |
| 1416 |  |
| 1417 | |
| 1418 | Components decorated with multiple HOCs show the topmost badge and a count. Selecting the component shows all of the HOCs badges in the properties panel. |
| 1419 | |
| 1420 |  |
| 1421 | |
| 1422 | #### Restoring selection between reloads |
| 1423 | |
| 1424 | DevTools now attempts to restore the previously selected element when you reload the page. |
| 1425 | |
| 1426 |  |
| 1427 | |
| 1428 | #### Suspense toggle |
| 1429 | |
| 1430 | React's experimental [Suspense API](https://reactjs.org/docs/react-api.html#suspense) lets components "wait" for something before rendering. `<Suspense>` components can be used to specify loading states when components deeper in the tree are waiting to render. |
| 1431 | |
| 1432 | DevTools lets you test these loading states with a new toggle: |
| 1433 | |
| 1434 |  |
| 1435 | |
| 1436 | --- |
| 1437 | |
| 1438 | ### Profiler changes |
| 1439 | |
| 1440 | #### Reload and profile |
| 1441 | |
| 1442 | The profiler is a powerful tool for performance tuning React components. Legacy DevTools supported profiling, but only after it detected a profiling-capable version of React. Because of this there was no way to profile the initial _mount_ (one of the most performance sensitive parts) of an application. |
| 1443 | |
| 1444 | This feature is now supported with a "reload and profile" action: |
| 1445 | |
| 1446 |  |
| 1447 | |
| 1448 | #### Import/export |
| 1449 | |
| 1450 | Profiler data can now be exported and shared with other developers to enable easier collaboration. |
| 1451 | |
| 1452 |  |
| 1453 | |
| 1454 | Exports include all commits, timings, interactions, etc. |
| 1455 | |
| 1456 | #### "Why did this render?" |
| 1457 | |
| 1458 | "Why did this render?" is a common question when profiling. The profiler now helps answer this question by recording which props and state change between renders. |
| 1459 | |
| 1460 |  |
| 1461 | |
| 1462 | Because this feature adds a small amount of overhead, it can be disabled in the profiler settings panel. |
| 1463 | |
| 1464 | #### Component renders list |
| 1465 | |
| 1466 | 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. |
| 1467 | |
| 1468 |  |