React Developer Tools

React Developer Tools are debugging tools for the open-source React library. It allows you to inspect the React component hierarchies in Chrome's Developer Tools. Because Finsemble's UI components are built using React, the React DevTools can be very helpful while debugging Finsemble.

Installing React DevTools

First, install React Developer Tools locally using a command prompt:

npm install --save-dev react-devtools

Next, add the following to your scripts section in your package.json:

"react-devtools": "react-devtools"

Setup

Option 1: Import React DevTools directly into the component

If your component is hosted locally, you can import the React DevTools into the main JavaScript file for your component:

import "react-devtools";

Ensure the React DevTools import is above all other imports in the file—it needs to be loaded before ReactDOM and React for the developer tools to work.

Note that you cannot import the React DevTools directly into a component that is hosted externally, e.g., a web app where index.js is just a reference point. If this is the case, use option 2.

Option 2: React DevTools as a preload in components.json

If your component is hosted externally, you can use React DevTools as a preload. Open configs\application\components.json. Find your component and set your component.preload to "preload": ["http://localhost:8097"].

Alternate solutions

If neither of these solutions work for your use case there is an alternative solution based on Webpack. Please contact the Finsemble Client Success team at support@finsemble.com to find out more.

Using the tools

After you've launched Finsemble, run the following from the command line in the same directory as your project:

npm run react-devtools

You may only be able to use the tools with one component at a time. To switch between components you will need to:

Close all other components.
Reload the React DevTools and the component window. The component with focus will be the component that React DevTools will use.

Note: Make sure to remove the React DevTools import before deploying to production as it carries a large client with it.

The React DevTools can be imported directly into a locally hosted component or added as a preload to an externally hosted component. The developer tools can be used to inspect one component at a time.