react/packages/react-devtools/CHANGELOG.md

React DevTools changelog

Changes that have landed in master but are not yet released. Click to see more.

Features

• "Highlight updates" feature added for browser extensions and react-devtools-inline NPM package. (bvaughn in #16989)

4.1.3 (September 30, 2019)

Bug fixes

• Fixed regression where DevTools wouldn't properly connect with apps when using the file:// protocol. (linshunghuang in #16953)

4.1.2 (September 27, 2019)

Bug fixes

• Fixed an infinite loop that occurred in some cases with prop values of NaN. (bvaughn in #16934)

4.1.1 (September 26, 2019)

Bug fixes

• Fixed bug where Components panel was always empty for certain users. (linshunghuang in #16900)
• Fixed regression in DevTools editable hooks interface that caused primitive values to be shown as undefined. (bvaughn in #16867)
• Fixed bug where DevTools showed stale values in props/state/hooks editing interface. (bvaughn in #16878)
• Show unsupported version dialog with downgrade instructions. (bvaughn in #16897)

4.1.0 (September 19, 2019)

Features

• Props/state editor supports adding new values and changing value types. (hristo-kanchev in #16700)

Bug fixes

• Profiler correctly saves/exports profiling data in Firefox now. (hristo-kanchev in #16612)
• Class components now show "legacy context" header (rather than "context") for legacy API. (hristo-kanchev in #16617)
• Show component source button ("<>") now highlights the render method for class components. (theKashey in #16759)
• Bugfix for components with non-standard object values for function.name. (LetItRock in #16798)

4.0.6 (August 26, 2019)

Bug fixes

• Remove ⚛️ emoji prefix from Firefox extension tab labels
• Standalone polyfills Symbol usage

4.0.5 (August 19, 2019)

Bug fixes

• Props, state, and context values are alpha sorted.
• Standalone DevTools properly serves backend script over localhost:8097

4.0.4 (August 18, 2019)

Bug fixes

• Bugfix for potential error if a min-duration commit filter is applied after selecting a fiber in the Profiler UI.

4.0.3 (August 17, 2019)

Bug fixes

• ES6 Map and Set, typed arrays, and other unserializable types (e.g. Immutable JS) can now be inspected.
• Empty objects and arrays now display an "(empty)" label to the right to reduce confusion.
• Components that use only the useContext hook now properly display hooks values in side panel.
• Style editor now supports single quotes around string values (e.g. both "red" and 'red').
• Fixed edge case bug that prevented profiling when both React v16 and v15 were present on a page.

4.0.2 (August 15, 2019)

Permissions cleanup

• Removed unnecessary webNavigation permission from Chrome and Firefox extensions.

4.0.1 (August 15, 2019)

Permissions cleanup

• Removed unnecessary <all_urls>, background, and tabs permissions from Chrome and Firefox extensions.

4.0.0 (August 15, 2019)

General changes

Improved performance

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.

Learn more about the performance optimizations that made this possible.

Component stacks

React component authors have often requested a way to log warnings that include the React "component stack". DevTools now provides an option to automatically append this information to warnings (console.warn) and errors (console.error).

It can be disabled in the general settings panel:

Components tree changes

Component filters

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.

Host nodes (e.g. HTML <div>, React Native View) are now hidden by default, but you can see them by disabling that filter.

Filter preferences are remembered between sessions.

No more inline props

Components in the tree no longer show inline props. This was done to make DevTools faster and to make it easier to browse larger component trees.

You can view a component's props, state, and hooks by selecting it:

"Rendered by" list

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.

When you are debugging an unexpected prop value, you can save time if you skip over the parents.

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.

Owners tree

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.

Double click a component to view the owners tree and click the "x" button to return to the full component tree:

No more horizontal scrolling

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.

Improved hooks support

Hooks now have the same level of support as props and state: values can be edited, arrays and objects can be drilled into, etc.

Improved search UX

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.

Search results are now shown inline similar to the browser's find-in-page search.

Higher order components

Higher order components (or HOCs) often provide a custom displayName following a convention of withHOC(InnerComponentName) in order to make it easier to identify components in React warnings and in DevTools.

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.

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.

Restoring selection between reloads

DevTools now attempts to restore the previously selected element when you reload the page.

Suspense toggle

React's experimental Suspense API 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.

DevTools lets you test these loading states with a new toggle:

Profiler changes

Reload and profile

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.

This feature is now supported with a "reload and profile" action:

Import/export

Profiler data can now be exported and shared with other developers to enable easier collaboration.

Exports include all commits, timings, interactions, etc.

"Why did this render?"

"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.

Because this feature adds a small amount of overhead, it can be disabled in the profiler settings panel.

Component renders list

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.