Since Friday Version 4 of the React Developer Tools is available to the public. The extension for Chrome, Firefox, and Edge. We have looked at the Update and tell you what the new Version of the Debugging tool can do everything.
The Update of the Browser extension for the development with React comes with full support for React Hooks. In addition, Performance and Navigation have been significantly improved and revised. The previous version took quite a lot of memory and power, and was therefore, for large React Apps is only suitable to a limited extent. With Version 4, this disadvantage has been fixed successfully. If you have the extension, it should update automatically. All of the other find the Extension in Chrome Web Store or Mozilla add-ons.
From now on, adjust that to warnings (console.warning) and fault messages (console.error) so-called “Component Stack Traces” will be appended. So, you’ll not only warn that in your component, something is going wrong, but also see where exactly in the Component Tree of the Fail happened. The view of the components structure has been thoroughly revised and significantly more filter options.
You can now apply filters and hide the elements, as, for example, a list of all elements with the attribute “name=item”. Host Nodes are hidden in Version 4 of the React-Dev-Tools by Default anyone who wants can disable this Filter. Your filter settings are saved from Session to Session. Inline Props of components within a component tree shows you the new Version, in this way, especially a large Component Trees to be clearer. By clicking on a component, you can its Props, State, and Hooks, but continue to watch.
Rendered-by list and Owners Tree
In Version 4, you’ll find a “Rendered by”list in the right sidebar. So you can see faster, where the Props of an element come in a “Unexpected Prop Value” can be significantly faster debugging. The counterpart to the Owners Tree that shows you the entire list of elements that are rendered by a Higher-Order-component that is. Using the Owner Trees in the Render method of an element, you can go to the bottom, which can be super useful, if your foreign or very large React Apps debugging must.
No horizontal Scroll
If you wanted to look at in the previous version of the nested components (so-called “nested components”), you have the case of deeply nested components, it is often both horizontal and vertical scrolling. In the new Version of the indentation when Scrolling automatically to the screen width, that is to say: no horizontal Scroll. Selected items are selected in the new Version, after a Reload to continue.
Hooks are supported
Version 4 offers for your Hooks with the same Support as for Props and State. You can expand Arrays and objects, and Values to edit.
In the old Developer Tools, the hits were not displayed on a plane without indentation, the hierarchical structure was apparent. In the new, looking for the “On this page”function of your browser is similar to, are hierarchical relationships of your elements in the result view.
Components that were rendered by Higher Order Components (HOC), look first of all, as all the others. In the case of the designation you are therefore well advised to follow the following Convention: withHOC(wrapped component). The reason for this is the Only way you have any Chance at all to recognize you when you debug as such. The new Components Tree makes you a little bit easier. He is formatted such HOC terms (and some React-custom functionality, such as React.memo and React.forwardRef) to a Badge that hangs on the relevant components. So you see that at a glance.
Your wraps are several components in a Suspense component, and let her wait on each other, before they are rendered. At the Moment there is for the experimental API is a Use Case: the dynamic rendering of components with React.lazy. Are planned for other use cases, for example, to Retrieve data. From now on, you can test by clicking on the Icon, whether this works as desired.
Better Profiler Function
The initial Mount of an App is a very performance-intensive part. In the previous version of the React-Dev-Tools, you could use the Profiler, although, unfortunately, only after the initials Mount. Since the Update you can see the Performance of your App during the analyze. The data you can then export and with other developers, share. About “Why did this render” can you look at some of the Changes of Props and States between the Renderings. In addition, the Profiler shows you a list of the number of times a component has been rendered during a Profiling Session and how long you took. If you want to analyze the Performance of a particular component, you can use this functionality to jump between Commits back and forth.
t3n says: We find: a really successful Update, the leaves almost nothing to be desired. At least none of us at the Moment. Wherein, a tiny thing, perhaps: In the Profiler the new Version, re-rendering will no longer be highlighted. But actually, nothing.
The biggest flaw – the lack of support for Hooks and a lot of annoying little things about the story with the horizontal Scollon, were eliminated. If you want to try it with no obligation: There is an interactive Tutorial that you are likely to make for the Fanboy or Fangirl–. Kathrin Stoll
This could also interest you: