In this blog post we will go through some of the useful React Developer Tools, that can help you in development and debugging of your React apps. Using this tool one can write better and cleaner code.

React Developer Tools

Some of the tools which we are going to cover here are Debugging Tools, Libraries, Test utilities etc. Using these tools you can enhance code quality and performance of your react app.

React Developer Tools I have mentioned here are based on my experience with it and use in the projects I am working on. If you know any other React Developer Tools, feel free to mention about it in comments.

React Developer Tool

This tool is available as browser extension for major browsers like Chrome, Firefox, Edge. It is also available as separate NPM package if you want to use it in mobile browser for debugging. Here is the link react-devtools

This is very popular tool, useful for both developing and debugging React apps by all the developers worldwide. Also known as React dev tool gives you a way to debug the rendered components through tab in dev tools. You can view all the props and its value for a particular component.

The feature, I like most is the, visual representation of components re render with timestamps. This is most useful for enhancing the performance of the React App.

Storybook

This is a tool for developing your React UI components separately. It helps in terms of development, testing and documentation of UI components. Imagine that you want to showcase some UI component before using it in project. Using Storybook this is possible.

As a developer, we can create develop the component and share with teams to play with it. It works outside your react project so you don’t need to make any changes in project. You can simply create components and share the storybook with your teams. Checkout official Github of Storybook

Why Did You Render

While React Developer Tool can show the visualisation of re renders, WDYR can notify you about potentially avoidable re-renders. In short it can show you the possible root cause and then you can debug more and fix it. It also works with React Native as well.

This is a nice tool for performance tweaking of your React apps. It is available as NPM package, you can install and use it in your React app. For documentation please check the official Github page of WDYR

Webpack Bundle Analyzer

This is very useful tool to for analysing the application bundle to find out which modules are heavy and which modules can be removed. It uses the webpack stats JSON file to provide us with an interactive treemap visualization of the contents of our bundle.

It is available as npm plugin so you can install and configure it to use in your React application. Checkout the official GitHub of Bundle Analyzer

JEST

Jest was created by Facebook and is a testing framework to test javascript and React apps. You can do unit testing with JEST for your React App. Unit testing is utmost important to reduce bugs in your production app.

JEST is pretty much simple to configure and use with your React App. You can add it as npm package and set up the test. Writing unit test cases are considered to be good practices for the development. You can refer to official GitHub of JEST