Introduction
React developers have created a browser extension called React Developer Tools that help debug your React apps.
Installation of React Developer Tools
- Head to the extensions page for your relevant browser.
Chrome: https://chrome.google.com/webstore/category/extensions
Firefox: https://addons.mozilla.org/en-US/firefox/extensions/
- Search for
react developer toolsand install it.
Once it’s installed, you will need to close all instances of your browser and reopen it.
You should then find two new tabs called Components and Profiler. The one you’ll be most interested in at this stage is Components. You can drag this tab to be closer to other Browser developer tool tabs that are used more frequently, e.g. Elements and Console.
Using the React Developer Tools
Using the React Developer Tools is similar to using the Inspect Element.
You can select an element, but instead of it being an element, it’s a component within the app.
On the right-hand side, you can see the state and props for that component.
This lets you easily see what is happening in a component without having to always use console.log.
Lesson task
Goal
For the student to get used to the React Dev Tools.
Brief
You will use the React Dev Tools to look around a React app.
NOTE: Lesson tasks do not get submitted on Moodle and are not assessed by tutors. They are mainly there for you to practise what you have leart in the lesson.
Level 1 process
-
Open a project where you have stored a state, or add a new state.
-
Find the element in the React Dev Tools and inspect the values of this component.