5 things you didn’t know about React DevTools

If you’re into React development, chances are you’ve tried the official React DevTools. This browser extension lets you debug your components, and is available for Chrome, Firefox and even as a standalone application for Safari and React Native debugging.
The React DevTools is under active development, and new features are added all of the time. This article will show you five of those features that you might not have tried out yet, or that you simply didn’t know existed! Finally, we’ll look at what the future of React DevTools will bring.

Debug performance with the profiler

In September of 2018, the React team introduced an incredibly powerful feature for debugging performance related issues: the Profiler. When used with React 16.5 or later, the React DevTools provides you with a profiling feature, which shows you a summary of how your application re-renders.
Just like the regular JavaScript profiler found in your dev tools of choice, you’ll have to “record” a set of interactions. Once you’ve done that, you’ll see a visualization of each re-render your application goes through, with accurate timing information and color-coded flame graphs. Now, it even captures screenshots of every DOM update!
Here’s the flame graph view of the Profiler
There are some great articles already written that will teach you everything there is to know about the React Profiler. The initial blog post does a great job of introducing most features, and Ekwuno Obinna’s article offers a real deep dive. I can also suggest watching Brian Vaughn’s recorded live stream, where he uses the React Profiler to locate and squash a few pesky performance bugs.

React DevTools is themable!

Are you one of those people that spend some time making your development environment look just right? Well, I have news for you! React DevTools is themable!
The theme selector is hidden behind the cog icon.
It follows your Chrome theme by default, so it’ll respect your dark mode preferences if applicable. But why stop there? The React DevTools comes pre-installed with 18 different themes, including some of the most popular themes for your favorite editors. If that’s not enough, there’s even a UI to implement your very own theme — right in the extension!
READ MORE
SOURCE: https://blog.logrocket.com/5-things-you-didnt-know-about-react-devtools-2c6e0ef22529/
Location: London, UK

Comments

Post a Comment

Popular posts from this blog

HOW CAN USING WORDPRESS BENEFIT YOUR BUSINESS?

WordPress is basically an open-source and free content management tool. It is most commonly used to create websites and it is the simplest, most popular, and widely used tool to  create websites or blogs .   WordPress has become so popular that it powers more than one-fourth of all the websites on the Internet. Every day you visit hundreds of websites and everyone out four websites that you visit is powered by WordPress. WordPress is in business since 2003, and over the last few years, it has become the number one choice for creating websites. This is because it offers a lot of benefits for you and your website. Here are the top reasons why WordPress switching to a WordPress platform would be highly beneficial for your company’s website. 1. EASY TO USE:  Within no time you can install a  WordPress site without any complex installation process. Without any technical expertise, the WordPress site is ready and up and running in a matter of minutes. Al...
Read more

Why choose React?

Image
ReactJS is a JavaScript library that is open source and maintained by  top IT company  Facebook along with a developers’ community. This library(Also convert-able to framework) is used extensively in developing user interface for web applications. This particular framework was invented with a purpose to “ build large applications with data that changes again and again over time”. There are a few tools we use regularly have proved to be quite useful. However, only a handful completely revolutionized our workflow. Facebook’s ReactJS is one of them. With plethora of frameworks available these days, it’s hard to find a framework that could ultimately not become a dead end. After researching at  ValueCoders  we suggest to go for ReactJS. Here are 5 major reasons why some of the giants like Facebook, Instagram, and Whatsapp are relying on ReactJs and what’s there for your upcoming project: REACTJS IS EXTREMELY EFFICIENT ADVANTAGES OF REACTJS Facebook’s Reac...
Read more

How do I develop a mobile apps with ReactJS?

Image
React JS is unquestionably one of the most popular & interpreted  mobile app development  frameworks; with its boundless functionalities, it has stimulated a widespread & vigorous community. This concluded in an extensive stock of reusable fragments for it that will spare your valuable time & efforts while you proceed for programming, React JS library itself motivates loosely covered source code that is compostable and modular. React is composed by Facebook, and it has adopted a separate programming architecture than that of  Angular  JavaScript but the same MVC framework. For being equitable, there is no specific structure for apps built with React. ReactJS is admittedly a comprehensive JS library that inspires us to regenerate the probability for the user. But it won’t allow you to create mobile apps on its own. The library needs the archetype & controller panel that is corresponding to penetrate in the hiatus; Facebook released flux that ...
Read more