In this article, you will learn How React Developer Tools Work. If you have been working with React JS or Create React App, or let’s just say that you just started in React. You must have come across the React Developer Tools extension.
React Developer Tools Chrome & Firefox Extensions
This extension is specifically used for React Projects. This tool is available for almost every browser, and here’s the link for the tool for every browser.
React is a great tool for building User Interfaces, while you are on the way to building UI’s and stuff, there are times you want to use the React Developer Tools for checking or debugging the React Project.
Learn React from Scratch with Create-React-App! Work with React Elements, Components, States, APIs, Routers & Testing.
The thing about React Developer tools is that not many understand how the tool color indication works, especially if you are a beginner.
So, let’s cut to the chase, and get to the details.
If the React Developer Tools icon is Grayed out like this:
This means that React is not active on that page.
If the React Developer Tools icon is Red Color like this:
This means that the page does use React, but the page is hosted in the development mode.
But, finally, if the React Developer Tools is in Bright blue, like this:
This means that the React page you are viewing is in Live mode.
So, to sum up:
- Gray is “React does not exist on page”
- Red is “React does exist, but running on development server”
- Bright blue is “React does exist, and running on live server”
Hope this article helps you guys.
Master with Our Course!
Hrs of course contents, Modules, and lessons. Learn from industry experts. Perfect for .
Source link
