I'm that kind of person who, as soon as I start to delve into a new topic / framework / library, I go and do research on everything that could make studying or putting it into practice easier.
In fact, I don't even know the extensions I downloaded in the first days of studying React, I'll just tell you that they were more extensions for React Native than for ReactJS 😁.
Among all this plethora of tools I also downloaded React Developer Tools. (Link for Chrome Web Store, Firefox Add-ons for Firefox, and Microsoft Edge Addons)
Obviously months went by without me using it at all, I didn't understand its potential and usefulness.
And it is precisely for this reason that, after 1 and a half years now, I have decided to bring you some of the really useful features of this extension.
Functionalities
Identification of an app developed in React
By visiting a web page you have the opportunity to see whether it was written in React or not.
Let's take for example a sample page I made: Google Keep Clone Basic.
Just look at the color to understand that the app was written in React and uses a production build.
Let's see an example of a page that doesn't use React instead.
The exact same thing for local applications too.
As from the message presented to us, we see that for those apps that use React, we have 2 new tabs available.
Components tab
By opening the extension you have the opportunity to see how the application is actually structured and identify, for example, a problematic item on a list.
You can pass properties to test how components work with different inputs or change the state of hooks such as useState().
Very useful in case you have non-visible values such as the 'isLoading' parameters.
A step forward for debugging for sure, enough with console.logs at every point of the application 😁.
By inspecting a component you can also observe which part of the application rendered it, showing the components in cascade.
In addition to data inspection and manipulation, the tab comes with some interesting settings.
It gives us the possibility to hide certain components from the list, if the app is very complex and large, change the theme, stop on wranings or decide to print all the information relating to a component in the console.
How many times have you had to print the input props to a component and write and rewrite console.log(props)?😁
Profiler tab
Thanks to this tab we can identify and optimize the performance of our components, once started you will be listening to all the modifications and changes within the app.
Initially the profiler could only be activated once the application had been loaded, thus losing the initial render, which is often the most problematic one.
The issue was resolved later, with the introduction of the 'Reload and start profiling' button.
Which will refresh the page and start the profiler automatically.
Let's see how it works though.
The profiler will display a list of all items along with the loading time of each.
They will then be colored differently based on the time taken and you will have the opportunity to identify those who take the longest to render their children or themselves.
You can also notice if a component is rendered more than once, very useful for discovering superfluous renders.
Debugging React applications can be difficult, especially when users encounter problems that are difficult to reproduce, so I think the extension can be very useful for several use cases.
Both during development and later for performance optimization.
If you liked the post, let me know in the comments, and if you would like to learn more about the topic, tell me below, so that I can make a video or an article in which I actually explain how to best use the profiler and the components tab based on different use cases 😉.
Top comments (0)