in

Loving ItLoving It

[Latest]{Working} Easy Install and Learn React JS Chrome Extension

Install and Learn React JS Chrome Extension using a sample react web page. This teachs us how to use the react chrome extension with ease very fast.

React JS Chrome Extension

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.

Jump to:

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.
google react js chrome extension
google react js chrome extension
  • Or use the link provided below.
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
  • Now click on Add to Chrome.
Add the chrome extension to chrome
Add the chrome extension to chrome
  • Now click on Add Chrome Extension.
Add Chrome Extension
Add Chrome Extension
  • You will get the notification as shown below.
notification
notification
  • 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.
https://codepen.io/
  • Click on the React Js Chrome extension from the top right.
  • You will see the given pop-up.
codepen using React Js
codepen using React Js

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.
Developer version of React
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.
f12
  • 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.
Component Tab
Component Tab
  • We can change the theme by pressing the cogwheel icon.
cogwheel icon
cogwheel icon
  • It will bring up a small pop up given below.
settings pop up
settings pop up
  • Click on the dropdown next to the theme.
theme dropdown
theme dropdown
  • 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.
component in the component tab
component in the component tab
  • There is a copy icon that will let us copy the props of the item.
copy props
copy props
  • We paste the content of the clipboard and we find the props in JSON format.
JSON props
JSON props
  • Use the inspect element provided here to see the element content of the page.
inspect the component
inspect the component
DOM elements
DOM elements
  • There is a button to get the inspect element like feature in the React developer tools tab also.
inspect react component
inspect react component
React Component Inspect Element
React Component Inspect Element
  • 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
$r
  • 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.
$r
$r
esc
  • Now we can use the component tab and the console tab simultaneously as shown in the image.
Console tab over Component tab
Console tab over Component tab
  • With this, we can use it as a normal dom component.
Using the console tab
Using the console tab
  • Use the settings tab to get to the highlight updates checkbox.
highlight setting
highlight setting
  • Now use the props window to update the value manually and see that the dom component that changes will get highlighted.
real time highlight
real-time highlight
  • Another cool feature of the highlight is the ability to highlight the dom element and the component while searching.
highlight in search
highlight in search
  • The search box takes regex also.
  • We can use the eye icon to view the matching DOM source.
Inspect matching DOM element
Inspect matching DOM element
corresponding dom element
corresponding dom element
  • Similarly, we can use the view source to go to the matching source.
View Source for this element
View Source for this element

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.

Conclusion:

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
4.6

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments