React JS Chrome Extension:
We will learn how to use the React Js chrome extension developer tools. We will see how to download React Js chrome extension and use it in this post. It is easy to use React Js chrome extension but for this tutorial, we will have to create a small React web page and see how we can use the chrome extension to debug the web page.
Install React JS Chrome Extension:
To begin with, let us see how to install React Js Chrome Extension.
- Google search for React Js chrome extension and select the link shown in the image.
- Or use the link provided below.
- Now click on Add to Chrome.
- Now click on Add Chrome Extension.
- You will get the notification as shown below.
- The above steps will successfully install React Js Chrome Extension in the browser.
- It will help us build react js web pages easily.
- To ensure that the react js chrome extension is installed properly use the following link in a new tab.
- Click on the React Js Chrome extension from the top right.
- You will see the given pop-up.
This ensures that we have successfully installed the Chrome extension and it is working fine.
How to use React Js Chrome Extension?
React Dev tools are useful things. It is recommended to react to developers. To see the features, we will make use of a simple counter app. The app is shown in the figure.
- The icon for the react chrome extension is red and it indicates that the React Web Site is running on the developer version of React.
- The production website of React must not use the Development version of React.
- Let us open the dev tools by pressing the following keyboard shortcut.
- Now click on the components tab shown in the image. Note that this tab will not be available until we install the react developer chrome extension.
- We can change the theme by pressing the cogwheel icon.
- It will bring up a small pop up given below.
- Click on the dropdown next to the theme.
- Here we can choose the theme of our choice.
- We can use the component tab to select an element and have it highlighted in the DOM.
- There is a copy icon that will let us copy the props of the item.
- We paste the content of the clipboard and we find the props in JSON format.
- Use the inspect element provided here to see the element content of the page.
- There is a button to get the inspect element like feature in the React developer tools tab also.
- Let us consider where we select a certain element in the Component tab.
- We now go to the console tab and enter the following command
- We will find the get to the element in the console tab quickly.
- We can have console tab and the component tab one above the other by pressing the following key.
- Now we can use the component tab and the console tab simultaneously as shown in the image.
- With this, we can use it as a normal dom component.
- Use the settings tab to get to the highlight updates checkbox.
- Now use the props window to update the value manually and see that the dom component that changes will get highlighted.
- Another cool feature of the highlight is the ability to highlight the dom element and the component while searching.
- The search box takes regex also.
- We can use the eye icon to view the matching DOM source.
- Similarly, we can use the view source to go to the matching source.
The above are few useful features of React Js Chrome Extension. If you want to know more about it, please let us know in the comments below.
In this post, we learned about the uses of the official React Js Chrome Extension. Using this extension we can view the DOM elements as react elements and also get to the actual DOM elements using the in-tab buttons used in this post.
If you want to learn more about React Js Chrome extension, please stay tuned to TecKangaroo.
React JS Chrome Extension
- Author Rating
- Content Quality
- React JS Chrome Extension
- Article Accuracy