Hi folks,
Hope you are all safe!
I’m developing a custom application using React framework of FDK. I’m wondering how to use React Developer Tools (Chrome extension) to inspect React components since when I tried, I couldn’t. Please refer below screenshot.
And, I suspect that, since the application is rendered as iframe, the extension couldn’t recognize it. I would appreciate any help on this.
hey @rajezz,
Unfortunately, you cannot use the chrome extension for react apps that run inside an iframe, but you can still use the CLI version of the react devtools by following the below steps
Step 1: Start the react devtools util using the below command in the Terminal,
npx react-devtools
Step 2: once the Util is started, it will display the react devtools UI, from which you can copy the script src, in this case <script src="http://localhost:8097"></script>
Step 3: Paste the copied script in the public/index.html like shown below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Application</title>
</head>
<body>
<div class="" id="root"></div>
</body>
<!-- React Devtools UTIL -->
<script src="http://localhost:8097"></script>
</html>
Step 3: Restart the FDK, refresh the page and you can see the React devtools UI
Hope this helps!
Stay Safe 
